프로젝트 상담 신청 프로젝트 소개로 건너뛰기

최성림유외과의원Dr. Choi’s Breast & Thyroid Clinic

리본에서 나비까지

유방과 갑상선을 보는 병원의 홈페이지를
밤의 필름과 낮의 렌즈, 두 갈래로 다시 그렸습니다.

Client
최성림유외과의원
Scope
홈페이지 리뉴얼 제안
Year
2026
  1. 01 · RIBBON리본 · 유방

    로고에 이미 있는 모양입니다. A안 필름은 새틴 리본이 흘러가다가 핑크리본으로 묶이는 장면에서 시작합니다.

  2. 02 · FAN부채꼴 · 초음파

    초음파 탐촉자가 몸 안을 보는 화면의 모양입니다. 검진도 조직검사도 이 부채꼴 위에서 이루어지기 때문에, 두 시안 모두 조직검사의 과정을 이 모양 안에서 설명합니다.

  3. 03 · BUTTERFLY나비 · 갑상선

    목 앞쪽의 갑상선은 두 엽이 가운데에서 이어진 나비 모양입니다. 로고에 없던 나머지 절반을 이 모양으로 채웠습니다.

01 / OVERVIEW소개

유방과 갑상선을
보는 병원

최성림유외과의원은 분당 정자역 앞에서 유방 검진과 진공보조유방생검술, 유방성형, 갑상선 검진과 고주파 절제술을 하는 외과 의원입니다. 지금 홈페이지는 2014년에 만든 워드프레스 사이트이며, 다섯 묶음 스물여덟 쪽의 메뉴에 병원의 설명을 빼곡하게 담고 있습니다.

이 병원의 홈페이지를 여는 사람은 대개 불안한 마음을 안고 있습니다. 멍울이 만져졌거나, 검진 결과지에 추가 검사가 적혀 있거나, 목에 혹이 있다는 이야기를 들은 사람들입니다. 그래서 같은 내용을 두 가지 온도로 만들었습니다. 불안을 안고 들어오는 밤의 화면과, 결과를 듣고 돌아가는 낮의 화면입니다.

  • 2014

    지금 홈페이지의 저작권 연도워드프레스로 만든 다섯 묶음의 메뉴
  • 28

    지금 메뉴의 페이지병원소개 9 · 유방·검진 5 · 유방성형 8 · 갑상선·고주파 3 · 커뮤니티 3
  • 2

    두 가지 온도의 시안밤의 리본 모션 필름 · 낮의 렌즈 & 블룸
  • 722

    스크롤 필름의 프레임A안 리본 240 · B안 첫 화면 241 · 목련 241
  1. 2014
    지금의 홈페이지NOW

    다섯 묶음 스물여덟 쪽의 워드프레스 사이트입니다. 첫 화면의 슬라이드 세 장은 모두 같은 문장을 씁니다.

  2. 2026.11
    A안 · 리본 모션 필름ROUND A

    어두운 자두색 배경에서 리본이 핑크리본과 초음파의 부채꼴을 거쳐 나비 모양 갑상선이 되는 필름으로 열두 장면을 이었습니다.

  3. 2026.11
    B안 · 렌즈 & 블룸ROUND B

    밝은 진주빛 배경에서 창가의 한 사람에게 다가가는 필름과 목련이 피는 필름으로 열한 장면을 이었습니다.

  4. 2026.11
    첫 화면 다시 만들기

    B안의 첫 화면을 글자를 확대하는 렌즈 그래픽에서 사람에게 다가가는 필름으로 바꿨습니다.

  5. 2026.11
    이 기록

    로고를 다시 읽고, 환자가 기다리는 시간을 그리고, 2014년의 문장을 고쳐 쓴 과정을 정리했습니다.

02 / THE MARK로고 읽기

U에 매인
리본

지금 로고는 「최성림 +U 외과」로 읽힙니다. 이름 한가운데의 「유」를 굵은 마젠타 U로 쓰고, 그 왼쪽 기둥에 핑크리본을 묶었습니다.

  1. 01 · U글자 U

    유방의 「유(乳)」를 라틴 문자 U로 썼습니다. U 안쪽의 빈 곳에는 한글 「유」를 작게 적어, 소리와 뜻을 함께 보여 줍니다.

  2. 02 · RIBBON핑크리본

    리본은 U의 왼쪽 기둥을 감고 지나갑니다. 한 가닥은 기둥 앞을 비스듬히 지나고, 다른 가닥은 기둥 뒤로 돌아 아래로 내려옵니다.

  3. 03 · PLUS「+」

    가로로 뻗은 꼬리와 아래로 내려온 가닥이 십자처럼 겹쳐서, 마크 전체가 「+U」로 읽힙니다.

  4. 04 · THYROID비어 있는 자리

    영문 이름은 Breast & Thyroid Clinic인데, 마크에는 갑상선을 뜻하는 모양이 없습니다. 두 시안은 이 빈자리를 나비로 채웠습니다.

  • U#E8517C
  • 리본#F59DAB
  • 로고 글자#AD6491

