TITA 티타늄 안경 브랜드 쇼핑몰 구축

소재와 공정, 장인의 이야기를 쇼핑몰 첫 화면부터

SCROLL
클라이언트명
TITA · 티타 안경
기술
카페24 · HTML5 · CSS3 · jQuery · Swiper
프로젝트 유형
브랜드 쇼핑몰 · 카페24 디자인 · 반응형 웹
담당 범위
쇼핑몰 디자인 · 카페24 스킨 퍼블리싱 · 브랜드 스토리 페이지 제작
주요 기능
  • 세로 슬라이드 메인 비주얼 · 브랜드 메시지 · 메인 상품 진열 영역
  • 브랜드 스토리 페이지(제작 과정 영상 · 장인 소개 · TITA 22 PROJECT · 브랜드 심볼)
  • 상품 상세 이미지 슬라이드·탭 · 장바구니·주문·마이페이지
프로젝트 개요
  • TITA는 대구 3공단의 안경 장인들이 모여 만든 티타늄 안경 브랜드로, 순수 티타늄 프레임을 100일 가까운 시간과 수십 단계의 공정으로 완성합니다.
  • 브랜드가 쓰는 소재와 만드는 과정, 장인의 이야기를 보여 주면서 제품을 바로 판매할 수 있도록 카페24 쇼핑몰을 새로 디자인해 구축했습니다.
개발 목표
  • 방문자가 첫 화면에서 브랜드의 성격을 알아보고, 브랜드 스토리로 자연스럽게 이어지도록 합니다.
  • 상품 사진을 크게 넘겨 보는 상세 화면으로 티타늄 프레임의 디테일을 확인하도록 합니다.
홈페이지 바로가기

DESIGN SYSTEM

primary Color
secondary Color
Kor Noto Sans KR
Eng Noto Sans KR

WEB DESIGN

TITA 쇼핑몰 메인 화면
TITA 브랜드 스토리 — Special Quality와 TITA 22 PROJECT
TITA 브랜드 스토리 — 제작 과정 영상과 장인 소개
TITA 브랜드 스토리 — 브랜드 심볼과 제품 사진

소재와 공정, 장인의 이야기를
쇼핑몰 첫 화면부터

TITA는 항공기와 인공위성에 쓰이는 티타늄(원자번호 22)으로 안경을 만드는 브랜드입니다. 제품 목록보다 먼저 브랜드가 쓰는 소재와 만드는 과정을 보여 주도록 쇼핑몰의 흐름을 잡았습니다.

  • 세로로 넘어가는 메인 비주얼

    메인 첫 화면에 안경 사진과 브랜드 문구를 담은 슬라이드 3장을 세로 방향으로 4초마다 넘기고, 넘어갈 때 겹쳐 움직이는 효과(패럴랙스)를 주었습니다.

  • 한 편으로 읽히는 브랜드 스토리

    브랜드 스토리 페이지에 제작 과정 영상, 장인 소개, TITA 22 PROJECT, 브랜드 심볼을 차례로 담아 한 번에 읽히도록 구성했습니다.

  • 흑백 대비의 타이포그래피

    흰 바탕에 굵은 영문 제목을 크게 쓰고, 푸터는 검은 바탕에 PRODUCT·STORY·STORE를 큰 글씨로 두어 화면 전체를 흑백 대비로 정리했습니다.

티타늄 안경 브랜드의 이야기를
판매로 잇는 카페24 쇼핑몰

상단 메뉴를 PRODUCT, STORY, NOTICE와 LOGIN, JOIN, MY, CART로 단순하게 나누고, 카페24의 상품·주문 기능 위에 브랜드에 맞춘 디자인 스킨을 새로 입혔습니다.

메인 비주얼과
브랜드 메시지

‘티타의 신념은 티타로 만드는 좋은 세상입니다’라는 문구와 안경 사진으로 시작해, 아래에 TITA 22 PROJECT 소개와 브랜드 스토리 버튼을 두었습니다. 이어서 메인 상품 진열 영역을 배치했습니다.

100일의 제작 과정 영상

브랜드 스토리 앞부분에 티타가 만들어지는 과정을 담은 영상을 넣고, 수십 년간 안경만 만들어 온 대구 장인들의 이야기를 이어서 소개했습니다.

TITA 22 PROJECT

안경이 필요한 아이들을 위한 후원(Eye to Eye), 플라스틱 없는 포장(Eco Friendly), 품질과 보증(Premium Quality & Warranty)을 사진과 글이 좌우로 번갈아 나오는 구성으로 정리했습니다.

브랜드 심볼과
제품 사진

로고의 의미를 풀어 쓴 브랜드 심볼 영역과 안경·케이스 사진을 스토리 페이지 끝에 두어, 브랜드의 시각 요소를 한곳에 모았습니다.

상품 상세 화면

상품 사진을 넘겨 보는 이미지 슬라이드와 썸네일 목록, 상세정보를 나눠 보는 탭으로 상품 상세 화면을 구성했습니다. 장바구니, 주문, 마이페이지는 카페24 기능과 연결했습니다.

PC·모바일 대응

화면 폭에 따라 배치가 바뀌도록 스타일을 나눠, 작은 화면에서도 같은 디자인 흐름으로 브랜드와 상품을 볼 수 있게 했습니다.

브랜드 이야기와 제품 판매를 한 사이트에서 함께 보여 줄 쇼핑몰이 필요하신가요?
브랜드와 판매 방식에 맞는 쇼핑몰 제작을 상담해 드립니다.
지금 웹셀러에 상담하세요.

카카오 채널 카카오 1:1 문의