바이브 코딩에 모자란 건 코드가 아니라 UI/UX 개념

엿새 사이에 같은 화면이 이렇게 달라졌다

필독 약국입지는 서울의 병원 개원 후보와 약국 개국 후보를 100점 만점 점수로 지도에 얹어 보여 주는 화면이다. 로그인 없이 열린다. 기능은 7월 말에 이미 다 돌아가고 있었다.

아래 두 장은 같은 탭(약국 입지)을 찍은 것이다. 앞이 7월 31일이고, 뒤는 지금 같은 화면을 다시 연 것이다. 그 사이에 새로 붙은 기능은 없다. 목록에 뜬 후보도 순위까지 같다. 달라진 것은 화면이 사용자에게 시키는 일의 양이다.

원칙 1 — 사용자가 IT에 밝지 않다면 익숙한 것이 옳다

이 화면을 쓰는 사람은 약사다. 지도 앱을 매일 쓰지만, 지도 앱의 컨트롤이 어떻게 생겨야 하는지 생각해 본 적은 없는 사람들이다. 이럴 때 새로 잘 디자인한 컨트롤은 잘 디자인했다는 바로 그 이유로 낯설다.

그래서 참고 대상을 국내에서 가장 많이 쓰는 지도로 잡았다. 네이버 지도다. 네이버 지도는 배경지도를 고를 때 글자로 묻지 않는다. 같은 자리에 지도 조각 그림을 놓고 고르게 한다. 글자를 읽고 머릿속에서 그 지도의 모습을 떠올리는 단계가 통째로 빠진다.

약국입지도 그 방식으로 바꿨다. 기본 지도 · 상세 지도 · 카카오 · 위성 네 가지를 각각 작은 그림으로 보여 준다. 그림은 실제 지도 타일을 잘라 붙인 것이 아니라 손으로 그린 벡터 그림이다. 지도 서비스의 타일을 저장해 다시 배포하는 것은 이용약관이 막고, 미리보기용 지도를 네 개 더 띄우면 그만큼 느려지기 때문이다. 그래서 「그 지도의 실제 모습」이 아니라 「성격이 구분되는 그림」을 그렸다. 목적은 고르기 전에 성격을 알아보는 것이지 실물 예고가 아니다.

익숙함에서 베끼는 것은 그림이 아니라 자리와 방식이다

베낀 것은 네이버의 그림 자체가 아니다. 컨트롤이 화면 어디에 있고 무엇으로 고르게 하는가, 이 둘이다.

이 둘은 사용자가 다른 서비스에서 이미 학습을 마친 부분이라 베끼면 학습 비용이 0이 된다. 반대로 여기서 독창성을 발휘하면, 사용자는 당신의 화면을 위해 새 학습을 한 번 더 해야 한다. 그 비용을 낼 의사가 있는 사용자인지 먼저 따져야 한다. 약사는 아니었다.

원칙 2 — 나열하지 말고 묶는다. 묶은 것은 닫혀 있어도 값을 말해야 한다

7월 31일 화면의 툴바에는 컨트롤 여섯 개가 평평하게 놓여 있었다. 자치구 선택, 행정동 선택, 기존 병원 체크박스, 기존 약국 체크박스, 지점 분석 버튼, 배경지도 선택.

문제는 개수가 아니었다. 지금 무엇을 보고 있는지 알려면 여섯 개를 전부 훑어야 했다는 것이 문제였다. 선택 상자를 늘어놓으면 화면의 현재 상태가 컨트롤들 사이에 흩어진다.

묶고 나서 셋이 됐다. 지역 · 지점 분석 · 배경지도. 여기서 핵심은 개수가 줄었다는 것이 아니라, 닫힌 버튼이 자기 현재 값을 적고 있다는 점이다. 지역 버튼에는 「서울 전체」 또는 「강남구 역삼동」이 적혀 있다. 열지 않아도 읽힌다. 묶기가 정보를 숨기는 일이 되지 않으려면 이 조건이 반드시 붙어야 한다.

