로고 파일을 직접 재 봤습니다
규정값은 #004E97이지만, 제공받은 PNG에서 가장 많이 쓰인 블루는 #094E96이었습니다. 우리는 파일을 다시 칠하지 않았고, 벡터 원본에서 웹용 파일을 내보낼 때 최종값을 확인하도록 확인 목록에 올렸습니다.
UVDRK 브랜드 웹사이트다시,
처음의 마음으로
녹는 실리프팅의 기술에서 출발한 메디컬 에스테틱 브랜드 UVDRK의 첫 홈페이지를 설계했습니다. 이름과 이야기를 해석하고, 색과 움직임의 규칙을 세우고, 세 가지 시안으로 방향을 검증한 과정을 정리했습니다.
01 Overview
새로 시작하는 회사,
새롭지 않은 기술
UVDRK는 2026년 7월에 설립한 메디컬 에스테틱 브랜드입니다. 회사는 막 문을 열었지만, 브랜드의 뿌리는 Ultra V가 개척해 온 녹는 실리프팅 기술과 그 시작을 함께한 Dr. 권한진의 경험에 있습니다.
그래서 이 홈페이지는 두 가지를 동시에 보여 줘야 했습니다. 오래 검증된 경험에서 오는 신뢰, 그리고 처음으로 돌아가 다시 시작하겠다는 의지입니다.
-
01
신뢰를 과장 없이
울트라콜과 실리프팅, RF 장비, 주입펌프는 모두 의료기기입니다. 효과를 크게 말할수록 오히려 신뢰가 깎이는 분야이므로, 품격은 표현의 크기가 아니라 절제에서 나와야 했습니다.
-
02
두 개의 이야기를 한 이름으로
Ultra V의 헤리티지와 Dr. 권한진의 재도약은 UVDRK라는 이름 하나에 함께 들어 있습니다. 다만 개인의 경력과 새 법인의 연혁이 섞이지 않도록 서술의 경계를 지켜야 했습니다.
-
03
결이 다른 제품을 한 목소리로
한 가닥의 실부터 RF 장비, 스킨부스터, 데일리 코스메틱까지 제품군마다 성격이 다릅니다. 이 제품들을 하나의 톤으로 묶어 줄 시각 규칙이 필요했습니다.
- 23장전달받은 기획안
- 578개제품·브랜드 자료 파일
- 13개실리프팅 제품군
- 5종스킨부스터 라인
- 18개코스메틱 품목
- 3종웹사이트 시안
02 The Name
이름을 먼저 읽었습니다
처음 붙잡은 질문은 ‘이 낯선 다섯 글자를 처음 보는 사람이 어떻게 읽게 할 것인가’였습니다.
-
UV
Ultra V의 헤리티지
녹는 실리프팅이라는 카테고리를 만들어 온 기술과 경험을 이어받는다는 뜻입니다.
-
DR·K
Dr. 권한진, 그리고 다시
녹는 실리프팅의 시작을 함께한 사람이 자신의 이름을 걸고 다시(Re-) 시작한다는 뜻을 담았습니다.
-
UVDRK
The beginning, reimagined.
두 이름이 만나 하나의 시작이 됩니다. 이 사이트의 모든 디자인 결정은 이 문장에서 출발했습니다.
03 Motion Language
브랜드 이야기를
실 한 가닥의 일생으로
기획안의 브랜드 스토리는 다섯 장으로, 핵심 가치는 계승·재도약·확장으로 정리되어 있었습니다. 우리는 이 문장들을 녹는 실이 겪는 네 가지 상태로 번역했습니다.
-
01TWIST · 계승
여러 가닥이 꼬여 하나의 실이 됩니다
Ultra V가 쌓아 온 기술과 경험을 여덟 가닥의 빛으로 그렸습니다. 가닥이 꼬일수록 하나의 단단한 실이 됩니다.
-
02DISSOLVE · 녹는 실
제 역할을 다한 실은 녹아 사라집니다
녹는 실리프팅의 본질을 그대로 움직임으로 옮겼습니다. 사라지는 장면을 끝이 아니라 다음 장면의 시작으로 연출했습니다.
-
03EXPAND · 확장
흩어진 입자는 더 넓은 영역으로 퍼집니다
실리프팅에서 울트라콜, TRIDERM, 스킨부스터, 코스메틱으로 넓어지는 제품군을 입자가 퍼져 나가는 모습으로 표현했습니다.
-
04RETURN · 다시 처음으로
입자는 다시 하나의 원으로 모입니다
원은 출발점이면서 완성된 형태입니다. 1번 시안에서는 이 원 안에서 로고가 나타나며 첫 장면이 끝납니다.
1번 시안의 메인에 쓴 168프레임 모션그래픽입니다. 영상을 틀어 두는 대신 스크롤 위치에 맞춰 한 장씩 그려지므로, 방문자가 이야기의 속도를 정합니다.
04 Color
두 문서가 서로 다른
비율을 말할 때
전달받은 브랜드 가이드 초안은 흰색 70, 네이비 20, 그레이 10을 제안했고, 비주얼 디렉션 문서는 네이비 60, 화이트 27, 실버 9, 골드 4를 기준으로 삼았습니다. 어느 한쪽을 임의로 고르는 대신 두 비율을 모두 화면으로 만들어 비교했습니다.
여백이 넓어 가볍고, 정보가 잘 읽힙니다. 다만 처음 보는 브랜드의 인상은 약해지고, 다른 병원이나 화장품 브랜드와 구분하기 어려워집니다.
깊고 단단한 인상을 줍니다. 대신 긴 글과 표는 어두운 면에서 읽기 어려우므로 밝은 면을 따로 마련해야 합니다.
결론은 장면과 정보를 나누는 것이었습니다. 브랜드의 인상을 만드는 장면은 네이비 위에 두고, 오래 읽어야 하는 소개와 비전은 밝은 면으로 옮겨 숨을 쉬게 했습니다.
지금 보고 계신 이 페이지의 배경은 네이비 0%, 밝은 면 0%입니다.
-
로고 전용
Logo Blue
#004E97RGB 0, 78, 151 제공 로고의 색입니다. 임의로 바꾸지 않습니다. -
로고 보조
Logo Gray
#586164RGB 88, 97, 100 로고 심볼과 글자에 함께 쓰인 회색입니다. -
메인
Navy
#0E1B2BRGB 14, 27, 43 브랜드를 보여 주는 장면의 바탕색입니다. -
배경
Deep Navy
#08121ERGB 8, 18, 30 모션과 사진이 놓이는 가장 깊은 배경입니다. -
보조
Silver
#C9CFD6RGB 201, 207, 214 금속과 빛을 닮은 보조색입니다. -
텍스트
Charcoal
#2B333DRGB 43, 51, 61 밝은 면 위의 본문 글자색입니다. -
포인트
Warm Gold
#B89A64RGB 184, 154, 100 선 한 줄, 점 하나에만 씁니다. -
정보
White
#FFFFFFRGB 255, 255, 255 오래 읽어야 하는 정보가 놓이는 면입니다.
DO
골드는 제목 아래 선 한 줄, 강조할 점 하나에만 씁니다.
DON’T
금색 테두리와 박스를 반복하면 고급스러움보다 장식이 먼저 보입니다.
05 Typography
영문은 로고의 결을,
국문은 읽기 쉬움을 따랐습니다
- UVDRKSemiBold 600 · 워드마크
- MEDICAL DEVICEMedium 500 · 라벨
- ULTRACOLLight 300 · 제품명
다시, 처음의 마음으로
IBM Plex Sans KR Light · 비주얼 디렉션 권장
다시, 처음의 마음으로
Pretendard · 웹 본문
비주얼 디렉션은 영문에 Montserrat를, 국문에 IBM Plex Sans KR을 권하고 Pretendard를 대안으로 두었습니다. 웹에서는 한글 굵기 단계가 넓은 Pretendard를 본문에 쓰고, 2번 시안에서는 화면에 쓰는 글자만 추려 낸 서브셋 웹폰트를 만들어 용량을 줄였습니다.
06 Layout
강한 이미지 하나,
짧은 카피 한두 줄,
비워 두는 여백
- 1강한 이미지
- 1–2줄의 짧은 카피
- 30–40%비워 두는 여백
비주얼 디렉션의 레이아웃 공식은 SNS 게시물용으로 만든 것이었습니다. 우리는 이 공식을 웹의 섹션 단위로 다시 적용했습니다. 한 화면에는 하나의 장면만 두고, 장면을 바꾸는 일은 스크롤에 맡겼습니다.
비주얼 디렉션이 금지한 다섯 가지와 우리의 답
-
금색 테두리와 박스의 반복골드는 제목 아래 선 한 줄과 강조할 점 하나에만 썼습니다.
-
가짜 의료기기 이미지울트라콜 바이알부터 TRIDERM 장비까지 제품은 모두 실제 촬영본을 썼습니다.
-
과한 3D 렌더링, 피부 클로즈업 남발빛과 금속, 유리, 곡선 같은 소재로 분위기를 만들었습니다. 3D는 2번 시안에서 실의 형태에만 시험했습니다.
-
INNOVATION, PRECISION 같은 영단어 나열의미가 있는 문장 하나를 크게 쓰는 쪽을 택했습니다.
-
EST. 198X 같은 지어낸 연도확인된 연혁만 쓰고, 개인의 경력과 법인의 연혁을 나눠 적었습니다.
07 Material
빛, 금속, 유리, 곡선
사진과 그래픽에 쓸 소재를 먼저 정했습니다. 화려한 장식 대신 빛이 닿는 방식과 재질의 차이로 고급스러움을 만들기로 했습니다.
- 금속정밀함을 닮은 곡면입니다. 버튼과 구분선의 실버 톤이 여기서 나왔습니다.
- 유리투명하게 비치는 질감은 스킨부스터 장면의 바탕이 되었습니다.
- 골드 와이어골드는 이렇게 가는 선 하나로만 등장합니다.
- 반투명 판로고와 글자는 사진 위가 아니라 이런 차분한 면 위에 놓습니다.
- 가는 실녹는 실의 기억입니다. 모션그래픽의 첫 장면이 이 선에서 시작합니다.
08 Exploration
한 장면을 위해
그려 본 이미지들
메인 비주얼과 장면 전환에 쓸 이미지를 여러 차례 다시 만들었습니다. 채택한 것도, 걷어 낸 것도 모두 결정의 근거가 되었습니다.
-
01초기안 메인
실버 필라멘트
수백 가닥의 은빛 섬유가 하나의 고리를 이룹니다. 실리프팅의 헤리티지를 은유한 첫 이미지입니다.
-
021번 시안 채택
빛의 실
실리프팅 섹션과 브랜드 스토리의 첫 장을 받치는 배경입니다.
-
031번 시안 채택
실버 커브
브랜드 소개 문단을 받치는 밝은 전환 장면입니다.
-
041번 시안 채택
새벽의 수평선
‘그리고, 다시 시작합니다’ 장면에 쓴 새벽빛입니다.
-
051번 시안 채택
디바이스 스테이지
TRIDERM이 올라서는 무대입니다. 장비는 실제 사진을 올렸습니다.
-
061번 시안 채택
부스터 글라스
스킨부스터의 투명한 질감을 위한 배경입니다.
-
071번 시안 채택
골드 웨이브
이데베논 코스메틱 레일의 바닥 빛입니다. 골드는 빛으로만 남겼습니다.
-
08교체
유리 꽃
디테일이 촘촘하고 날카로워 제품보다 그림이 먼저 보였습니다.
-
09교체
유리 리본
꽃 대신 부드러운 곡선으로 바꿔 본 안입니다. 2번 시안의 그린 톤을 함께 시험했습니다.
-
10제외
목련
따뜻하고 아름다웠지만 의료 브랜드의 절제와는 거리가 있었습니다. 검토 후 실제 제품 사진으로 바꿨습니다.
09 Structure
메뉴와 메인 카드가
같은 말을 하도록
처음 받은 기획안에서는 GNB의 제품 메뉴와 메인의 제품 카드가 서로 다른 기준으로 나뉘어 있었습니다. 방문자가 메뉴에서 본 이름을 메인에서 다시 찾을 수 있도록, 견적을 보낼 때 두 기준을 맞추자고 먼저 제안했습니다. 이후 장비 두 종이 더해지면서 메인 카드 여섯 개와 제품 메뉴 여섯 개가 같은 순서로 정리되었습니다.
UVDRK
-
브랜드스토리
- Brand Story
- Vision & Mission
- Core Value
- History
- CEO
-
제품소개
- 1ULTRACOL
- 2Thread Lifting
- 3TRIDERM
- 4Air Shine
- 5Skin Booster
- 6Cosmetics
-
뉴스·학회
- 보도자료
- 학회일정
- 프로모션
-
Contact
- 대리점 문의
- 스킨부스터 문의
- 데모 신청
- B2B 문의
- 기타 문의
-
Recruit
- 채용 안내
- 모집 포지션
메인 카드
- 1울트라콜
- 2실리프팅
- 3TRIDERM
- 4Air Shine
- 5스킨부스터
- 6코스메틱
13개 제품군을 소재로 찾게 했습니다
실 카탈로그를 대조해 제품군과 소재를 데이터로 정리했습니다. 1번과 2번 시안 모두 소재 필터로 원하는 제품군을 바로 찾을 수 있습니다. 직접 눌러 보세요.
13개 제품군
- MONOPDO · PCL · PLCL
- TORNADOPDO · PCL · PLCL
- DOUBLE TWISTPDO
- SUPER TORNADOPDO
- INCHPDO
- COGPDO · PCL · PLCL
- MOLDING COGPDO
- EMBOSS MOLDPDO
- SUPER EMBOSS MOLDPDO · PCL
- DOUBLE MOLDPDO · PCL
- HIKOPDO · PCL
- OCTO TWISTPDO · PCL
- DOUBLE COGPDO
10 Design Drafts
세 번의 시안,
세 가지 질문
자료를 받은 다음 날, 같은 원고와 같은 제품 데이터로 세 가지 방향을 만들었습니다. 시안마다 하나의 질문을 붙잡고 답을 찾았습니다.
초기 탐색안
Silver Filament가이드를 그대로 옮기면 어떤 모습일까?
비주얼 디렉션의 색과 글꼴을 그대로 적용한 첫 안입니다. 은빛 필라멘트 이미지로 메인을 열고, 브랜드 스토리는 스크롤에 따라 회전하는 링 모션으로, 제품은 가로로 흐르는 컬렉션으로 보여 줬습니다. 이 안의 구조는 이후 2번 시안의 바탕이 되었습니다.
- #08121E
- #F2F1EC
- #C9CFD6
- #B89A64
- Canvas 링 모션
- 가로 스크롤 컬렉션
- TRIDERM 모드 탭
- 문의서 저장
1번 시안
Light Thread브랜드 서사를 한 번의 스크롤로 보여 줄 수 있을까?
168프레임 모션그래픽으로 메인을 열고, 이름의 의미와 여섯 제품군, 다섯 장의 브랜드 스토리를 한 페이지 안에서 차례로 펼쳤습니다. 비주얼 디렉션의 네이비·실버·골드 비율에 가장 충실한 안입니다. 원본 로고는 흰 바탕 위에만 두었습니다.
- #08121E
- #0E1B2B
- #C9CFD6
- #B89A64
- #FFFFFF
- 스크롤 재생 모션그래픽
- 이름 해석 장면
- 13개 제품군 필터
- TRIDERM 무대
- 가로 타임라인
2번 시안
Next Beginning규칙의 경계를 넓히면 무엇이 보일까?
실시간 3D로 그린 크롬 필라멘트가 스크롤에 따라 회전하고 갈라집니다. 색은 깊은 그린과 크림으로 바꿔 보고, 제품 필름 여섯 편과 RF 모드 컨트롤러, 편집 디자인형 연혁을 더했습니다. 가이드가 경계한 3D에 가까이 간 안이므로, 3D는 제품이 아닌 실의 형태에만 썼습니다.
- #10231E
- #1B3A31
- #EEF0E6
- #D7F08A
- #FFFFFF
- WebGL 크롬 조형
- 제품 필름 6편
- RF 모드 컨트롤러
- 편집형 레이아웃
같은 문장, 다른 첫인상
손잡이를 좌우로 움직여 1번 시안과 2번 시안의 첫 화면을 비교해 보세요.
11 Details
작은 장면이
신뢰를 만듭니다
-
THE NAME The beginning, reimagined.
이름 해석
글자가 차례로 빛나며 UV와 DR·K의 뜻을 설명합니다.
-
13개 제품군
소재 필터로 PDO, PCL, PLCL 제품군을 바로 찾습니다.
-
TRIDERM 무대
장비가 무대 위로 올라오고 세 가지 모드가 차례로 나타납니다.
-
RF 모드 컨트롤러
클릭과 스크롤이 같은 모드를 가리키도록 연결했습니다.
-
제품 필름
고른 영상만 내려받고, 화면 밖으로 나가면 재생을 멈춥니다.
-
가로 타임라인
개인의 경력과 2026년 법인 설립을 구분해 보여 줍니다.
12 Devices
어느 화면에서도
같은 브랜드로
320px부터 1440px까지 주요 화면 폭마다 직접 확인했습니다. 높이가 낮은 화면에서는 고정 연출을 풀어 자연스럽게 흐르게 하고, 움직임 줄이기를 켠 방문자에게는 정지 화면으로 같은 내용을 보여 줍니다.
13 Guardrails
브랜드를 지키기 위해
하지 않은 것들
메디컬 에스테틱 브랜드의 홈페이지는 보기 좋은 것만큼 틀리지 않는 것이 중요합니다. 시안 단계에서부터 다음 원칙을 지켰습니다.
아직 정하지 않은 것
- 어두운 배경에 쓸 반전 로고 파일
- 웹폰트 라이선스 확인
- 문의 접수처와 개인정보 동의 문구
- 실리프팅 제품군별 세부 규격표
2번 시안의 어두운 헤더에서는 로고를 흰색으로 바꿔 시험했습니다. 승인된 반전 로고를 받으면 그 파일로 교체합니다.
-
확정되지 않은 제품명은 쓰지 않았습니다
바뀔 예정인 제품명은 확정되기 전까지 지금 쓰는 이름으로 표기했습니다. 이름이 정해지면 데이터 한 곳만 바꾸면 되도록 만들었습니다.
-
확인되지 않은 인증은 표시하지 않았습니다
인증 문구와 배지는 현재 유효한지 확인된 것만 쓰기로 하고, 확인 전인 항목은 화면에서 뺐습니다.
-
자료가 오기 전에는 공개하지 않았습니다
소개 자료가 확정되지 않은 제품은 ‘준비 중’으로 두고 성능 설명을 싣지 않았습니다.
-
개인의 경력과 회사의 역사를 나눴습니다
연혁은 Dr. 권한진의 경력과 2026년 7월 UVDRK 설립을 구분해 서술했습니다.
-
게시물을 지어내지 않았습니다
뉴스와 채용 공고는 실제 글로 채울 자리만 만들었고, 화면 구성을 보여 주는 예시 카드에는 ‘예시 게시물’ 표시를 붙였습니다.
-
제품 이미지는 실제 촬영본만 썼습니다
울트라콜 바이알부터 TRIDERM 장비, 코스메틱까지 모든 제품은 전달받은 촬영본입니다.
-
효능을 크게 말하지 않았습니다
스킨부스터와 코스메틱은 주요 성분만 소개하고, 효능과 기능성 표현은 넣지 않았습니다.
14 Process
문의부터 시안까지
-
첫 문의와 기획 검토
기획안과 레퍼런스를 검토해 일정과 견적을 보냈습니다. 메뉴와 메인 카드의 기준을 맞추자는 제안도 함께 담았습니다.
-
내부 확정과 자료 전달
기획안 23장과 로고 원본, 브랜드 가이드 초안, 비주얼 디렉션 문서, 제품 자료 578개 파일을 받았습니다.
-
자료 분석과 세 가지 시안
두 브랜드 문서의 차이와 확정이 필요한 항목을 정리하고, 초기 탐색안과 1번·2번 시안을 만들었습니다.
-
검토 의견 반영
2번 시안의 라임색 띠를 네이비 전환으로 바꾸고 목련 이미지를 실제 제품 사진으로 교체했습니다. 제품 필름 여섯 편은 하나의 무대에 모았습니다.
-
시안 확정과 개발
확정한 시안을 바탕으로 제품 상세 페이지와 뉴스·문의·채용 관리 기능을 개발하고 오픈합니다.
The beginning, reimagined.
브랜드의 첫 홈페이지는
그 브랜드가 무엇을 지키는지
보여 주는 첫 문서입니다
블루캔버스는 화면을 그리기 전에 원고와 자료를 먼저 읽습니다. 새 브랜드의 첫 홈페이지를 준비하고 계시다면, 지금 가진 자료부터 함께 정리하겠습니다.
- Client
- 주식회사 유브이디알케이
- Brand assets
- 로고, 브랜드 가이드 초안, 비주얼 디렉션: UVDRK 제공
- Website
- 기획·정보 구조, UI 디자인, 모션그래픽, 퍼블리싱: 블루캔버스
- Stack
- HTML · CSS · JavaScript, GSAP, Three.js, Canvas, Vite
