Project Overview
지구를 다시 숨쉬게 만드는 브랜드, 그린바이오시스템 '숨쉬는지구' 웹사이트
친환경 바이오 기업 그린바이오시스템의 브랜드 '숨쉬는지구' 웹사이트를 2021년 7월부터 8월까지 프리랜서로 진행했습니다. 웹사이트 디자인, 프론트엔드, 백엔드를 함께 개발한 프로젝트로, 브랜드가 하고 싶은 말을 어떻게 화면으로 옮길지부터 담당자가 직접 운영하는 구조까지 끝까지 책임진 작업입니다.
숨쉬는지구는 제품보다 철학이 먼저인 브랜드였습니다. 그래서 웹사이트도 제품 카탈로그가 아니라, 브랜드가 왜 존재하는지를 먼저 이야기하고 그다음에 제품과 실천으로 이어지는 구조로 설계했습니다.
Key Contributions
1. 브랜드 철학을 앞세운 웹 디자인
Problem제품 나열형 사이트로는 "왜 이 브랜드인가"가 전달되지 않았고, 친환경이라는 메시지가 흔한 문구로 흘러버릴 위험이 있었습니다.
Solution브랜드 선언과 자연 이미지를 중심에 둔 히어로를 시작으로, 철학 → 제품 → 실천 이야기로 이어지는 페이지 구성을 디자인했습니다. 여백을 넉넉히 두고 사진이 숨 쉴 자리를 만들어, 텍스트를 읽기 전에 브랜드의 분위기가 먼저 전해지도록 했습니다. 색은 자연에서 가져온 소수의 톤으로 제한해 페이지 전체가 하나의 인상으로 남게 했습니다.
Result방문자가 제품을 보기 전에 브랜드의 태도를 먼저 만나는 사이트가 되었고, 클라이언트가 브랜드를 설명할 때 그대로 보여줄 수 있는 창구가 되었습니다.
2. 제품과 소식의 운영 구조
Task제품 정보와 소식을 담당자가 개발자 없이 직접 갱신할 수 있는 구조
Insight작은 브랜드일수록 사이트가 방치되기 쉽습니다. 관리자에서 제품·소식을 등록하면 사이트에 같은 디자인으로 반영되는 백엔드를 만들어, 갱신할 때마다 디자인이 흐트러지거나 개발자를 부르는 일이 없게 했습니다.
Result운영 비용을 줄이고, 사이트가 시간이 지나도 처음의 완성도를 유지할 수 있는 기반을 마련했습니다.
3. 반응형 프론트엔드 구현
Solution여백과 사진이 중심인 디자인은 모바일에서 무너지기 쉽습니다. 화면 크기에 따라 사진의 크롭 기준과 여백 비율을 규칙으로 정해 구현해, 작은 화면에서도 같은 인상을 유지하도록 했습니다. 이미지가 많은 페이지는 로딩 순서를 조정해 첫 화면이 빨리 뜨게 했습니다.
Process
브랜드가 하고 싶은 이야기를 먼저 인터뷰로 정리하고, 무드보드와 시안으로 방향을 합의한 뒤 개발에 들어갔습니다. 디자인·프론트엔드·백엔드를 한 흐름으로 진행해 시안과 구현 사이의 손실 없이 빠르게 나아갈 수 있었고, 마지막에는 담당자가 제품과 소식을 직접 등록하는 방법을 안내해 넘겼습니다.
Outcome
디자인·프론트엔드·백엔드를 하나로 이어, 브랜드의 목소리와 운영의 현실을 동시에 만족시키는 사이트를 만들었습니다.
from SEOUL, 