마크는 지금 로고 이미지(424 × 111)를 참고해 해설을 위해 다시 그렸고, 색은 로고 이미지에서 잰 값입니다.

03 / SHAPES리본 · 부채꼴 · 나비

세 가지 모양으로
말하기

이 병원의 진료는 대부분 보는 일에서 시작합니다. 유방촬영과 초음파로 보고, 필요하면 초음파를 보면서 조직을 얻습니다. 그래서 두 시안은 병원을 설명하는 그림을 로고의 리본, 초음파 화면의 부채꼴, 갑상선의 나비라는 세 가지 모양으로 정했습니다.

  1. 01 · RIBBON리본 · 유방

    로고에 이미 있는 모양입니다. A안 필름은 새틴 리본이 흘러가다가 핑크리본으로 묶이는 장면에서 시작합니다.

  2. 02 · FAN부채꼴 · 초음파

    초음파 탐촉자가 몸 안을 보는 화면의 모양입니다. 검진도 조직검사도 이 부채꼴 위에서 이루어지기 때문에, 두 시안 모두 조직검사의 과정을 이 모양 안에서 설명합니다.

  3. 03 · BUTTERFLY나비 · 갑상선

    목 앞쪽의 갑상선은 두 엽이 가운데에서 이어진 나비 모양입니다. 로고에 없던 나머지 절반을 이 모양으로 채웠습니다.

  • A안 · 밤첫 화면 필름: 흐르는 새틴 리본
  • B안 · 낮진료 과목: 분홍 실크 위의 진주
  • A안 · 밤조직검사: 부채꼴 안의 초음파 그림
  • B안 · 낮조직검사: 네 단계의 다이얼
  • A안 · 밤고주파 절제술: 나비 모양 갑상선
  • B안 · 낮진료 과목: 빛이 굴절되는 유리 나비
04 / THE WAIT기다리는 시간

결과를 기다리는
며칠

환자가 이 병원을 처음 알아본 날부터 결과 전화를 받는 날까지를 일곱 순간으로 나누고, 순간마다 홈페이지가 해야 할 일을 정했습니다.

마음이 가장 높이 올라가는 때는 검사를 마친 뒤 결과를 기다리는 4~5일입니다. 두 시안은 이 며칠을 따로 한 장면으로 만들었습니다.

  1. 01 알아챈 날

    멍울이 만져지거나, 검진 결과지에 추가 검사가 필요하다고 적혀 있습니다.

    홈페이지가 하는 일첫 화면에서 전화 예약을 바로 찾을 수 있게 하고, 「이런 변화가 있다면」 체크 항목으로 진료가 필요한지 가늠하게 합니다.

  2. 02 예약 전화

    어디로 가야 하는지, 오늘 갈 수 있는지부터 궁금합니다.

    홈페이지가 하는 일전화 예약 버튼을 화면 위와 아래에 고정하고, 진료 시간과 지금 진료 중인지를 함께 보여 줍니다.

  3. 03 검사 당일

    유방촬영과 유방초음파를 같은 날 받습니다.

    홈페이지가 하는 일두 검사를 함께 하는 이유인 치밀유방 이야기를 진료 과목의 첫 문장에 적었습니다.

  4. 04 조직검사

    필요하면 초음파를 보면서 바로 조직을 얻습니다.

    홈페이지가 하는 일진공보조유방생검술의 네 단계를 그림으로 미리 보여 주고, 「작은 절개 한 곳 · 당일 귀가」를 먼저 적었습니다.

  5. 05 기다리는 4~5일

    조직검사 결과가 나오기까지 보통 4~5일이 걸립니다. 가장 길게 느껴지는 시간입니다.

    홈페이지가 하는 일「결과를 기다리는 며칠도 혼자 두지 않습니다」라는 문장으로 장면 하나를 만들고, 결과가 나오는 대로 전화로 알린다는 안내를 붙였습니다.

  6. 06 결과 전화

    결과를 듣고, 같은 원장과 다음 일을 정합니다.

    홈페이지가 하는 일「진료는 한 의사가 끝까지」를 약속 문장으로 두고, 상급병원 치료가 필요할 때의 연계도 함께 적었습니다.

  7. 07 그다음

    치료와 수술 후 관리, 그리고 정기 검진이 이어집니다.

    홈페이지가 하는 일수술실의 안전 장치와 장비를 보여 주고, 「불안한 마음으로 오셨다가, 안심하고 돌아가시도록」이라는 문장으로 밤의 화면을 아침으로 바꿉니다.

