헬스케어 앱
제품 UX
사례 연구사례 템플릿 · Lips by Lara
Lips by Lara뷰티 · 웹사이트
서비스
도구
기술 스택
뷰티 · 웹사이트
Lips by Lara
Lara의 미용 클리닉을 위한 웹사이트로, 표현력 있는 시각 디자인, 애니메이션 캐릭터, 시술 빌더를 한데 모았습니다. 방문자는 부위를 살펴보고, 가격을 투명하게 확인하고, Lara와 상담할 계획을 구성할 수 있습니다.
클리닉에 완전한 온라인 경험을 제공합니다
Lara는 다이렉트 메시지로 같은 질문에 반복해서 답하고 있었고, 별도의 문의 없이도 가격을 확인할 수 있기를 원했습니다. 저희는 Lara의 클리닉을 소개하고, 상세한 시술 목록을 이해하기 쉽게 정리하며, 반복되는 답변에 영구적인 자리를 마련하는 웹사이트를 개발했습니다.
저희의 기여
콘텐츠와 웹사이트 구조를 구성하고, 시각 언어를 디자인하고, AI로 생성한 캐릭터와 애니메이션을 만들고, 반응형 사이트와 결제를 구축했습니다. 아트 디렉션, 모션, 시술 선택의 작동 방식을 연결한 작업입니다.
시술 목록을 부위별로 정리하고 캐릭터, 카드, 계획을 하나의 경험으로 디자인했습니다. 이와 함께 Lara가 직접 링크할 수 있는 가격, 준비, 사후 관리, FAQ 전용 페이지를 개발했습니다.
시각적 방향
표현력 있는 세리프 타이포그래피, 부드러운 블러시 배경, 버건디 포인트를 중심으로 시각적 방향을 구축했습니다. 큰 초상이 오프닝 구성을 잡아 주고, 주변에 넉넉한 여백과 세심하게 배치한 시술 카드가 있습니다. 빌더는 처음부터 이 구성의 일부입니다. 패널, 가격, 컨트롤은 같은 시각 언어를 사용하여 웹사이트의 개성을 경험의 실용적인 부분까지 이어 갑니다.
01 / 캐릭터와 모션
움직이는 인터페이스를 위한 캐릭터를 만듭니다.
캐릭터 제작은 외모와 움직임을 모두 개발하는 일이었습니다. 모델과 애니메이션을 생성하고, 일관된 시퀀스를 선택하고, 짧은 동작이 몇 초마다 반복되지 않도록 긴 루프를 구축했습니다.
움직임도 인터페이스와 어우러져야 했습니다. 전환은 루프의 선택된 지점을 중심으로 구성했으며, 시술 카드는 캐릭터의 움직임에 맞춰 해당 부위를 따라갑니다. 이 짧은 발췌 영상은 완성된 장면에서 캐릭터와 카드를 함께 보여 줍니다.
02 / 시술 빌더
부위, 선택, 가격을 하나의 계획에 담습니다.
Lara의 가격표에는 시술 유형별로 정리된 40개가 넘는 항목이 있었습니다. 이를 부위별로 다시 묶어 얼굴이나 몸의 한 부분을 살펴보는 사람이 관련 선택지와 가격을 함께 볼 수 있게 했습니다.
부위를 변경하면 이전 선택을 유지한 채 장면과 시술 목록이 업데이트됩니다. 시술을 추가하면 해당 카드, 선택 상태, 항목 수, 합계가 연결됩니다. 오프닝 프레임에서는 목 시술을 추가해도 얼굴 시술 두 개가 선택된 상태로 유지되며, 세 가지 모두 장바구니에 함께 표시됩니다.
결제를 Lara의 Stripe 계정에 연결하고 다음 단계를 명확히 했습니다. 계획은 대화를 시작하는 것이며, 결제로 예약이 확정되거나 Lara의 진단을 대신하지 않습니다.
03 / 콘텐츠와 안내
반복되는 질문에 Lara가 보낼 수 있는 답변을 마련합니다.
다른 시술자 웹사이트에 공개된 질문을 검토하고, 구조화된 브리프로 Lara의 답변을 수집했습니다. 그 결과 다섯 개 주제에 걸친 50개 질문을 검색할 수 있는 FAQ와 함께 시술 전 준비 및 사후 관리 가이드가 완성되었습니다.
각 답변에는 고유한 링크가 있습니다. Lara는 관련 설명을 메시지로 보낼 수 있고, 방문자는 지난 대화를 뒤지지 않고 다시 찾아볼 수 있습니다. 참고 페이지는 홈페이지와 같은 시각 언어를 사용합니다.
결과