묶지 않고 남길 기준도 필요했다. 병원 입지 / 약국 입지 탭은 그대로 뒀다. 이 화면에 두 모드가 있다는 사실 자체가 첫 정보이기 때문이다. 접으면 약국 입지가 있다는 것을 끝내 모르는 사용자가 생긴다. 반대로 기존 시설 체크박스 둘은 툴바에서 아예 빼서 지도 위 범례 안으로 옮겼다. 색의 뜻과 그 색을 켜고 끄는 스위치는 한자리에 있어야 하고, 그 자리를 범례가 이미 갖고 있었다.

정리하면 묶기의 규칙은 셋이다. 첫째, 관련 있는 것끼리 한 버튼 뒤로 넣는다. 둘째, 그 버튼은 닫혀 있어도 현재 값을 보인다. 셋째, 그 화면에 무엇이 있는지 알려 주는 컨트롤은 묶지 않는다.

원칙 3 — 전부 펼치지 말고 필요할 때만 꺼낸다

7월 31일 화면은 아는 것을 전부 화면에 적어 두고 있었다. 계산 시각과 적재 건수가 탭 옆에 늘 떠 있었고, 지도 아래에는 「흐림 = 다른 탭의 후보」, 「표식 크기 = 후보는 점수, 기존 병원은 종별」, 「지도 우클릭 = 그 지점 즉석 분석」이 두 줄로 상주했다. 오른쪽 상세 칸에는 예상 처방유입, 월 조제매출, 월 OTC 순이익, 권리금 참고, 적정 월임대료, 원천 집중도, 실존 원천 처방이 한꺼번에 펼쳐져 있었다.

이 정보들은 전부 맞는 정보다. 문제는 전부 동시에 필요하지는 않다는 것이다. 처음 들어온 사람은 표식이 무슨 뜻인지 궁금하고, 익숙해진 사람에게는 그 설명이 매번 지도 높이를 갉아먹는 방해물이다. 한 화면이 두 사람을 동시에 상대해야 한다.

그래서 상시 노출을 정보 아이콘 뒤로 옮겼다. 지우지 않고 옮긴 것이 중요하다. 근거를 없애면 사용자가 추정치를 검증할 수단이 사라진다. 지금은 범례 옆 아이콘을 누르면 표식 읽는 법이 뜨고, 목록 바닥의 아이콘 둘이 계산 시각과 계산에 쓴 자료를 답한다. 화면은 조용해졌고 근거는 그대로 있다.

같은 원칙이 용어에도 적용됐다. 7월 31일 화면에는 「원천 집중도 HHI 0.847」이라는 줄이 있었다. HHI는 시장 집중도를 재는 통계 지표인데, 이 화면의 독자는 약사다. 한 번 읽고 이해되지 않는 말은 화면 본문에 두지 않는다. 지금 그런 용어들은 설명 안으로 들어갔고, 본문에 다시 새어 나오지 않도록 금지 표현 목록을 검사로 걸어 뒀다. 사람이 매번 눈으로 잡을 수 있는 종류의 실수가 아니기 때문이다.

원칙 4 — 공통인 사실은 항목이 아니라 제목이 진다

목록에는 후보가 마흔 개 들어간다. 마흔 개 전부에 해당하는 사실이 셋 있다. 무엇의 후보인지, 어느 범위에서 뽑았는지, 몇 개까지 보여 주는지. 이 셋을 항목마다 적으면 같은 말이 마흔 번 반복된다. 반복되는 말은 정보이기를 그만두고 배경이 되는데, 배경이 되면서도 자리와 시선은 계속 가져간다. 읽히지도 않으면서 비용만 남는 상태다.

그래서 셋을 제목 한 줄이 진다. 「병원 개원 후보 · 서울 전체 · Top 40」. 항목에는 서로 다른 것만 남는다. 순위, 동 이름, 주소, 점수, 추천 과목. 새 컴포넌트를 만들 필요도, 레이아웃을 다시 짤 필요도 없다. 공통인 말을 한 단계 위로 올리기만 하면 된다.

