개요
티센트(tscent)는 잎차와 다도구, 선물세트를 다루는 프리미엄 티 브랜드다. 첫 화면부터 요란한 프로모션 배너 대신 세로로 떨어지는 한글 헤드라인과 넉넉한 여백, 그리고 어두운 원목 탁자 위에 놓인 찻잔 세 개의 정물 사진으로 브랜드의 정서를 먼저 건넨다. 상단바에는 KOR 언어 전환과 Search·Login·Cart, 그리고 Menu만 최소한으로 배치돼, 화면은 잎차 한 봉지가 아니라 차를 마시는 시간을 판다. 이번 리뷰는 이 절제된 웹디자인이 실제 커머스 전환과 콘텐츠 탐색으로 어떻게 연결되는지를 UX/UI, 정보 구조, 검색 노출 세 축에서 하나씩 뜯어본다. 미니멀은 티센트의 무기이자, 동시에 가장 조심스럽게 다뤄야 할 지점이기도 하다.
브랜드 & 메시지
헤드라인을 한 줄로 눕히지 않고 세로쓰기로 쪼개 놓은 선택이 티센트의 첫인상을 결정한다. 화면 가운데 문장이 서예의 획처럼 위에서 아래로 떨어지며 차 한 잔의 여백이라는 인상을 만든다. 로고 tscent는 소문자로 눌러 담아 브랜드가 자신을 크게 외치지 않고, 컬러는 사실상 무채색이다. 흰 배경과 먹빛 텍스트, 원목과 찻잔의 톤이 팔레트의 전부이며 튀는 포인트 컬러는 의도적으로 비웠다. CTA도 같은 태도다. 각 섹션의 모두 보기, 콘텐츠의 자세히 보기는 밑줄 링크로만 조용히 존재한다. 네비게이션이 Search·Login·Cart·Menu 넷으로 압축돼 있어 화면은 더없이 깔끔하지만, 정작 여기가 무엇을 파는 곳인지는 스크롤을 한참 내려 일차·다도구·선물세트 라벨을 만나야 드러난다. 절제가 미학이 되는 동시에 커머스로서의 진입 장벽이 되는, 균형이 필요한 대목이다.
UX/UI 관점
화면을 실제로 훑으며 확인한 티센트 웹디자인의 강점은 분명하다. 감상만으로 끝나지 않도록, 눈에 보이는 근거를 중심으로 정리했다.
1. 시선 경로의 단순함. 섹션마다 큰 세로 국문 라벨(일차·다도구·선물세트)과 두어 줄 설명, 단 하나의 링크만 두어 사용자가 다음에 어디를 볼지 헷갈리지 않는다. 2. 정물 사진의 일관성. 찻잔, 원형 소반에 담긴 찻재료(마른 잎, 생강, 노른자 등)를 같은 조도와 톤으로 촬영해 사이트 전체가 한 권의 브랜드 화보처럼 읽힌다. 3. 커머스와 콘텐츠의 결합. 티코스와 강의(남방록 연구, 일기일회 일본 다도) 같은 읽을거리를 상품 옆에 나란히 배치해 체류 시간을 자연스럽게 늘린다. 4. 절기 기반 큐레이션. 입춘·우수·경칩 같은 24절기를 콘텐츠 축으로 삼아 차는 계절을 마시는 일이라는 서사를 만든다. 5. 타이포 중심의 위계. 이미지가 적은 섹션도 큰 국문 타이틀과 여백만으로 리듬을 잡아, 요소를 덜어내는 미니멀 웹디자인의 정석을 보여준다. 6. 세로 흐름의 확장성. 한 열로 길게 쌓아 올리는 구조라 좁은 모바일 화면에서도 레이아웃이 크게 무너지지 않는다.
IA·SEO 전략
티센트의 아름다움은 대부분 타이포와 이미지에서 나오는데, 검색엔진은 그 아름다움을 읽지 못한다는 점이 첫 과제다. 세로쓰기 헤드라인과 큰 국문 라벨이 이미지로 구워졌는지, 살아 있는 텍스트인지부터 점검해야 한다. 텍스트라면 크롤러가 브랜드 메시지를 그대로 수집하고, 이미지라면 대체 텍스트로 최소한의 의미를 남겨야 한다. 제품 축에서는 잎차·다도구·선물세트 각 카테고리가 서로 다른 title과 meta description을 갖고, 상품 상세에는 Product 구조화 데이터로 가격·재고를 노출하는 것이 전환에 유리하다. 콘텐츠 축에서는 티코스와 강의가 강력한 유입 자산이다. 입춘 차, 우수에 어울리는 차처럼 절기와 결합한 롱테일 검색어를 노릴 수 있으니 콘텐츠 페이지에 Article 스키마와 발행일을 정비할 만하다. 사이트에서 관찰된 일차·잎차 표기 혼선은 내부 용어를 한쪽으로 통일해 색인 신호를 흩뜨리지 않도록 한다. 마지막으로 모두 보기 같은 앵커 텍스트는 잎차 전체 보기처럼 구체화하고, Cart·Login 뒤의 개인화 페이지는 noindex로, 상품·콘텐츠는 canonical로 정리하는 편이 좋다.
성능·접근성
티센트는 대형 정물 사진이 화면의 무게를 거의 다 짊어지는 사이트다. 그만큼 이미지 최적화가 체감 속도를 좌우한다. 각 사진은 WebP/AVIF를 병행 제공하고 명시적 width/height로 레이아웃 이동(CLS)을 막되, 첫 화면의 찻잔 정물은 지연 로딩 대신 preload로 앞당겨 LCP를 챙기는 편이 낫다. 화면 아래쪽의 소반·서적 이미지는 지연 로딩으로 초기 부담을 덜면 된다. 세로쓰기 타이포가 웹폰트라면 서브셋과 display swap으로 폰트 지연 구간을 줄인다. 접근성 측면에서는 무채색 팔레트의 대가를 살펴야 한다. 밑줄만으로 구분되는 옅은 링크와 저채도 텍스트는 대비 기준을 통과하는지 확인이 필요하고, 키보드 포커스 링이 이 조용한 화면에서도 또렷하게 보여야 한다. 정물 사진에는 장식/정보 여부에 따라 alt를 구분해 부여하고, 세로쓰기로 배열된 헤드라인이 스크린리더에서 뒤죽박죽 읽히지 않도록 마크업 순서를 점검하는 것이 좋다.
디지털 파트너 더블루캔버스
티센트처럼 감성과 정서가 곧 경쟁력인 브랜드는, 화면 한 컷의 톤과 여백이 매출로 이어진다. 문제는 그 미감을 지키면서도 검색에 걸리고 장바구니로 흐르게 만드는 일이 결코 단순하지 않다는 점이다. The Blue Canvas(블루캔버스)는 브랜드의 세계관을 해치지 않는 홈페이지 제작을 지향한다. 프리미엄 티·F&B, 라이프스타일 브랜드몰의 웹사이트 제작 경험을 토대로 미니멀한 웹디자인과 커머스 전환 설계를 한 흐름 안에서 조율한다. 정물 화보의 톤을 살리는 아트디렉션, 상품·콘텐츠를 검색에 노출시키는 SEO 구조 설계, 절기·시즌 콘텐츠를 유입과 재방문으로 잇는 퍼포먼스 마케팅까지 기획-디자인-개발-실험을 한 팀에서 반복 개선한다. 브랜드의 정체성은 그대로 두되 매출의 문턱만 낮추고 싶다면, 다음 링크에서 협업 사례를 확인해 보길 권한다.
마무리와 다음 스텝
티센트는 차의 정서를 웹으로 옮기는 데 성공한, 보기 드물게 절제된 UX/UI를 가진 브랜드다. 세로쓰기 헤드라인과 무채색 팔레트, 화보형 정물이 만드는 첫인상은 프리미엄 티 브랜드로서 흠잡을 데가 적다. 남은 과제는 그 아름다움을 성과로 번역하는 일이다. 첫째, 무엇을 파는 브랜드인지 상단에서 한 번은 분명히 밝혀 미니멀과 전환 사이의 균형을 잡을 것. 둘째, 타이포와 이미지에 갇힌 메시지를 텍스트와 구조화 데이터로 풀어 검색엔진이 티센트를 읽게 할 것. 셋째, 티코스와 절기 콘텐츠를 유입 자산으로 삼아 상품과 이야기를 하나의 여정으로 잇는 것. 이 세 가지만 손봐도 지금의 감각적인 웹사이트는 팔리는 웹사이트로 한 단계 올라선다.