한의원 홈페이지 제작, 소요한의원 '사상체질 다이어트'를 컬러 블록으로 만든 과정

요약 한의원 다이어트 홈페이지 제작에서 저희가 붙잡은 질문은 "굶다가 요요를 겪은 사람이 '이번엔 다르겠다'고 느끼려면 무엇을 봐야 하나"였습니다. 소요한의원은 블러썸팩토리가 서울 성수의 가상 사상체질 다이어트 한의원을 정하고, 실제 의뢰처럼 원장님의 강점부터 세워 만든 포트폴리오 홈페이지입니다. 네 가지 색 블록 인트로, 5문항 사상체질 테스트, 4주 프로그램까지 어떤 판단으로 만들었는지 디자이너가 직접 정리했습니다.

성수의 가상 다이어트 한의원, 강점부터 정했습니다

소요한의원은 실제 고객이 아니라 저희가 포트폴리오용으로 만든 가상의 한의원입니다. 서울 성수에서 사상체질 다이어트를 중심으로 보는 한의원이라고 정하고, 실제 의뢰처럼 이 병원을 찾는 사람의 마음부터 적었습니다.

한의원 다이어트를 검색하는 분들은 대개 이미 여러 번 굶고 참아 봤습니다. 빠졌다가 다시 찌는 요요를 겪고 나면 "나는 의지가 약한가" 하는 마음이 남습니다. 이분들에게 "단기간 몇 kg" 같은 숫자는 오히려 의심을 키웁니다. 필요한 것은 이번에는 왜 다른지에 대한 설명입니다.

그래서 강점 한 문장을 사상체질 진단으로 사람마다 다른 감량 방법을 찾고, 굶기지 않는 다이어트를 대표원장이 매주 한 번 직접 체크한다로 정했습니다. 헤드라인은 "굶지 않고, 내 체질대로 빠지는 법."입니다. 문제는 의지가 아니라 체질이라는 메시지로, 실패의 책임을 방문자에게서 덜어 주는 문장입니다. 원장님의 강점에서 출발하는 이유는 병원 브랜딩, 원장님에서 시작해야 하는 이유에 자세히 적어 두었습니다.

첫 화면: 네 가지 색 블록이 쌓이는 3초

사이트를 열면 올리브, 버건디, 머스터드, 크림 네 개의 블록이 차례로 떨어져 튕기며 SOYO 로고를 쌓습니다. 이어서 로고가 크게 커지며 네 귀퉁이로 흩어지고 첫 화면이 열립니다. 네 가지 블록은 태양인, 태음인, 소양인, 소음인 네 체질을 뜻합니다. "사람마다 다르다"는 이 한의원의 출발점을 3초 안에 색으로 보여 주는 장면입니다.

첫 화면 아래에는 4가지 체질, 5문항 테스트, 4주 프로그램, 주 1회 원장 체크라는 숫자 네 개를 색 블록 띠로 깔았습니다. 사진 옆에는 '1:1 매주 한 번, 원장 직접 체크' 블록을 붙였습니다. 다이어트 한의원에서 가장 흔한 불만이 "처음에만 원장님을 보고 그다음엔 실장님만 본다"는 것이라, 이 약속을 첫 화면에서 분명히 했습니다.

버튼도 "1분 체질 테스트"를 앞에, "첫 진료 예약"을 뒤에 두었습니다. 다이어트를 고민하는 분이 가장 먼저 해 보고 싶은 것은 예약이 아니라 내 체질이 무엇인지 아는 일이기 때문입니다.

한의원 홈페이지 디자인: 한지와 수묵 대신 패션 매거진

한의원 홈페이지라고 하면 대개 한지 질감, 수묵, 갈색 톤을 떠올립니다. 저희가 만든 담연한의원도 먹 번짐으로 시작했습니다. 하지만 성수에서 다이어트를 알아보는 젊은 직장인에게 그 톤은 '어른들이 가는 한의원'으로 읽히기 쉽습니다. 그래서 소요는 성수의 패션 매거진 같은 에디토리얼 톤으로 방향을 틀었습니다.