계산 시각도 같은 이유로 자리를 옮겼다. 7월 31일에는 「계산 07-30 16:12 · 병원 19,911 · 약국 5,903」이 화면 맨 위 탭 옆에 붙어 있었다. 그런데 이 신선도가 설명하는 대상은 화면 전체가 아니라 바로 아래 목록의 점수다. 지금은 목록 바닥으로 내려가 「계산 시각」 한 마디와 아이콘이 됐다. 설명하는 것 옆에 두면 무엇에 대한 시각인지 따로 적을 필요가 없어진다.

덤도 있다. 제목이 범위를 말하게 되면 그 문장을 만드는 함수를 지역 버튼도 같이 쓰게 된다. 목록 제목과 버튼이 서로 다른 범위를 말하는 사고가 구조적으로 막힌다. 표시를 정리했더니 상태 관리가 함께 정리된 셈이다.

왜 이것이 바이브 코딩의 문제인가

이 화면의 코드를 처음부터 끝까지 사람이 한 줄씩 친 것은 아니다. 상당 부분을 AI가 짰고, 그래서 기능은 빨리 붙었다. 7월 31일 화면도 요구사항 기준으로는 완성이었다. 후보를 점수순으로 보여 주고, 지역을 좁힐 수 있고, 상세를 열 수 있고, 임의 지점을 분석할 수 있다. 명세에 적힌 것은 전부 있었다.

명세에 없던 것이 UI/UX 판단이다. 여섯 개를 셋으로 묶을지, 배경지도를 글자로 고를지 그림으로 고를지, 표식 설명을 늘 띄울지 아이콘 뒤에 둘지, 목록 전체에 공통인 사실을 항목마다 반복할지 제목에 한 번 적을지. 이건 「구현해 줘」로 나오지 않는다.

요구사항에 적혀 있지 않으면 AI는 가장 흔한 형태를 낸다. 컨트롤을 순서대로 나열하고, 가진 데이터를 전부 화면에 적는 형태다. 그게 틀린 답이어서가 아니라 가장 안전한 기본값이기 때문이다. 누락으로 감점당하지 않는 쪽을 고르는 것이다.

그래서 바이브 코딩이 빨라질수록 UI/UX 개념이 더 필요해진다. 코드를 못 짜서 막히는 구간이 사라지면, 남는 병목은 무엇을 접고 무엇을 남길지 정하는 사람이다. 이 화면도 구현은 다른 개발자가 했고, 마지막에 따로 코칭한 것은 위 네 가지뿐이었다. 그 넷에 엿새가 들었다.

지금 만들고 있는 화면에 그대로 대 볼 네 줄

하나. 이 컨트롤과 같은 일을 하는 컨트롤이 네이버·카카오·토스에 있는가. 있으면 그 자리와 그 방식을 먼저 베낀다. 독창성은 그다음 문제다.

둘. 한 줄에 놓인 컨트롤이 넷을 넘는가. 넘으면 묶는다. 단, 묶은 버튼은 닫힌 상태에서 현재 값을 보여야 한다. 값을 못 보일 것 같으면 묶지 말고 그대로 두는 편이 낫다.

셋. 화면에 늘 떠 있는 설명 문구가 있는가. 사용자가 처음 30초 이후에도 그것을 읽는지 자문한다. 아니라면 정보 아이콘 뒤로 옮긴다. 지우지는 않는다.

넷. 목록 항목마다 똑같이 반복되는 낱말이 있는가. 있으면 항목에서 빼고 목록 제목으로 올린다.

넷 다 새 기능이 아니라 배치 문제다. 그래서 AI에게 시켜도 되는 일이지만, 시키려면 사람이 먼저 이 넷을 알고 있어야 한다. 바이브 코딩에서 사람이 붙잡고 있어야 하는 것이 정확히 이 자리다.

직접 보기

약국입지 화면은 로그인 없이 열린다. https://www.pilldoc.co.kr/PharmSite 에서 오른쪽 위 「기본 지도」 버튼을 눌러 보면 원칙 1과 2가 한 번에 보인다. 목록 바닥의 아이콘 둘과 지도 아래 범례 옆 아이콘이 원칙 3이고, 목록 제목이 원칙 4다.

화면의 모든 금액과 건수는 모델 추정치다. 실제 개원·개국 판단에 쓸 때는 현장 확인이 따로 필요하다.