병원 바이브 코딩 · 방법의 핵심

디자인은
첫 페이지가 결정합니다

바이브 코딩에서 디자인이 무너지는 이유는 AI의 실력이 아니라 기준의 부재입니다. "예쁘게 만들어 주세요"라는 지시는 평균값을 부르고, 페이지마다 다른 기준이 쌓이면 사이트 전체가 흐트러집니다. 레퍼런스 한 벌을 정확히 확정하고 첫 페이지를 끝까지 완성하면, 나머지 페이지는 새로운 창작이 아니라 그 기준의 확산이 됩니다.

교육 과정 보기 레퍼런스 고르는 기준

무너지는 이유

"예쁘게"는
지시가 아닙니다

AI에게 기준 없이 디자인을 맡기면 무난하고 어디서 본 듯한 화면이 나옵니다. 학습한 것의 평균에 가까운 결과를 내놓기 때문이며, 이것은 도구를 바꾼다고 해결되지 않습니다. 지시가 모호할수록 결과는 평균에 가까워집니다.

더 자주 일어나는 문제는 기준이 페이지마다 달라지는 것입니다. 오늘 만든 화면과 내일 만든 화면의 여백과 글자 크기, 버튼 모양이 조금씩 어긋나면 각 페이지는 그럴듯해도 사이트 전체는 흐트러져 보입니다. 환자는 그 어긋남을 "정돈되지 않은 병원"으로 읽습니다.

한 가지 더, 경험에서 얻은 교훈이 있습니다. 글자와 도형만으로 채운 화면은 "AI가 만든 것 같다"는 인상을 줍니다. 아무리 배치가 정돈되어도 사진이 한 장도 없으면 사람이 만든 화면처럼 읽히지 않습니다 — 이미지는 장식이 아니라 신뢰의 재료입니다.

고르는 기준

잘 고르는 것이
잘 만드는 것입니다

레퍼런스를 정하는 일은 취향의 문제로 보이지만 실제로는 설계의 문제입니다. 아래 세 가지를 지키면 이후의 모든 결정이 쉬워지고, 어기면 첫 페이지부터 계속 흔들립니다.

한 벌로 고릅니다

이 사이트의 상단, 저 사이트의 카드, 또 다른 곳의 색을 모으면 어느 것도 아닌 화면이 됩니다. 좋아 보이는 조각들은 각자의 맥락 안에서 좋아 보이는 것이므로, 한 사이트를 정해 그 안에서 끝까지 가는 편이 낫습니다.

부분이 아니라 시각 언어를 봅니다

버튼의 곡률 같은 디테일이 아니라 레이아웃의 골격과 글자의 위계, 색의 역할과 여백의 균형을 봅니다. 화면 하나가 아니라 그 사이트가 화면을 만드는 방식 전체가 레퍼런스입니다.

내 재료의 양에 맞춥니다

큰 사진 스무 장을 전제로 설계된 디자인을 사진 세 장으로 채우면 빈 화면이 됩니다. 가지고 계신 사진과 글의 양, 앞으로 채울 수 있는 양을 먼저 헤아린 뒤 그 분량에 맞는 레퍼런스를 고르십시오.

병원 홈페이지라면 하나를 더 보십시오 — 그 레퍼런스가 신뢰를 어떻게 만들고 있는지입니다. 화려함으로 시선을 끄는 사이트와 차분함으로 믿음을 주는 사이트는 설계 방식이 다르며, 진료의 성격과 맞지 않는 쪽을 고르면 잘 만들수록 어긋납니다.

옮기는 것

레퍼런스에서 옮기는 것은 다섯 가지입니다

레퍼런스를 참고한다는 말은 막연하게 들리지만, 실제로 옮기는 것은 아래 다섯 가지로 정리됩니다. 이것을 문장으로 적어 두면 AI에게 내리는 지시가 곧바로 정확해집니다.

레이아웃의 골격화면을 몇 단으로 나누고 무엇을 먼저 보여 주는지 — 정보의 순서와 배치의 규칙

글자의 위계제목과 본문의 크기 차이, 굵기의 단계, 줄 간격 — 무엇을 크게 말하고 무엇을 낮춰 말하는지

색의 역할몇 가지 색을 쓰고 각각이 무슨 일을 하는지 — 강조색은 어디에만 쓰는지가 특히 중요합니다

여백의 균형요소 사이의 간격과 구획이 바뀌는 지점 — 정돈된 인상의 대부분은 여기에서 나옵니다

모션의 성격움직임이 있는지, 있다면 얼마나 느리고 절제되어 있는지 — 과한 모션은 신뢰를 깎습니다

반대로 옮기지 않는 것도 분명합니다 — 사진과 문구, 로고와 고유한 그래픽은 그 병원의 것입니다. 레이아웃의 관습은 널리 공유되는 방식이지만, 콘텐츠는 만든 사람의 자산입니다.