색은 사상체질 네 유형에 하나씩 맞춘 올리브, 버건디, 머스터드, 크림 네 가지뿐입니다. 장식 대신 각진 컬러 블록만으로 레이아웃을 짰고, 둥근 버튼 대신 사각 블록 버튼에 두 색 블록이 차례로 밀려 들어오는 효과를 넣었습니다. '하나씩 채워 가는 다이어트'라는 리듬을 사이트 전체의 모양으로 통일한 것입니다. 첫 화면 다음에는 'Eat well, not less.'와 네 체질 이름이 두 줄로 반대 방향으로 흐르는 큰 세리프 마퀴를 두어, 스크롤 속도에 따라 빨라지게 했습니다.

사이트의 중심, 5문항 사상체질 테스트

소요 홈페이지의 한가운데에는 "5문항으로 보는 나의 type." 테스트가 있습니다. '거울 앞에 섰을 때, 내 체형은?', '땀을 흠뻑 흘리고 나면?', '평소 식사 스타일은?', '친구들이 말하는 나는?', '내 몸이 가장 자주 하는 말은?' 다섯 문항에 답할 때마다 진행 블록과 카드 뒷면 패턴이 한 칸씩 채워집니다.

다섯 문항이 끝나면 카드 네 장이 섞인 뒤 차례로 뒤집히고, 내 체질 카드가 커지며 컬러 블록 조각이 터집니다. 그 아래에는 체질별 식단, 운동, 한약 방향이 펼쳐집니다. 예를 들어 소음인 결과에는 닭고기·찹쌀·생강 같은 따뜻한 음식, 땀을 과하게 빼지 않는 근력 운동, 비위를 따뜻하게 해 소화력을 키우는 한약 방향이 나옵니다. 다른 체질 카드를 눌러 비교해 볼 수도 있습니다.

결과 바로 아래에는 "간단 테스트는 참고용입니다. 정확한 체질은 진료실에서 맥진·체형·생활 습관을 함께 보고 판단합니다."라는 문장을 두었습니다. 테스트는 재미로 끝나지 않고 '진료실에서 정확히 확인하고 싶다'는 마음으로 이어질 때 의미가 있습니다. 그래서 테스트 다음 섹션도 "좋은 약재보다 맞는 약재."로 정했습니다. 인삼과 계피는 속이 찬 소음인에게는 힘이 되지만 열이 많은 소양인에게는 부담이 될 수 있다는 설명 주위로, 인삼·계피·대추·구기자 사진 조각이 마우스와 스크롤에 따라 서로 다른 깊이로 떠다닙니다.

4주 프로그램과 원장 소개: '얼마나, 어떻게'를 한눈에

다이어트를 결정하기 직전에 묻는 것은 "얼마나 걸리고, 무엇을 하나요?"입니다. 그래서 "4주, 블록 하나씩 채워 가는 routine." 섹션은 화면이 고정된 채 1~4주 카드가 옆으로 흐르는 가로 스크롤로 만들었습니다. 카드가 들어올 때마다 주차 블록과 상단 진행 블록에 색이 차오릅니다. 1주 체질 진단·리셋, 2주 굶지 않고 바꾸기, 3주 체질별 운동 더하기, 4주 습관으로 남기기. 카드마다 맨 아래에 '원장 직접 체크 1회'를 체크 표시로 달아, 매주 원장님을 만난다는 약속을 네 번 반복했습니다.

대표원장 섹션의 한마디는 "같은 다이어트를 해도 결과가 다른 건 의지가 아니라 체질 때문인 경우가 많아요. 그래서 매주 제가 직접 봅니다."입니다. 그 아래 체중보다 체성분, 식사 기록 피드백, 한약 용량 조절 세 가지로 매주 무엇을 보는지 구체적으로 적었습니다. 이어지는 "땀의 양보다 맞는 움직임." 섹션에서는 체질별로 맞는 운동을 정리해, 진료실 밖에서 할 일까지 그려지게 했습니다.

