코드인디자인 | 플랫폼, SaaS 구축 전문 개발사

CodeInDesign

회사 소개

서비스 소개

포트폴리오

전문칼럼

문의하기

모든 프로젝트 보기

TRIFORCE LANDINGPAGE

18개국 다국어 지원, 글래스모피즘 기반 프리미엄 글로벌 인터랙티브 웹사이트 개발

Lauch

25.12.26

Client

(주) 만시간

OVERVIEW

Global Interactive
Experience

Global Interactive Experience

Triforce는 18개국 다국어를 지원하는 글로벌 인터랙티브 웹사이트입니다.
브라우저 언어 자동 감지로 전 세계 사용자에게 최적화된 경험을 제공합니다.
글래스모피즘 디자인 시스템, 스크롤 기반 애니메이션, HLS 비디오
스트리밍으로 몰입감 있는 브랜드 경험을 구현했습니다.

PROJECT GOAL

글래스모피즘 기반 프리미엄 디자인 시스템 구축

18개국 다국어 지원 시스템 구축

브라우저 언어 자동 감지 및 리다이렉션

스크롤 기반 인터랙티브 애니메이션 구현

HLS 비디오 스트리밍 적용

관리자용 Blog/문의 관리 시스템

Background
& Strategy

Background & Strategy

프로젝트 성격 및 목표

Triforce는 글로벌 시장을 타겟으로 하는 프리미엄 웹사이트 구축 프로젝트입니다.

글로벌 브랜드 경험 통일

18개국 언어 지원을 통해 전 세계
사용자에게 동일하고 일관된
브랜드 경험을 제공합니다.

브랜드 가치 극대화

글래스모피즘 기반의 고급스러운
비주얼 디자인을 적용하여
브랜드 가치를 높입니다.

타겟 분석

글로벌 브랜드 웹사이트로서 다양한 국가와 언어권의 사용자를 대상으로 합니다.

글로벌 고객

바이어/파트너

바이어/
파트너

일반 방문자

18개 언어권의
잠재 고객에게 언어 장벽
없는 브랜드 경험 제공

제품 및 브랜드 정보를
명확하게 전달받아야
하는 B2B 관계자

브랜드에 관심을
갖고 정보를 탐색하는
잠재 고객

CodeInDesign

문의하기

CodeInDesign

문의하기

18개국 다국어 지원 시스템

글로벌 웹사이트에서 언어 선택은 첫 번째 장벽입니다.
사용자가 직접 언어를 찾아 설정해야 한다면 이탈 가능성이 높아집니다.
또한 18개 언어에 대한 URL 구조와 SEO 최적화도 고려해야 했습니다.

브라우저 언어 자동 감지

사용자 기기 설정에 맞춰 자동 리다이렉션

언어별 URL 경로 체계

/ko, /en, /ja 등 명확한 URL 구조로 SEO 최적화

언어별 콘텐츠 최적화

단순 번역이 아닌 각 언어권에 맞는 콘텐츠 구성

브라우저 언어 자동 감지

사용자 기기 설정에 맞춰 자동 리다이렉션

언어별 콘텐츠 최적화

단순 번역이 아닌 각 언어권에 맞는 콘텐츠 구성

언어별 URL 경로 체계

/ko, /en, /ja 등 명확한 URL 구조로 SEO 최적화

글래스모피즘 디자인 시스템

프리미엄 브랜드 이미지를 전달하기 위해 차별화된 비주얼이 필요했습니다.
트렌디하면서도 브랜드 정체성을 담을 수 있는 디자인 시스템 구축이 과제였습니다.

CSS Variables 기반 테마

일관된 색상 체계와 유연한 확장성

다층 반투명 레이어

깊이감과 입체감을 표현하는 유리 질감 UI

Backdrop Filter 활용

배경과 자연스럽게 어우러지는 글래스 효과

다층 반투명 레이어

깊이감과 입체감을 표현하는 유리 질감 UI

CSS Variables 기반 테마

일관된 색상 체계와 유연한 확장성

Backdrop Filter 활용

배경과 자연스럽게 어우러지는 글래스 효과

스크롤 기반 인터랙티브 애니메이션

정적인 브랜드 페이지로는 사용자의 몰입을 이끌어내기 어렵습니다.
Apple 스타일의 스크롤 시퀀스 애니메이션으로 제품과 브랜드 스토리를 역동적으로 전달하고자 했습니다.
다만 복잡한 애니메이션으로 인한 성능 저하가 우려되었습니다.

정적인 브랜드 페이지로는 사용자의 몰입을 이끌어내기 어렵습니다.
Apple 스타일의 스크롤 시퀀스 애니메이션으로 제품과 브랜드 스토리를 역동적으로
전달하고자 했습니다. 다만 복잡한 애니메이션으로 인한 성능 저하가 우려되었습니다.

Lenis Smooth Scroll

부드러운 스크롤 경험 제공

애니메이션 렌더링 최적화

프레임 드롭 방지를 위한 성능 튜닝

스크롤 시퀀스 애니메이션

스크롤에 따라 단어가 순차적으로
나타나는 텍스트 효과

Canvas 기반 시퀀스

GPU 가속을 활용한 효율적인 애니메이션 처리

Lenis Smooth Scroll

부드러운 스크롤 경험 제공

애니메이션 렌더링 최적화

프레임 드롭 방지를 위한 성능 튜닝

스크롤 시퀀스 애니메이션

스크롤에 따라 단어가 순차적으로 나타나는 텍스트 효과

Canvas 기반 시퀀스

GPU 가속을 활용한 효율적인 애니메이션 처리

HLS 비디오 스트리밍

이전 Manprotek 글로벌 웹사이트 구축 시, 한 페이지에 다수의 비디오가 포함되면서 모바일 환경에서 심각한 성능 문제가
발생하였습니다. 접속이 튕기거나 심한 렉이 걸리는 현상이 빈번했고, 이는 사용자 이탈로 직결되었습니다.
Triforce 역시 풀스크린 비디오 배경을 다수 사용해야 했기 때문에, 비디오 최적화가 필수 과제였습니다.

이전 Manprotek 글로벌 웹사이트 구축 시, 한 페이지에 다수의 비디오가 포함되면서
모바일 환경에서 심각한 성능 문제가 발생하였습니다. 접속이 튕기거나
심한 렉이 걸리는 현상이 빈번했고, 이는 사용자 이탈로 직결되었습니다.
Triforce 역시 풀스크린 비디오 배경을 다수 사용해야 했기 때문에,
비디오 최적화가 필수 과제였습니다.