마음의 높이는 설명을 위한 그림이며 잰 값이 아닙니다. 조직검사 결과까지 걸리는 기간은 병원의 안내를 옮겼습니다.

불안한 마음으로 오셨다가,
안심하고 돌아가시도록

A안의 새벽 커튼 장면에 쓴 문장입니다. 이 기록도 여기서부터 낮의 배경으로 넘어갑니다.

05 / WORDS문장 고쳐 쓰기

약속하지 않고
안심시키는 문장

병원의 문장은 듣는 사람이 불안할 때 더 크게 들립니다. 「완벽하게」는 기대를 키우고, 「태워서 죽인」은 두려움을 키웁니다. 의료광고에서도 치료 효과를 보장하거나 다른 치료와 견주는 표현은 쓰지 않아야 합니다.

그래서 2014년의 문장을 하나씩 다시 읽으며, 결과를 약속하는 표현은 과정을 설명하는 문장으로, 무섭게 들리는 표현은 눈에 보이는 사실로 바꿨습니다.

  1. 2014년 홈페이지첫 화면 슬라이드

    유방과 갑상선에 대한 암 진단 및 치료 그리고 유방성형에 관한 모든 것
    1. 1할 수 있는 일을 모두 약속하는 표현입니다. 「검사부터 치료까지」처럼 실제로 하는 범위를 적었습니다.

    시안의 문장

    A안유방과 갑상선, 검사부터 치료까지 한 곳에서

    B안유방과 갑상선을 가까이, 자세히, 끝까지.

  2. 2014년 홈페이지진공보조유방생검술 페이지

    … 칼을 대는 외과적 수술이나 통증 없이 부분마취로 완벽하게 얻을 수 있을 뿐만 아니라 … 간단히 완전 제거할 수 있는 시술방법입니다.
    1. 1느끼는 정도는 사람마다 다릅니다. 「부분 마취 후 작은 절개」처럼 하는 일을 적었습니다.
    2. 2결과를 보장하는 표현은 쓰지 않습니다.
    3. 3시술의 무게를 가볍게 만듭니다. 「작은 절개 한 곳」처럼 보이는 사실로 바꿨습니다.

    시안의 문장

    A안 · B안작은 절개 한 곳으로, 당일 귀가합니다

  3. 2014년 홈페이지고주파 절제술 페이지

    하지만 고주파 열로 태워서 죽인 갑상선조직은 남겨 놓고 나오므로 …
    1. 1사실이어도 무섭게 들리는 표현입니다. 결과를 기다리는 사람에게는 과정이 먼저입니다.

    시안의 문장

    B안피부 절개 없이, 초음파를 보면서 치료합니다

  4. 2014년 홈페이지고주파 절제술의 장점

    흉터가 남지 않습니다. 수술과는 달리 부작용이 거의 없습니다.
    1. 1단정하는 대신 경과를 「예시」로 보여 줍니다.
    2. 2다른 치료와 견주는 표현은 쓰지 않습니다.

    시안의 문장

    A안 · B안경과는 사람마다 다를 수 있습니다. 갑상선암은 수술로 치료하는 것이 원칙입니다.

  5. 2014년 홈페이지유방성형 소개

    … 여러분의 미적 아름다움에 대한 고민까지도 해결해드리겠습니다.
    1. 1결과를 약속하는 표현입니다. 무엇을 근거로 계획하는지를 적었습니다.

    시안의 문장

    B안유방 수술의 경험으로, 모양에 대한 고민까지