휴대폰 화면: 테스트와 예약을 엄지 아래에

다이어트 한의원은 퇴근길이나 잠들기 전에 휴대폰으로 찾아보는 경우가 많습니다. 모바일에서는 하단에 '전화'와 '체질 테스트 · 예약' 버튼을 고정해, 어느 섹션에서든 테스트로 바로 갈 수 있게 했습니다. 테스트 문항은 한 손으로 누르기 쉽게 답을 세로로 크게 쌓았고, 4주 프로그램은 손가락으로 옆으로 넘기는 카드로 바꿨습니다. 약재 패럴랙스는 마우스 대신 스크롤에 맞춰 움직이도록 했고, 390px 폭에서 가로 밀림이 없는지 따로 검수했습니다.

검색 세팅, 그리고 실제 한의원에 적용한다면

다이어트 한의원은 "성수 한의원 다이어트", "사상체질 다이어트", "한약 다이어트 요요"처럼 지역과 방법, 걱정을 함께 검색합니다. 그래서 페이지 제목은 "소요한의원 | 사상체질 다이어트 · 성수"로 짧고 분명하게 정하고, 체질 테스트와 4주 프로그램을 설명 문구에 담았습니다. 첫 화면 아래 이미지는 지연 로딩해 효과가 많아도 처음 열리는 속도를 지켰고, 가상 병원이라 검색 제외(noindex)를 걸어 두었습니다.

실제 제작에서는 병원 정보와 진료시간을 구조화 데이터로 넣고 네이버와 구글에 등록합니다. "소음인 다이어트 식단", "태음인 살 빠지는 운동"처럼 체질별로 검색되는 주제로 칼럼 6편을 함께 써서, 테스트 결과에서 칼럼으로, 칼럼에서 예약으로 이어지는 길을 만듭니다. 원장님과 진료실, 체질 차 바 같은 공간은 직접 촬영합니다.

같은 한의원이라도 강점이 다르면 홈페이지는 완전히 달라집니다. 40분 진료를 수묵화로 담은 담연한의원 제작기, 퇴근 후 야간 진료를 밤의 라운지로 그린 청림한의원 제작기와 비교해 보세요.

병원 홈페이지 제작 비용은 330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다. 이후 유지보수 정기권은 월 110만 원이며, 월 마케팅이나 개원 마케팅을 함께 하시면 무료입니다. 우리 한의원 홈페이지가 원장님의 강점을 잘 보여 주고 있는지는 무료 사전 진단으로 먼저 확인해 보세요. 마케터가 직접 보고 답장드립니다.

완성된 홈페이지 직접 둘러보기 ↗

자주 묻는 질문

한의원 홈페이지 제작 비용은 얼마인가요?

330만 원(부가세 포함)이며 직접 촬영, 페이지와 수정 횟수 제한 없음, 검색용 칼럼 6편, 오픈 후 3개월 유지보수가 포함됩니다.

체질 테스트 같은 기능도 우리 한의원에 맞게 만들 수 있나요?

네, 원장님과 문항과 결과 내용을 함께 정하고, 결과에서 예약이나 관련 칼럼으로 자연스럽게 이어지도록 설계합니다.

한의원인데 이렇게 현대적인 디자인이어도 괜찮을까요?

디자인은 원장님의 강점과 찾아오는 환자층에서 정합니다. 젊은 직장인이 많은 지역이라면 에디토리얼 톤이, 깊은 진료를 강조한다면 차분한 전통 톤이 맞을 수 있습니다.

효과가 많으면 휴대폰에서 느리지 않나요?

블록과 패럴랙스 효과는 가벼운 움직임 위주로 만들고 첫 화면 아래 이미지는 지연 로딩해, 휴대폰에서 직접 검수한 뒤 오픈합니다.

프로그램 가격이나 구성이 바뀌면 고쳐 주시나요?

오픈 후 3개월은 무료로 수정해 드리고, 이후에는 유지보수 정기권으로 이어 가거나 마케팅을 함께 하시면 무료로 관리해 드립니다.