빙그레할 틈 — 브랜드 리뉴얼 콘셉트

문제

브랜드 리뉴얼 콘셉트 팀 프로젝트에서 메인 페이지를 맡았다. 제품 상세 페이지는 팀원들이 맡았다.

콘셉트는 빙그레를 "바쁜 일상 속 작은 즐거움의 틈을 만드는 브랜드"로 다시 읽는 것이었다. 제품을 나열하는 대신, 이 문장을 첫 화면부터 느끼게 하는 메인 페이지가 필요했다.

해결

Figma로 장면을 잡고, 구현하며 다시 고쳤다

장면 구성은 Figma로 먼저 잡고, 구현하면서 어색한 부분을 다시 Figma로 돌아가 고쳤다. 같은 날 화면 톤을 세 번 바꿨다. 처음에는 프리미엄 에디토리얼 톤으로 전면 개편했고, 이어서 "스크롤이 곧 하루"가 되는 구조로 바꾼 뒤, 오프닝을 빽빽한 일정표에서 틈이 열리는 장면으로 다시 만들었다.

두 가지 버전

섹션형 메인. 스크롤하면 빽빽한 일정 타이포 사이가 벌어지며 제품이 나타나는 HERO로 시작한다. 하루의 순간(아침·오후·기분 전환·하루의 끝)으로 제품을 찾는 구간, 대표 제품을 한 화면씩 넘기는 구간(팀원 상세 페이지로 연결), 3D 제품을 돌리고 확대하고 분리해 보는 구간, 브랜드 매거진과 디지털 브랜드북 미리보기, 참여형 카드, 소식 순으로 이어진다.

3D 스크롤형. 스크롤 한 번이 하루가 된다. 06:30 입장 화면에서 소리와 함께 또는 조용히 시작을 고르고, 빽빽한 일정표에서 틈이 열린다. 07:40, 15:30, 17:10, 22:20 네 순간마다 3D 제품이 등장하고 배경의 빛도 시간에 맞춰 바뀐다. 마지막에는 오늘 빙그레하게 한 일을 골라 카드를 만들고, 24:00에 지나온 틈들이 이어져 "빙그레" 별자리가 된다.

3D와 모션

• 제품은 Blender로 만들고 조명을 구워(baking) 가벼운 GLB로 웹에 올렸다. 점진 로딩과 모바일용 스테이지로 무게를 줄였다.
• Three.js로 제품을 띄우고, GSAP ScrollTrigger와 Lenis로 스크롤 연출을 만들었다.
• 모바일 터치 조작을 따로 확인해 복구했다. 모션은 기기 설정(모션 줄이기)을 존중하면서 사이트 안에서 켜고 끌 수 있게 했다.
• 참여형 카드는 만든 뒤 PNG로 저장할 수 있다.

결과

2

따로 배포한 버전 (섹션형 · 3D 스크롤형)

4

하루의 순간마다 등장하는 3D 제품 장면

• 섹션형 메인과 3D 스크롤형 두 버전을 따로 배포했다. 3D 스크롤형 보기 · 섹션형 메인 보기
• 기획과 화면 구성, 3D 제품, 스크롤 연출, 참여형 카드까지 메인 페이지 전체를 맡았다.
• Claude Code와 함께 하루 동안 만들었다. 장면 구성과 화면 톤을 바꾸는 판단은 직접 했다.

빙그레 공식 사이트가 아닌 개인·팀 콘셉트 작업이다.