두 시안이 함께 지킨 여섯 가지

  • 01가장 · 최고 · 완벽 같은 표현을 쓰지 않습니다

    결과를 보장하는 표현 대신 과정과 기간을 적습니다.

  • 02통증 · 흉터 · 부작용을 단정하지 않습니다

    느끼는 정도는 사람마다 다르므로 「부분 마취 후」, 「봉합 없이」처럼 실제로 하는 일을 적습니다.

  • 03후기와 전후 사진을 첫 페이지에 두지 않습니다

    지금 사이트의 진료후기 게시판은 시안의 첫 페이지로 가져오지 않았습니다.

  • 04경과는 「예시」로 보여 줍니다

    고주파 절제술 뒤의 변화에는 「시술 후 경과 예시」라는 이름을 붙이고, 사람마다 다를 수 있다는 문장을 함께 두었습니다.

  • 05원칙을 함께 적습니다

    갑상선암은 수술로 치료하는 것이 원칙이라는 문장을 고주파 설명 바로 아래에 두었습니다.

  • 06시술 장면 대신 그림으로 보여 줍니다

    실제 시술 사진 대신 초음파 화면을 닮은 그림과 다이얼로 과정을 설명합니다.

2014년 문장은 지금 홈페이지의 첫 화면과 진료 페이지에서 옮겼고(2026년 11월 2일 확인), 띄어쓰기만 고쳤습니다.

06 / COLOR분홍의 두 온도 · 글꼴

같은 분홍,
두 가지 온도

로고의 U는 마젠타 #E8517C이고, 대기 라운지의 벨벳 소파는 산호빛 빨강입니다. 이 분홍을 그대로 옮기면 흰 배경에서는 큰 글자에만 쓸 수 있고, 어두운 배경에서는 빛이 약해 보입니다.

그래서 A안은 밤에 맞춰 분홍을 밝혔고, B안은 낮에 맞춰 분홍을 가라앉혔습니다.

  • U#E8517C로고의 U
  • 리본#F59DAB로고의 핑크리본
  • 로고 글자#AD6491최성림 · 외과 글자
  • 대기 라운지#D94440대기 라운지의 벨벳 소파

같은 문장을 두 배경에 올려 보았습니다.

A안 · 밤의 배경 #12090F

가까이, 자세히, 끝까지

조직검사 결과는 보통 4~5일 뒤에 나옵니다.

Rose #FF6F98
7.44:1작은 글자까지

B안 · 낮의 배경 #F6F2EE

가까이, 자세히, 끝까지

조직검사 결과는 보통 4~5일 뒤에 나옵니다.

Rose Deep #A8235A
6.17:1본문 가능

두 시안 모두 강조색으로 쓴 분홍은 화면의 0.5%가 되지 않습니다. 넓은 영역은 배경과 사진 · 필름이 맡고, 분홍은 버튼과 강조하는 글자에만 씁니다.

A안 · 밤의 팔레트

  • 밤의 배경 · 겹47.1%
  • 새벽 이후의 밝은 배경24.8%
  • 사진 · 필름21.6%
  • 글자색6.2%
  • 분홍 강조0.3%
  • Night#12090F밤 장면의 배경
  • Plum#2B1322카드 · 장면의 겹
  • Rose#FF6F98밤의 강조 · 버튼
  • Rose Light#FFA6BF필름의 빛 · 보조 강조
  • Ink#F7EEF2밤의 글자
  • Dawn#FBF3F6새벽 이후의 밝은 배경

B안 · 낮의 팔레트

  • 진주 · 블러시 배경64.5%
  • 사진 · 필름20.6%
  • 어두운 장면13.4%
  • 글자색1.0%
  • 분홍 · 청록 강조0.4%
  • Pearl#F6F2EE낮 장면의 배경
  • Blush#F6E2E8목련 · 패널의 겹
  • Ink#1C1530낮의 글자
  • Rose#CF3570버튼 · 큰 글자 강조
  • Rose Deep#A8235A작은 글자의 강조
  • Aqua#8FDED3갑상선 · 장비 장의 초음파 빛
글자와 배경의 명도 대비
조합견본대비쓰임
A안Ink / Night가까이 4~5일17.23:1작은 글자까지
A안Rose / Night가까이 4~5일7.44:1작은 글자까지
A안로고 U / Night가까이 4~5일5.50:1본문 가능
B안Ink / Pearl가까이 4~5일15.72:1작은 글자까지
B안Rose Deep / Pearl가까이 4~5일6.17:1본문 가능
B안Rose / Pearl가까이 4~5일4.28:1큰 글자만
B안로고 U / Pearl가까이 4~5일3.19:1큰 글자만
B안흰 글자 / Rose 버튼가까이 4~5일4.77:1본문 가능
  • Pretendard

    가까이, 자세히, 끝까지

    두 시안의 한글 제목과 본문

  • Pretendard 800

    35세 · 4~5일 · 200m

    큰 숫자와 약속 문장

  • JetBrains Mono

    FOCUS ×1.0 · SCAN 100%

    B안의 초점 · 스캔 표시

