# [요거트보이 랜딩페이지 구축 사례] 캐릭터 브랜딩과 창업 이해도를 높이는 구조 설계

저자: 잡오브브라더스 (홈페이지 제작 에이전시) · 게시: 2026-04-20 · 수정: 2026-04-20 · 원문: https://job.ontoblog.com/blog/%EC%9A%94%EA%B1%B0%ED%8A%B8%EB%B3%B4%EC%9D%B4-%EB%9E%9C%EB%94%A9%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B5%AC%EC%B6%95-%EC%82%AC%EB%A1%80-%EC%BA%90%EB%A6%AD%ED%84%B0-%EB%B8%8C%EB%9E%9C%EB%94%A9%EA%B3%BC-%EC%B0%BD%EC%97%85-%EC%9D%B4%ED%95%B4%EB%8F%84%EB%A5%BC-%EB%86%92%EC%9D%B4%EB%8A%94-%EA%B5%AC%EC%A1%B0-%EC%84%A4%EA%B3%84/

> **요약**: 요거트보이 프로젝트는 일반 소비자 대상의 메뉴 소개를 넘어 브랜드 경쟁력과 운영 구조를 효과적으로 전달하여 예비 창업자의 관심과 문의를 유도하기 위한 목적의 프로젝트 입니다. 다양한 메뉴 구성과 토핑 조합, 운영 방식 등의 정보를 단순 나열이 아닌 이해 중심의 구조로 재정리 하여 창업을 고려하는 사용자가 브랜드의 특징과 차별성을 빠르게 파악할 수 있도록 설계했습니다.

요거트보이 프로젝트는 일반 소비자 대상의 메뉴 소개를 넘어 브랜드 경쟁력과 운영 구조를 효과적으로 전달하여 **예비 창업자의 관심과 문의를 유도하기 위한 목적의 프로젝트** 입니다.

다양한 메뉴 구성과 토핑 조합, 운영 방식 등의 정보를 단순 나열이 아닌 **이해 중심의 구조로 재정리** 하여 창업을 고려하는 사용자가 브랜드의 특징과 차별성을 빠르게 파악할 수 있도록 설계했습니다.

특히 요거트, 토핑, 디저트로 이어지는 메뉴 구조와 운영 프로세스를 단계적으로 보여줌으로써 매장 운영 방식에 대한 이해도를 높이고 창업 진입 장벽을 낮추는 방향으로 UX를 구성했습니다.

또한 브랜드 캐릭터와 시각 요소를 활용하여 친근한 인상을 유지하면서도 정보 전달에 집중할 수 있는 구조로 균형 있게 설계했습니다.

이를 통해 사용자는 단순한 브랜드 인지에 그치지 않고, “운영이 어떻게 이루어지는지”, “내가 할 수 있는 사업인지” 를 빠르게 판단할 수 있도록 하여 자연스럽게 창업 문의로 이어지는 흐름을 갖춘 웹사이트로 구축되었습니다.

![요거트보이 랜딩페이지 구축 사례 캐릭터 브랜딩과 창업 이해도를 높이는 구조 설계](/uploads/naver/jobofbrothers/224243790591-1.webp)

## 메인 페이지

## **메인 페이지 기획의도**
> - 메뉴 구조를 단순 나열이 아닌 단계형 흐름으로 재구성하여, 예비 창업자가 운영 방식을 직관적으로 이해할 수 있도록 설계.
> - 이미지 중심 UI와 핵심 정보만을 강조한 구성으로, 브랜드 경쟁력과 상품 구조를 빠르게 인지할 수 있도록 기획.
> - 브랜드 이해부터 운영 구조 인지까지 자연스럽게 이어지는 정보 흐름을 통해, 창업 관심과 문의로 연결되는 전환 구조를 구현.

## 한 화면에서 브랜드 이미지와 창업 포인트를 동시에 인지시키는 구조 설계

![요거트보이 랜딩페이지 구축 사례 캐릭터 브랜딩과 창업 이해도를 높이는 구조 설계](/uploads/naver/jobofbrothers/224243790591-2.webp)

