시간을 만드는 브랜드, 그 무게감을 웹에 옮기는 일
CHRONOS는 전통 장인 정신으로 한 점 한 점 수작업 시계를 제작하는 프리미엄 브랜드입니다. 클라이언트의 요청은 명확했습니다. "우리 시계를 처음 손에 올렸을 때의 무게감, 그 감각을 웹사이트에서도 느끼게 해달라." 화려한 기능보다 브랜드가 가진 시간의 깊이를 전달하는 것이 이번 프로젝트의 핵심 과제였습니다.
다크 톤과 세리프 서체로 만든 럭셔리 무드
CHRONOS의 정체성은 절제된 고급스러움입니다. 배경은 거의 순수한 블랙(#0a0a0a)을 기본으로 하고, 골드 톤 액센트(#b8926a)를 포인트로 사용했습니다. 본문 텍스트는 약간 따뜻한 아이보리(#e8e4de)로 설정해 차가운 느낌 없이 고급스러운 가독성을 확보했습니다.
서체 선택에도 공을 들였습니다. 제목에는 Cormorant Garamond 이탤릭을, 본문에는 Outfit과 Noto Sans KR을 조합했습니다. 세리프 이탤릭이 주는 우아한 필기체 느낌이 시계 브랜드의 장인 정신과 자연스럽게 어울렸고, 한글 본문은 깔끔한 산세리프로 가독성을 유지했습니다.
풀스크린 내비게이션 — 메뉴도 브랜드 경험의 일부
일반적인 드롭다운 메뉴 대신 풀스크린 컬럼형 내비게이션을 설계했습니다. 메뉴를 열면 화면 전체가 5개 컬럼으로 나뉘고, 각 컬럼에 마우스를 올리면 해당 섹션의 배경 이미지가 서서히 나타나며 컬럼이 확장됩니다. 단순한 페이지 이동 수단이 아니라, 메뉴 자체가 브랜드의 컬렉션을 탐색하는 경험이 되도록 의도한 것입니다.
CSS의 flex 비율 전환과 cubic-bezier 이징을 활용해 JavaScript 없이도 부드러운 확장 애니메이션을 구현했습니다. 각 컬럼은 순차적으로 진입하는 딜레이를 두어 메뉴가 열릴 때 시각적 리듬감을 더했습니다.
커스텀 커서로 완성한 인터랙션 디테일
럭셔리 브랜드 사이트에서 커스텀 커서는 작은 디테일이지만 큰 차이를 만듭니다. CHRONOS 사이트에서는 기본 커서 대신 골드 톤 원형 커서를 구현했습니다. 클릭 시 커서가 부드럽게 확대되며, 인터랙티브 요소 위에서는 크기와 투명도가 변화합니다. 이런 미세한 반응이 사용자에게 "이 사이트는 다르다"는 인상을 심어줍니다.
구현은 순수 CSS transition과 약간의 JavaScript 이벤트 리스너로 처리했습니다. 무거운 라이브러리 없이도 고급스러운 인터랙션을 만들 수 있다는 좋은 사례가 되었습니다.
히어로 영역 — 첫 화면이 곧 브랜드 스토리
히어로 섹션은 시계 클로즈업 이미지를 전체 배경으로 깔고, 하단에서 상단으로 이어지는 그라데이션 오버레이로 텍스트 가독성을 확보했습니다. 상단 태그라인은 작은 레터스페이싱으로 고급스럽게, 메인 타이틀은 Cormorant Garamond 이탤릭으로 크게 배치해 시선을 사로잡습니다.
스크롤 유도 인디케이터도 단순한 화살표가 아니라 브랜드 톤에 맞는 미니멀한 디자인으로 제작해, 페이지 전체의 시각적 통일감을 유지했습니다.
프로젝트를 마치며
CHRONOS 프로젝트에서 가장 중요했던 건 기술적 화려함이 아니라 절제였습니다. 불필요한 요소를 걷어내고, 남은 것들의 완성도를 극한까지 높이는 작업이었습니다. 다크 배경 위의 골드 액센트, 세리프 이탤릭의 우아함, 풀스크린 메뉴의 몰입감 — 이 모든 요소가 "장인이 만든 시계"라는 브랜드 메시지를 일관되게 전달합니다.
CYAN은 단순히 보기 좋은 사이트가 아니라, 브랜드의 본질을 웹이라는 매체에 맞게 번역하는 작업을 합니다. 여러분의 브랜드에도 이런 깊이 있는 웹 경험이 필요하다면 편하게 문의해 주세요.