대비는 WCAG 2.1 기준으로 계산했습니다(4.5:1 이상 본문, 3:1 이상 큰 글자). 화면 속 비율은 두 시안의 장면 화면에서 배경 · 사진 · 강조 · 글자에 가까운 색의 화소를 세어 낸 값입니다.

07 / PHOTO몸 대신 결

몸을 보여 주지 않고
결로 말하기

유방과 목을 다루는 병원의 사진은 조심스러워야 합니다. 두 시안은 맨몸을 보여 주는 대신, A안은 손짓으로 말하고 B안은 재질로 말하게 했습니다.

A안의 사람은 가슴과 목에 손을 얹고, B안의 사물은 진주와 새틴과 유리 나비입니다. 같은 세 진료를 사람의 손짓과 사물의 결로 나눠 보면 두 시안의 온도 차이가 분명해집니다.

유방·검진A안은 스스로 살피는 손을, B안은 둥글고 귀한 진주를 골랐습니다.
A안 · 아이보리 블라우스 위에 손을 얹은 사람A안 · 아이보리 블라우스 위에 손을 얹은 사람
B안 · 분홍 실크 위의 진주B안 · 분홍 실크 위의 진주
유방성형A안은 실루엣의 선을, B안은 새틴의 곡선을 보여 줍니다.
A안 · 실크 드레스를 입은 뒷모습A안 · 실크 드레스를 입은 뒷모습
B안 · 부드러운 곡선을 이루는 새틴B안 · 부드러운 곡선을 이루는 새틴
갑상선A안은 목에 닿은 손끝을, B안은 갑상선의 모양을 닮은 나비를 썼습니다.
A안 · 목에 손끝을 댄 옆모습A안 · 목에 손끝을 댄 옆모습
B안 · 빛이 굴절되는 유리 나비B안 · 빛이 굴절되는 유리 나비

병원 공간과 장비는 지금 홈페이지의 실제 사진을, 진료 과목과 장면의 사진은 시안을 위해 연출한 사진을 썼습니다. 실제 환자나 의료진의 사진은 쓰지 않았습니다.

08 / STRUCTURE스물여덟 쪽에서 한 줄기로

스물여덟 쪽을
한 줄기로

지금 사이트는 병원소개 · 유방·검진 · 유방성형 · 갑상선·고주파 · 커뮤니티의 다섯 묶음, 스물여덟 쪽으로 나뉘어 있습니다. 처음 온 사람이 알아야 할 것은 그중 일부입니다.

두 시안은 첫 페이지를 한 줄기의 긴 스크롤로 만들고, 자세한 설명은 지금의 하위 페이지로 이어지게 했습니다. 진료 과목마다 붙인 작은 칩이 그 입구입니다.

지금의 메뉴 다섯 묶음 · 28쪽

병원소개 9
  • 인사말
  • 의료진
  • 파트너
  • 진료안내
  • 의료장비
  • 오시는길
  • 섬기는기관
  • 병원둘러보기
  • 서류발급안내
유방·검진 클리닉 5
  • 유방검진
  • 흔한질환
  • 진공보조유방생검술
  • 미세석회 조직검사
  • 모유수유
유방성형클리닉 8
  • 안심성형시스템
  • 유방확대
  • 유방확대 재수술
  • 유방축소
  • 처진유방
  • 여성형유방
  • 부유방
  • 함몰유두
갑상선·고주파 클리닉 3
  • 흔한 갑상선 질환
  • 갑상선 검진
  • 고주파 절제술
진료상담·커뮤니티 3
  • 공지사항
  • 진료후기
  • 의학소식/칼럼

진료후기 게시판은 시안의 첫 페이지로 가져오지 않았습니다.

A안 · 열두 장면 31,166px

  1. 리본 필름5,580
  2. 병원 소개904
  3. 진료 과목3,761
  4. 진공보조유방생검술3,780
  5. 갑상선 고주파 절제술3,960
  6. 수술실의 안전 장치990
  7. 진단과 치료 장비568
  8. 새벽 커튼2,520
  9. 의료진1,843
  10. 병원 둘러보기4,862
  11. 자가 확인 · 휴진 안내1,027
  12. 오시는 길1,096
  13. 푸터274

