chobon.framer.website
BEFORE THE TREE, THE GRASS
Loading preview

Case study

BEFORE THE TREE, THE GRASS

Branding · 초본 CHOBON · 2026

식물의 본질에서 영감을 찾고 연구하는 브랜드입니다. 완성된 형태보다 생명이 시작되는 지점을 들여다본다는 관점을, 설명이 아니라 경험으로 전달하는 것이 이 프로젝트의 과제였습니다. 제품을 3D로 추출해 스크롤에 따라 360도로 돌아가게 만들고, 브랜드가 직접 운영할 수 있는 블로그 CMS까지 Framer 위에 얹었습니다.

사이트 이동하기

Role

브랜드 웹사이트 디자인 시안3D 이미지 추출 · 360° 스크롤 인터랙션Framer 웹사이트 구축블로그 CMS 설계
01

Key insights

We learned

01

브랜드 각인은 설명이 아니라 경험에서 남는다

초본의 철학을 문장으로 잘 써두는 것만으로는 기억에 남지 않습니다. 제품을 3D로 추출해 스크롤에 따라 360도로 돌려보게 만든 이유가 여기 있습니다. 읽기 전에 먼저 만져보는 감각이 생기면, 브랜드는 설명 없이도 각인됩니다.

02

본질을 들여다보는 태도를 화면의 규칙으로 옮겼다

완성된 형태보다 시작되는 지점을 본다는 관점을 여백과 속도로 번역했습니다. 요소를 빽빽하게 채우는 대신 숨 쉴 자리를 남기고, 전환은 급하게 끊지 않고 자라나듯 이어지게 두었습니다. 브랜드가 말하는 태도와 화면의 인상이 어긋나지 않아야 신뢰가 생깁니다.

03

3D 인터랙션은 무겁지 않게 넣어야 살아남는다

회전 인터랙션은 잘못 넣으면 로딩이 길어지고 모바일에서 버벅입니다. 실제 3D 엔진을 띄우는 대신 각도별 이미지를 뽑아 스크롤에 매핑했습니다. 보이는 결과는 같으면서 처음 로딩과 저사양 기기에서의 부담은 크게 줄어듭니다.

04

CMS는 '앞으로 쓸 사람' 기준으로 짠다

블로그를 Framer CMS로 붙이면서 항목을 최소로 줄였습니다. 필드가 많을수록 관리자는 글을 안 올리게 됩니다. 제목·본문·대표 이미지만으로 발행이 끝나도록 두는 편이, 결과적으로 콘텐츠가 더 쌓입니다.

02

Work

작업 영역

Key Visual

키 비주얼과 카피

From root to ritual, this is Chobon.

뿌리에서 시작해 하루의 의식으로. 초본이 무엇을 연구하는 브랜드인지를 설명 없이 전달하는 문장입니다.

첫 화면에서 이 한 줄과 초록 들판만 남겼습니다. 정보를 얹을수록 문장의 힘이 줄어들기 때문입니다.

초본 브랜드 키 비주얼과 슬로건

Scroll-driven Sequence

스크롤 연동 시퀀스

왼쪽이 3D 원본입니다. 이끼와 결정, 흩어진 들꽃까지 한 덩어리로 모델링했습니다.

오른쪽은 이를 10도 간격 36프레임으로 렌더링해 스크롤 진행률에 매핑한 결과입니다. 스크롤 위치가 곧 회전 각도가 됩니다.

WebGL 로 실시간 렌더링하지 않은 이유는 비용 때문입니다. 초기 로딩이 길어지고 저사양 단말에서 프레임이 떨어지면, 이탈이 먼저 일어납니다. 프레임 시퀀스는 결과가 같으면서 이미지 디코딩만 하면 됩니다.

제품을 읽기 전에 만져보게 하는 것. 브랜드를 각인시키는 데 문장보다 빨랐습니다.

초본 3D 오브젝트 원본
3D 원본
초본 제품 회전 시퀀스
36프레임 시퀀스

Full Screens

전체 화면

슬로건에서 제품, 그리고 블로그까지 이어지는 전체 흐름입니다.

초록과 여백을 끝까지 같은 기준으로 유지했습니다. 식물의 본질을 들여다본다는 브랜드의 태도가 화면의 속도와 밀도에서도 읽혀야 하기 때문입니다.

초본 웹사이트 전체 화면
02

Reflection

작업 소감

철학은 읽히는 순간이 아니라 겪는 순간에 남는다

초본은 식물의 본질에서 답을 찾는 브랜드입니다. 완성된 형태가 아니라, 생명이 시작되는 지점을 들여다봅니다. 이런 브랜드의 웹사이트에서 가장 위험한 선택은 좋은 문장을 크게 써놓고 끝내는 것입니다. 문장은 읽히는 동안만 살아 있고, 창을 닫으면 사라집니다.

그래서 목표를 '브랜드 각인' 하나로 좁혔습니다. 정보를 얼마나 많이 전달했는가가 아니라, 사이트를 닫고 나서도 남는 감각이 있는가. 이 질문 하나로 모든 판단을 정리했습니다.

설명 대신 손에 쥐여주는 방식

제품을 3D로 추출해 스크롤에 따라 360도로 돌아가게 만든 것이 그 답이었습니다. 방문자는 설명을 읽기 전에 먼저 제품을 돌려봅니다. 스스로 움직여본 대상은 그냥 본 대상과 기억에 남는 정도가 다릅니다.

브랜드가 무엇을 연구하는 곳인지 말로 설득하는 대신, 그 대상을 직접 살펴보게 두었습니다. 식물의 본질을 연구한다는 문장은 그 다음에 읽혀야 설득력이 생깁니다.

브랜드는 잘 쓴 문장이 아니라, 손으로 한 번 움직여본 기억으로 남습니다.

이지스파크 허수진 대표

Cozy

Project Lead

가볍게 만드는 것까지가 기술

이런 인터랙션은 자칫 무거워집니다. 첫 로딩이 길어지고 저사양 기기에서 끊기면, 각인은커녕 이탈이 먼저 일어납니다. 그래서 각도별 이미지를 미리 뽑아 스크롤 위치에 매핑하는 방식을 택했습니다. 보이는 결과는 같으면서 부담은 훨씬 가볍습니다.

구현할 수 있다는 것과 감당할 수 있다는 것은 다릅니다. 오픈 이후에도 문제없이 굴러가는 선까지가 기술의 범위라고 봅니다.

만든 사람이 떠난 뒤를 생각하며

블로그는 Framer CMS로 붙였습니다. 기준은 하나였습니다. 초본이 앞으로 직접 운영할 수 있는가. 그래서 입력 항목을 최소로 줄였습니다. 필드가 많을수록 관리자는 글을 안 올리게 됩니다.

본질을 들여다본다는 브랜드의 태도는 여백과 속도에도 남겼습니다. 화면을 빽빽하게 채우지 않고, 전환을 급하게 끊지 않았습니다. 브랜드가 말하는 태도와 화면이 주는 인상이 어긋나면, 아무리 잘 만든 사이트여도 끝내 설득되지 않습니다.

투명한 견적,
숨겨진 비용 없이 안내드립니다

프로젝트 규모와 목적에 맞는 맞춤 견적을,
이지스파크가 직접 안내해드릴게요.