해당 섹션은 브랜드 비주얼과 창업 메시지를 한 화면에서 동시에 전달할 수 있도록 중앙 집중형 레이아웃으로 설계되었습니다.

중앙에는 제품 이미지를 배치하여 브랜드 아이덴티티를 명확하게 전달하고, 좌우에는 핵심 메시지를 분리 배치하여 트렌드성, 창업 용이성과 같은 주요 포인트를 직관적으로 인지할 수 있도록 구성했습니다.

특히 좌우 메시지 구조는 사용자의 시선을 자연스럽게 분산시키면서도 핵심 내용을 빠르게 스캔할 수 있도록 도와주며 복잡한 설명 없이도 브랜드와 창업 가치가 동시에 전달되도록 설계되었습니다.

또한 강한 컬러 대비와 단순한 구성 요소를 활용하여 정보 전달에 집중할 수 있는 UI로 구성하였으며, 첫 화면에서 브랜드 방향성과 사업성을 동시에 이해할 수 있도록 UX를 설계했습니다.

결과적으로 해당 섹션은 단순한 비주얼 영역이 아닌 브랜드 인지,창업 메시지 전달을 동시에 수행하는 설득 중심의 핵심 구간으로 작동합니다.

## 애니메이션 그래프와 반복 텍스트를 통해 성장성과 브랜드 인지도를 동시에 강화하는 인터랙션 UX 설계

해당 섹션은 요거트 시장의 성장성을 전달하는 과정에서 정적인 정보 나열이 아닌 **애니메이션 기반 데이터 시각화** 를 적용하여 사용자의 시선을 자연스럽게 유도하도록 설계되었습니다.

연도별 시장 규모 그래프는 단계적으로 상승하는 애니메이션을 통해 표현되어 사용자가 수치를 읽지 않아도 시장이 지속적으로 성장하고 있다는 흐름을 직관적으로 인지할 수 있도록 구성했습니다.

또한 하단에는 “YOGURT BOY” 텍스트를 반복적으로 노출하는 무한 스크롤 구조를 적용하여 사용자의 시야에 브랜드명이 지속적으로 노출되도록 설계했습니다.

이러한 반복 노출 방식은 콘텐츠 흐름을 방해하지 않으면서도 브랜드 인지도를 자연스럽게 각인시키는 역할을 수행합니다.

## 수익 구조를 시각화해 창업 수익성을 직관적으로 설득하는 데이터 기반 UI/UX 설계

![요거트보이 랜딩페이지 구축 사례 캐릭터 브랜딩과 창업 이해도를 높이는 구조 설계](/uploads/naver/jobofbrothers/224243790591-3.webp)

창업을 고려하는 사용자가 가장 중요하게 판단하는 요소인 “수익 구조”를 직관적으로 이해할 수 있도록 설계된 영역입니다.

좌측에는 비용 구조를 파이차트 형태로 시각화하여 재료비, 인건비, 배달 수수료 등 주요 항목의 비율을 한눈에 파악할 수 있도록 구성했으며,

복잡한 수치를 텍스트가 아닌 **시각 정보로 빠르게 인지할 수 있도록 설계** 했습니다.

우측에는 동일한 내용을 표 형태로 정리하여 보다 구체적인 수치 확인이 가능하도록 구성함으로써 직관적 이해와 정확한 정보를 동시에 충족하도록 구성했습니다.

## 슬라이드형 메뉴 UI를 통해 제품 다양성과 운영 확장성 전달

요거트 아이스크림의 다양한 메뉴 구성을 슬라이드 형태로 구성하여 사용자에게 자연스럽게 노출하는 구조로 설계되었습니다.

여러 제품을 한 화면에 과도하게 나열하는 대신, 좌우로 넘기는 인터랙션을 통해 콘텐츠를 단계적으로 탐색하도록 유도하여 사용자의 집중도를 유지하면서도 메뉴 다양성을 효과적으로 전달합니다.