B안 · 열한 장면 30,456px

  1. 가까이 · 자세히 · 끝까지4,500
  2. 병원의 약속1,061
  3. 진료 과목3,150
  4. 진공보조유방생검술3,060
  5. 갑상선 고주파 절제술3,510
  6. 목련 필름3,240
  7. 장비 링3,407
  8. 의료진1,074
  9. 병원 둘러보기4,680
  10. 자가 확인964
  11. 오시는 길1,284
  12. 푸터527

막대의 길이는 1440 × 900 화면에서 잰 장면의 높이에 비례합니다. 화면을 고정한 채 필름을 넘기거나 패널을 펼치는 구간까지 포함한 길이입니다.

09 / ROUND AA안 · 밤의 필름
A안 · 리본 모션 필름

Ribbon Motion Film유방과 갑상선, 검사부터 치료까지 한 곳에서

어두운 자두색 배경에서 리본 필름 240프레임으로 시작해 열두 장면을 잇는 시안입니다. 밤의 장면이 이어지다가 새벽 커튼에서 밝은 배경으로 넘어가고, 의료진부터 오시는 길까지는 낮의 화면으로 읽힙니다.

  • 리본이 핑크리본과 부채꼴을 거쳐 나비가 되는 필름이 스크롤에 맞춰 흐릅니다
  • 진료 과목 카드 세 장이 같은 자리에 차례로 쌓입니다
  • 초음파 그림 안에서 바늘이 병변에 다가가며 네 단계를 보여 줍니다
  • 심전도 선이 스크롤을 따라 그려지며 수술실의 안전 장치를 소개합니다
나이트 · 플럼 · 로즈 · 로즈 라이트 · 던
  1. 리본 필름 위의 첫 문장

    필름이 흐르는 동안 「35세부터는 정기 검진이 필요합니다」 같은 문장 세 개가 차례로 떠오릅니다.

  2. 쌓이는 진료 과목

    유방·검진, 유방성형, 갑상선·고주파 카드가 같은 자리에 쌓이고, 하위 페이지로 바로 가는 칩을 붙였습니다.

  3. 부채꼴 안의 조직검사

    초음파 그림 안에서 바늘이 병변에 다가가고, 왼쪽의 네 단계가 그림과 함께 넘어갑니다.

  4. 줄어드는 결절

    나비 모양 갑상선 안의 결절이 고주파 치료 뒤 줄어드는 과정을 시술 후 경과 예시와 함께 그립니다.

  5. 그려지는 심전도

    스크롤을 따라 심전도 선이 그려지고, 생체 신호 감시부터 전기수술기까지 네 가지 장치가 이어집니다.

  6. 새벽 커튼

    「불안한 마음으로 오셨다가, 안심하고 돌아가시도록」이라는 문장과 함께 화면이 밝아지며 의료진 구간으로 넘어갑니다.

녹화 화면의 원장 사진은 진료실 정물로 바꿨고, 전화번호 · 주소 · 사업자 정보는 다른 글자로 바꾸거나 가렸습니다.

10 / ROUND BB안 · 낮의 렌즈
B안 · 렌즈 & 블룸

Lens & Bloom유방과 갑상선을 가까이, 자세히, 끝까지.

밝은 진주빛 배경에서 창가의 한 사람에게 다가가는 필름으로 시작해 열한 장면을 잇는 시안입니다. 갑상선과 장비 구간에서만 어두운 배경으로 내려가 초음파 화면의 청록을 씁니다.

  • 첫 화면 필름 241프레임이 가까이 · 자세히 · 끝까지 세 구간으로 나뉩니다
  • 진주 · 새틴 · 유리 나비 패널이 스크롤에 따라 차례로 펼쳐집니다
  • 조직검사 네 단계가 다이얼처럼 돌아갑니다
  • 목련 필름 위로 결과를 기다리는 며칠의 문장이 지나갑니다