다섯 가지를 한 문서에 적어 두는 것이 이 단계의 결과물입니다. 머릿속에만 있으면 다음 페이지를 만들 때 조금씩 달라지지만, 적혀 있으면 몇 주 뒤에도 같은 기준으로 이어 만들 수 있습니다.

그리고 이 문서는 AI에게 주는 지시서가 되기도 합니다. 기준이 문장으로 정리되어 있을수록 결과가 지시에 가까워집니다 — 디자인을 잘 시키는 일은 결국 잘 적어 두는 일에 가깝습니다.

확산의 순서

한 장을 끝내고
나머지로 퍼뜨립니다

여러 페이지를 조금씩 동시에 만들면 기준이 끝내 서지 않습니다. 첫 페이지 하나를 완성 수준까지 끌어올린 뒤 그 결과를 규칙으로 고정하고, 나머지는 그 규칙 위에서 빠르게 확산시키는 순서가 가장 확실합니다.

1단계 · 확정

레퍼런스 한 벌을 정합니다

고르는 데 시간을 아끼지 마십시오. 여기에서 아낀 한 시간은 이후에 여러 날로 돌아옵니다.
2단계 · 완성

첫 페이지를 끝까지 만듭니다

대충 넘어가지 않고 한 장을 완성합니다. 이 화면이 이후 모든 페이지의 기준이 되므로, 여기의 어긋남은 그대로 복제됩니다.
3단계 · 고정

색과 글자와 간격을 값으로 굳힙니다

완성된 첫 페이지에서 쓴 값들에 이름을 붙여 한곳에 모읍니다. 이후에는 그 이름만 부르므로 화면마다 값이 달라지지 않습니다.
4단계 · 확산

나머지 페이지를 같은 규칙으로 만듭니다

이 단계는 창작이 아니라 적용이라 훨씬 빠릅니다. 새 페이지를 만들 때마다 기준을 다시 정하지 않아도 되기 때문입니다.

3단계가 비개발자에게 가장 낯선 대목이지만 효과는 가장 큽니다. 디자인 속성값을 이름 붙여 한곳에 자산화해 두면, 이후 색 하나를 바꿀 때 페이지를 모두 뒤지지 않고 한 곳만 수정하면 됩니다. 운영을 오래 할수록 이 차이가 커집니다.

여기까지가 공개

기준은 여기에,
손은 교육에서

이 문서는 왜 첫 페이지가 기준이 되는지와 무엇을 보고 무엇을 옮길지까지를 다룹니다. 레퍼런스를 실제 화면으로 옮기는 지시문과 값을 고정하는 작업, 그리고 결과가 어긋났을 때 되돌리는 방법은 교육에서 첫 화면을 함께 만들며 다룹니다. 이 부분은 읽는 것보다 한 번 해 보는 편이 압도적으로 빠릅니다.

교육 과정 보기

자주 묻는 질문

디자인에서 가장 많이 묻는 것들

디자인 감각이 없어도 되나요

감각보다 기준이 하는 일이 훨씬 큽니다. 잘 만들어진 사이트를 하나 정해 그 시각 언어를 일관되게 따르면, 감각으로 매번 새로 판단하지 않아도 화면이 정돈됩니다. 고르는 눈은 만드는 손보다 기르기 쉽습니다.

레퍼런스는 어디에서 찾나요

같은 진료과의 국내 병원만 보면 서로 닮은 화면만 모입니다. 해외 병원과 의료 외 분야의 잘 만든 서비스 사이트까지 함께 보시면 선택의 폭이 넓어집니다. 중요한 것은 출처가 아니라 한 벌을 정해 끝까지 지키는 것입니다.

다른 병원 홈페이지를 그대로 따라 해도 되나요

레이아웃의 관습 — 상단에 진료과목을 두고 하단에 오시는 길을 두는 식 — 은 널리 공유되는 방식이라 참고할 수 있습니다. 다만 사진과 문구, 로고와 디자인 요소는 그 병원의 것이므로 옮기지 않습니다. 따라 해서도 안 되고, 따라 해봐야 그 병원처럼 보일 뿐 우리 병원으로 보이지 않습니다.

사진이 없으면 어떻게 하나요

AI가 만든 디자인은 다 비슷하지 않나요

기준을 주지 않으면 그렇습니다. 지시가 모호할수록 평균값에 가까운 화면이 나오기 때문입니다. 반대로 레퍼런스를 정확히 정해 주면 그 방향으로 상당히 멀리 갑니다 — 결과의 차이는 도구가 아니라 지시의 정확도에서 생깁니다.

이 안내를 쓰는 곳

첫 화면을 함께 만들어 보시려면

교육에서는 레퍼런스를 함께 고르고 첫 페이지를 완성하는 데까지 갑니다. 기준이 정립된 첫 화면을 확보하고 돌아가시면, 나머지는 그 위에서 이어 만드실 수 있습니다.