SIE Garden은 식물이 가진 고요한 분위기를 빛과 움직임으로 풀어낸 가상의 라이프스타일 숍입니다.

MUBLO Framework를 기반으로 메인 화면부터 게시판, 검색, 로그인, 장바구니까지 하나의 시각 언어로 연결했습니다. 강한 장면과 차분한 장면을 교차 배치하고, 이미지의 밀도와 빛의 방향, 움직임의 속도를 조절해 긴 페이지에서도 자연스러운 호흡이 이어지도록 설계했습니다.

01. Opening — 첫 장면에서 분위기를 정의하다

첫 화면은 AI 영상과 버튼 인터랙션으로 시작합니다. 영상의 마지막 프레임을 메인 배너로 이어 사용해 오프닝이 끝난 뒤에도 장면이 끊기지 않도록 했습니다.

주요 요소는 약 2초 동안 함께 페이드인됩니다. 여러 요소가 제각각 등장하기보다 하나의 풍경이 천천히 열리는 인상을 만드는 편이 이 화면에 더 잘 맞았습니다. 오른쪽의 강한 햇빛에는 반대편의 작은 나비 오브젝트로 균형을 잡아 시각적 무게를 분산했습니다.

02. Collection — 밝은 장면의 밀도를 낮추는 전환

두 번째 구간은 식물 컬렉션의 진입부입니다. 이전 화면의 밝은 인상을 유지하면서도 콘텐츠에 집중할 수 있도록 식물 그림자와 안개를 활용해 전체 명도를 한 단계 낮췄습니다.

안개는 느린 주기로 반복되며 화면에 생동감을 남깁니다. 콘텐츠는 갤러리 형태로 고르게 배치해 특정 이미지보다 컬렉션 전체를 하나의 장면으로 받아들이도록 구성했습니다.

03. Bloom — 몰입 뒤에 시선의 휴식을 만들다

앞선 구간의 몰입은 이어가되 정보를 조금 더 편안하게 확인할 수 있도록 화면의 밀도를 낮췄습니다. 상단 그라데이션과 식물 실루엣은 두 장면이 갑자기 분리되어 보이지 않게 하는 연결 장치입니다.

대비가 강한 이미지의 반대 방향으로 꽃잎이 흘러가도록 해 시선이 한곳에 오래 머무르지 않게 했습니다. 식물 설명은 짧게 정리해 이미지와 정보가 서로 경쟁하지 않도록 했습니다.

04. Plants — 홍보보다 신뢰를 쌓는 정보 구간

제품 메시지가 연속되면 화면이 지나치게 상업적으로 느껴질 수 있습니다. 이 구간에서는 판매 메시지를 잠시 내려놓고 식물에 관한 정보를 전달하도록 역할을 바꿨습니다.

배경은 앞선 화면과 이어지는 범위에서 톤만 조절하고, 움직임과 대비가 적은 이미지를 선택했습니다. 오른쪽 상단의 부드러운 조명만 남겨 정적인 화면에 최소한의 생동감을 더했습니다.

05. Hanging Vines — 대비로 흐름을 다시 환기하다

차분한 장면이 이어져 리듬이 느슨해지는 지점에는 명암 대비가 뚜렷한 구성을 배치했습니다. 한쪽의 어두운 면과 반대편의 부드러운 이미지·조명이 균형을 이루도록 해, 강한 전환이 사이트의 전체 분위기에서 벗어나지 않게 했습니다.

화면 자체의 대비가 충분히 강한 만큼 문장은 짧은 제품 메시지로 제한했습니다.

06. Services — 경험을 서비스 안내로 연결하다

메인 콘텐츠의 마지막 구간에서는 제공 서비스를 정리했습니다. 앞선 장면보다 효과를 줄이고, 포장된 식물을 연상시키는 합성 이미지로 서비스의 성격을 직관적으로 보여주었습니다.

안내 문구는 정중하고 일관된 어조로 맞췄습니다. 푸터 직전의 짧은 빛 흐름은 새로운 정보를 더하기보다 메인 콘텐츠가 끝났음을 알려주는 마침표 역할을 합니다.

07. Footer — 필요한 정보만 남긴 마무리

푸터는 앞선 화면의 밀도와 경쟁하지 않도록 필요한 정보만 남겼습니다. 새로운 그래픽을 더하기보다 여백과 정돈된 구조로 마지막 인상을 차분하게 마무리했습니다.

08. Board System — 메인의 리듬을 게시판까지 확장하다

게시판은 별개의 기능 화면처럼 보이지 않도록 메인 페이지의 여백, 색상, 타이포그래피와 콘텐츠 밀도를 이어받았습니다. 정보를 빠르게 탐색해야 하는 역할은 유지하면서도 브랜드의 분위기가 끊기지 않도록 강조의 강도와 요소 간 간격을 조정했습니다.

09. Utility Pages — 작은 기능 화면에도 같은 경험을

장바구니, 검색, 로그인처럼 짧게 머무르는 페이지에도 같은 디자인 원칙을 적용했습니다. 각 기능의 구조는 단순하게 유지하되 색상, 여백, 입력 요소와 버튼의 표현을 통일해 어느 화면에서도 SIE Garden 안에 있다는 인상이 이어지도록 했습니다.

Project Review

이번 작업의 핵심은 효과의 개수가 아니라 페이지 전체의 호흡을 조절하는 일이었습니다. 강한 장면 다음에는 조용한 장면을 두고, 빛이 한쪽으로 몰리면 반대편에 작은 시각 요소를 배치하는 방식으로 긴 화면의 리듬을 만들었습니다.

MUBLO Framework를 기반으로 메인부터 게시판과 기능 페이지까지 하나의 시스템으로 완성하면서, 서로 다른 화면을 같은 브랜드 경험으로 연결하는 과정을 확인할 수 있었습니다.

완성된 사이트는 SIE Garden에서 확인할 수 있습니다. 무료 호스팅 환경의 특성상 첫 접속 시 로딩이 다소 길어질 수 있으며, 이후 새로고침하면 보다 원활하게 확인할 수 있습니다.