펄 · 블러시 · 잉크 · 로즈 · 아쿠아
  1. 가까이 · 자세히 · 끝까지

    카메라가 창가의 사람에게 다가가는 동안 세 낱말이 차례로 다가오고, 초점이 맞고, 화면 끝까지 선을 긋습니다.

  2. 약속과 숫자

    「검사는 당일에, 진료는 한 의사가 끝까지」라는 약속 아래에 35세 · 4~5일 · 200m · 2시간을 숫자로 적었습니다.

  3. 펼쳐지는 세 패널

    진주 · 새틴 · 유리 나비 패널이 스크롤에 따라 하나씩 넓어지며 진료 과목을 소개합니다.

  4. 돌아가는 다이얼

    조직검사 네 단계를 다이얼 둘레에 놓고, 스크롤에 따라 한 칸씩 돌립니다.

  5. 스캔이 지나간 목선

    빛줄기가 목선을 지나가면 화면이 초음파 영상처럼 바뀌고, 결절이 줄어드는 경과 예시가 이어집니다.

  6. 목련 필름

    봉오리가 피는 동안 「결과를 기다리는 며칠도 혼자 두지 않습니다」라는 문장이 지나가고, 꽃이 활짝 피면 「다시 피어날 일상을 위해」로 끝납니다.

첫 화면을
다시 만든 이유

B안의 첫 화면은 처음에 유리 렌즈가 「가까이 · 자세히 · 끝까지」를 확대하는 그래픽이었습니다. 화면은 깨끗했지만 사람이 보이지 않아 마음이 따라오지 않았습니다.

그래서 창가의 한 사람에게 다가가는 241프레임의 필름으로 다시 만들었습니다. 넓은 방에서 옆모습으로, 목에 얹은 손끝으로, 커튼 너머의 빛으로 다가갑니다.

가까이, 자세히, 끝까지.

처음 · 렌즈 그래픽처음의 렌즈 그래픽을 다시 그린 견본입니다. 마우스를 올리면 렌즈가 따라옵니다.
B안 첫 화면 필름의 한 장면: 창가에 선 사람의 옆모습

넓은 방에서 옆모습으로, 목에 얹은 손끝으로, 커튼 너머의 빛으로 다가갑니다. B안 첫 화면 필름 241프레임에서 81프레임을 골랐습니다.

다시 · 사람에게 다가가는 필름

녹화 화면의 원장 사진은 진료실 정물로 바꿨고, 전화번호 · 주소 · 사업자 정보는 다른 글자로 바꾸거나 가렸습니다.

11 / COMPARE같은 내용, 두 온도

같은 원고를
밤과 낮으로

두 시안은 같은 원고로 만들었습니다. 같은 장면을 겹쳐 놓고 가운데 손잡이를 끌면 밤의 화면과 낮의 화면이 어떻게 다른지 볼 수 있습니다.

B안 첫 화면
A안 첫 화면

손 안의 화면

두 시안은 세로 화면용 필름을 따로 만들었습니다. 리본과 사람은 화면 위쪽에, 글은 아래쪽에 두어 엄지가 닿는 자리에서 읽히게 했습니다.

  • A안 첫 화면
  • A안 진료 과목
  • A안 조직검사
  • A안 고주파 절제술
  • A안 새벽 커튼
  • A안 의료진
  • B안 첫 화면
  • B안 병원의 약속
  • B안 진료 과목
  • B안 조직검사 다이얼
  • B안 갑상선 스캔
  • B안 목련 필름
12 / DETAIL손에 닿는 디테일

작은 화면에서
먼저 답하기

병원 홈페이지에서 가장 많이 찾는 것은 진료 시간과 위치, 그리고 지금 가도 되는지입니다. 시안에 넣은 작은 장치 세 가지를 이곳에서 직접 움직여 볼 수 있습니다.

01

지금 진료 중일까

요일과 시각을 고르면 「오시는 길」에 들어가는 안내 문장이 바뀝니다.

월요일
화요일
수요일
목요일
금요일
토요일
일요일

지금 진료 중입니다 · 오후 1시부터 점심시간 (공휴일 휴진)

평일 09:00~18:00(점심 13:00~14:00), 토요일 09:00~13:00 기준입니다. 금요일 저녁에는 토요일 진료를 다음 진료로 안내합니다.

02

이런 변화가 있다면

해당하는 항목을 눌러 보세요. 두 시안의 자가 확인과 같은 문장입니다.

해당하는 항목을 눌러 확인해 보세요.

초기 유방암은 대체로 증상이 없습니다. 이 체크리스트는 진단을 대신하지 않습니다.

03

조직검사 네 단계

B안의 다이얼을 단계 버튼으로 돌려 볼 수 있게 옮겼습니다.

  1. 초음파 영상을 실시간으로 보면서 병변의 위치와 크기를 확인합니다.

  2. 피부와 유방 조직에 국소마취를 충분히 한 뒤, 작은 절개로 바늘을 넣습니다.

  3. 진공으로 조직을 바늘 안으로 끌어들여 채취하고, 양성 혹은 이때 함께 제거하기도 합니다.

  4. 절개 부위는 봉합하지 않고 특수 반창고를 붙이며, 압박 지혈 후 당일 귀가합니다.

