개요
핵심 요약 — 도루코는 면도기와 면도날, 주방용 나이프, 커터까지 아우르는 블레이드 전문 브랜드다. 공식 웹사이트 dorco.co.kr은 제품 카탈로그를 나열하는 대신, 배우를 내세운 히어로 캠페인과 초대형 타이포그래피로 브랜드 무드를 먼저 각인시키는 쪽을 택했다. 이번 리뷰는 그 선택이 화면에서 어떻게 작동하는지 살핀다. SLEEK 캠페인 히어로의 첫인상, 블랙과 화이트를 오가는 섹션 리듬, 레드 포인트로 통제된 컬러 시스템, 그리고 Shaving·Kitchen·Cutter를 가로지르는 제품 슬라이더의 정보 설계까지, 제조 브랜드 웹사이트 제작의 교과서로 삼을 만한 장면들을 하나씩 짚는다.
브랜드 & 메시지
첫 화면은 깊은 그린 배경 위에 블랙 수트의 모델, 그 주위를 부유하는 면도기와 카트리지, 그리고 화면을 가로지르는 형광 그린의 이탤릭 타이포 SLEEK로 완성된다. 제품명 자체를 그래픽 요소로 승격시킨 구성이라 별도의 설명 카피 없이도 면도기 브랜드라는 정체성이 즉시 읽힌다. 이어지는 DORCO Story 섹션은 톤을 블랙으로 떨어뜨리고 '완벽을 향한 끊임없는 도전과 혁신'이라는 선언형 카피, 그리고 Edge of Shaving 영상으로 무게를 잡는다. 그 아래 화면 폭을 꽉 채우는 DORCO 워드마크는 이 사이트에서 가장 대담한 장면이다. 네비게이션은 Group·Product·Archive·Customer 4개로 극도로 절제했고, 우상단의 INQUIRY 버튼과 EN 토글이 문의와 글로벌 동선을 담당한다. Explore the DORCO, Elevate Every Moment 같은 티커형 문구가 레드 라인과 함께 섹션 사이를 잇는 것도 잡지 화보 같은 톤앤매너에 일조한다.
UX/UI 관점
이 사이트의 웹디자인 강점은 다섯 가지로 정리된다. 첫째, 스케일의 위계. SLEEK와 DORCO 워드마크처럼 화면을 압도하는 디스플레이 타이포와 본문 카피의 크기 차가 커서 시선의 정거장이 분명하다. 둘째, 섹션 컬러 리듬. 그린 히어로에서 블랙 스토리로, 다시 화이트 기업 소개로 이어지는 명암 전환이 스크롤에 챕터 감각을 부여한다. 셋째, 레드 하나로 통제한 액센트. Introduce company, Products, Life Style 같은 섹션 라벨과 구분선, 슬라이더 화살표, 구매 버튼까지 포인트 컬러가 한 색으로 수렴해 화면이 소란스럽지 않다. 넷째, Vision & Mission·Our Heritage·Product·What we do의 4분할 카드 그리드. 기업 정보를 균질한 밀도로 요약해 서로 다른 목적의 방문자를 각자의 경로로 분기시킨다. 다섯째, 제품 슬라이더의 좌측 세로 탭. Shaving·Kitchen·Cutter 카테고리를 축으로 SLEEK Motion, PACE 3D MOTION 같은 제품이 흰 배경 위 실물 컷으로 나란히 놓여 비교 탐색이 쉽다.
IA·SEO 전략
비주얼이 강한 사이트일수록 검색엔진에는 불리해지기 쉽다. SLEEK, Beyond living처럼 그래픽으로 처리된 대형 카피는 실제 텍스트 노드나 충분한 대체 텍스트로 보완해 크롤러가 읽을 수 있게 해야 한다. 슬라이더 안의 SLEEK Motion, PACE 3D MOTION POWER 같은 제품은 각각 고유 URL의 상세 페이지와 Product 구조화 데이터를 갖추면 제품명·용도 검색 유입을 브랜드 사이트가 직접 받아낼 수 있다. 우상단에 EN 토글을 둔 만큼 국문·영문 페이지 간 hreflang 상호 참조를 정비할 것. ESG·Archive·Recruitment로 흩어지는 라이프스타일 콘텐츠는 발행일과 카테고리 메타를 일관되게 관리해 뉴스룸형 색인을 만들어 두면 브랜드 검색 점유 면적이 넓어진다.
성능·접근성
풀블리드 사진과 Edge of Shaving 영상이 첫 화면 부근에 몰려 있어 LCP 관리가 관건이다. 히어로 이미지는 AVIF·WebP 병행과 반응형 srcset으로 용량을 누르고, 영상은 포스터 프레임을 먼저 그린 뒤 뷰포트 진입 시 로드하는 편이 안전하다. 티커와 슬라이더 같은 상시 애니메이션은 transform 기반으로 유지하고 prefers-reduced-motion 대응을 넣을 것. 초대형 타이포에 쓰인 디스플레이 폰트는 서브셋과 preload를 조합해 FOUT 구간을 줄여야 첫인상의 완성도가 지켜진다. 블랙 배경 구간의 회색 소형 텍스트는 명도 대비 기준을 한 번 점검할 만하고, 캐러셀에는 정지 컨트롤이 이미 보이는 만큼 키보드 포커스 동선까지 이어 주면 접근성 기초가 단단해진다.
디지털 파트너 더블루캔버스
도루코처럼 제품과 기업 스토리를 한 화면에 담아야 하는 제조 브랜드의 홈페이지 제작은 결국 편집의 문제다. 무엇을 키우고 무엇을 접을지 정하는 브랜드 전략, 그 화면을 검색 유입으로 연결하는 SEO 설계, 캠페인 시즌마다 성과를 만들어내는 퍼포먼스 마케팅까지 한 팀이 다뤄야 결과물이 흔들리지 않는다. The Blue Canvas는 기획과 웹디자인, 개발, SEO, 광고 운영을 통합해 제조·브랜드 기업의 디지털 채널을 설계한다. 자사 사이트 리뉴얼이나 캠페인 랜딩을 고민 중이라면 여기서 시작하면 된다.
마무리와 다음 스텝
도루코 웹사이트는 제품명을 그래픽으로 승격시킨 히어로, 명암을 오가는 섹션 리듬, 단일 레드 액센트로 브랜드가 주인공인 기업 사이트의 좋은 예를 보여준다. 다음 스텝은 셋이다. 대형 그래픽 카피의 검색 가독성 보강, 제품 상세의 고유 URL과 구조화 데이터 정비, 히어로 미디어의 LCP 최적화. 이 셋만 다듬어도 UX/UI가 만든 인상과 검색 성과가 같은 방향을 보게 된다.