각 메뉴는 동일한 레이아웃과 시각 구조로 구성되어 제품 간 비교가 용이하며, 비주얼 중심의 구성으로 직관적인 이해가 가능하도록 설계되었습니다.

특히 다양한 맛과 조합을 반복적으로 노출함으로써 소비자 관점에서는 선택의 폭을 넓히고 창업자 관점에서는 메뉴 확장성과 운영 유연성을 자연스럽게 인지하도록 유도합니다.

## 단계별 프로세스 UI를 통해 운영의 간편함과 낮은 진입장벽을 직관적으로 전달

![요거트보이 랜딩페이지 구축 사례 캐릭터 브랜딩과 창업 이해도를 높이는 구조 설계](/uploads/naver/jobofbrothers/224243790591-4.webp)

창업을 고려하는 사용자가 느끼는 “운영이 어렵지 않을까?”라는 진입 장벽을 해소하기 위해 설계된 영역입니다.

전체 프로세스를 STEP 1~3의 단계 구조로 단순화하여 사용자가 별도의 설명 없이도 운영 흐름을 직관적으로 이해할 수 있도록 구성했습니다.

하단의 “5분 완성” 메시지를 강조하여 운영 속도와 효율성을 명확하게 각인시키고 짧은 시간 내 제공 가능한 시스템이라는 신뢰를 강화하였습니다.

## 실제 후기 콘텐츠를 전면 배치해 신뢰도를 극대화

실제 이용자의 리뷰를 카드 형태로 배열하고, 이미지와 텍스트를 함께 노출함으로써 단순한 설명이 아닌 **경험 기반 정보** 를 전달하도록 설계되었습니다.

특히 여러 후기를 한 화면에 병렬적으로 배치하여 사용자가 다양한 사례를 빠르게 비교하고 인지할 수 있도록 구성했으며 반복적으로 노출되는 긍정적인 피드백을 통해 제품 만족도에 대한 확신을 자연스럽게 형성하도록 유도합니다.

## 간결한 입력 구조와 명확한 CTA를 통해 문의 전환을 유도

![요거트보이 랜딩페이지 구축 사례 캐릭터 브랜딩과 창업 이해도를 높이는 구조 설계](/uploads/naver/jobofbrothers/224243790591-5.webp)

해당 섹션은 사용자의 최종 행동을 유도하는 문의 전환 중심 영역으로 설계되었습니다.

입력 항목을 필수 정보 위주로 간결하게 구성하여 사용자가 부담 없이 빠르게 작성할 수 있도록 했으며 불필요한 선택 요소를 최소화해 입력 흐름을 단순화했습니다.

또한 좌측에는 폼, 우측에는 브랜드 비주얼을 배치하여 정보 입력 과정에서의 이탈을 방지하고 브랜드 이미지를 동시에 인지하도록 설계했습니다.

CTA 버튼은 시각적으로 강조된 컬러와 충분한 영역을 확보하여 사용자의 시선이 자연스럽게 “제출하기”로 이어지도록 유도했으며,

전체 흐름의 마지막 단계에서 행동을 결정하도록 구조화되었습니다.

---

본 프로젝트는 단순한 브랜드 소개를 넘어 창업을 고려하는 사용자가 자연스럽게 관심을 갖고 문의까지 이어질 수 있도록 전체 흐름을 설계한 것이 핵심이었습니다.

트렌드와 시장성을 기반으로 시작해 메뉴 구성, 수익 구조, 운영 방식, 실제 후기까지 사용자의 의사결정에 필요한 요소를 단계적으로 배치함으로써

단순 정보 전달이 아닌 **설득 중심의 UX 구조** 로 구현했습니다.

특히 각 섹션마다 역할을 명확히 나누고 시각적 요소와 인터랙션을 활용해 복잡한 내용을 직관적으로 이해할 수 있도록 구성한 점이 본 프로젝트의 주요 포인트입니다.

## 출처·근거

- [원문: 네이버 블로그](https://blog.naver.com/jobofbrothers/224243790591) — 잡오브브라더스 (2026-04)