조직검사 결과는 보통 4~5일 뒤에 나오며, 확인되는 대로 전화로 알려 드립니다.

13 / RETROSPECT돌아보며

로고에 없던
절반을 찾아서

두 갈래를 제안했고, 최종 선택으로 이어지지는 않았습니다. 그래도 이 작업에서 로고에 매인 리본을 다시 읽었고, 비어 있던 갑상선의 자리를 나비로 채웠고, 결과를 기다리는 며칠을 화면의 한 장면으로 만들었습니다.

  1. A안 · 밤리본 모션 필름

    어두운 자두색 배경 · 열두 장면 · 필름 240프레임

  2. B안 · 낮렌즈 & 블룸

    진주빛 배경 · 열한 장면 · 필름 241 · 241프레임

  3. 이 기록리본에서 나비까지

    로고 읽기 · 기다리는 시간 · 문장 고쳐 쓰기

  • 01로고에 없는 절반 찾기

    이름에는 Thyroid가 있는데 마크에는 리본만 있었습니다. 나비를 더해서 두 진료가 같은 무게로 보이게 했습니다.

  • 02기다리는 시간을 설계하기

    홈페이지는 진료 전에만 읽히지 않습니다. 결과를 기다리는 며칠 동안 다시 열어 보는 화면이라는 점을 먼저 생각했습니다.

  • 03그래픽보다 사람

    렌즈 그래픽은 깨끗했지만 마음이 따라오지 않았습니다. 사람에게 다가가는 필름으로 바꾸고, 연출된 장면 사이에 기본 가로 스크롤 같은 날것의 화면이 드러나지 않게 다듬었습니다.

14 / CREDITSDR. CHOI’S CLINIC · BLUECANVAS WORKS

BREAST & THYROID CLINIC HOMEPAGE RENEWAL

리본에서
나비까지

최성림유외과의원 · 시안 2종 · 로고 읽기 · 문장 기준

ItemDetail
Client최성림유외과의원 · 분당의 유방·갑상선 외과 의원
Scope홈페이지 리뉴얼 제안 · 로고 읽기 · 문장 기준
Period2026년 11월
Round A리본 모션 필름(어두운 자두색, 열두 장면, 스크롤 필름 240프레임)
Round B렌즈 & 블룸(밝은 진주빛, 열한 장면, 첫 화면 필름 241 · 목련 241프레임)
Added로고 읽기 · 세 가지 모양 · 기다리는 시간 지도 · 문장 고쳐 쓰기
Identity지금의 로고 · Night #12090F · Rose #FF6F98 · Pearl #F6F2EE · Rose Deep #A8235A
ToolsGSAP · ScrollTrigger · Lenis · Canvas · Three.js
TypefacePretendard · JetBrains Mono
Studio블루캔버스

Goal불안한 마음으로 여는 첫 화면이 안심으로 끝나도록

FROM RIBBON TO BUTTERFLY

불안한 마음으로 여는 첫 화면을
함께 설계하겠습니다

로고의 리본 한 가닥과 환자의 며칠에서 출발해,
믿고 전화할 수 있는 병원 홈페이지를 만들겠습니다.

다른 프로젝트

    Contact

    막연한 아이디어도 괜찮습니다.
    프로젝트를 함께 정리해 보세요

    현재 상황과 목표를 남겨 주시면 가능한 작업 범위와 진행 방식, 예상 견적을 정리해 안내드립니다.

    질문 4개 · 약 2분

    작업 범위

    어떤 작업을 함께 하면 좋을까요?

    여러 개 선택할 수 있습니다. 아직 정하지 못했다면 ‘기타’를 눌러 주세요.

    예산

    생각하시는 예산 범위는 어느 정도인가요?

    범위만 알려주셔도 제안 구성에 큰 도움이 됩니다.

    프로젝트 설명

    어떤 상황인지 들려주세요.

    다듬어지지 않아도 괜찮습니다. 아래 항목을 누르면 작성 틀이 채워집니다.

    0

    RFP, 참고 문서 등을 최대 2개까지 업로드할 수 있습니다. 지원 형식: PDF, PPT, Word, Excel, JPG, PNG, ZIP

    연락처

    어디로 회신드릴까요?

    작업 범위 · 예산 · 프로젝트 설명 · 연락처를 채워 주세요.