프로젝트 배경
2026년 1월 미국 뷰티 박람회 참가를 앞두고, 글로벌 바이어에게 K-Beauty 트렌드를 효과적으로 전달할 프레젠테이션 도구가 필요했습니다. 기존 PDF나 PPT 방식은 바이어 미팅 시 화면 공유와 인터랙션에 한계가 있었고, 전시 부스 인쇄물과 디자인 톤앤매너가 분리되는 문제가 있었습니다.
달성 목표
1. 바이어 프레젠테이션용 웹 트렌드북
- 온·오프라인 미팅에서 바이어와 함께 화면을 보며 설명할 수 있는 인터랙티브 웹진
- 9페이지 구성의 K-Beauty 산업 소개 콘텐츠
2. 디자인 통일성 확보
- 웹 트렌드북과 전시 부스 인쇄물 간 일관된 비주얼 아이덴티티
- 듀얼 테마 디자인 시스템(Mushroom/Magazine)으로 브랜드 일관성 유지
3. 개발 효율성 극대화
- 단발성 이벤트용 페이지로 개발 공수 최소화
- Rails 8 + Tailwind CSS로 빠른 프로토타이핑
- 디자인 퀄리티에 리소스 집중
달성 목표
1. 바이어 프레젠테이션용 웹 트렌드북
- 온·오프라인 미팅에서 바이어와 함께 화면을 보며 설명할 수 있는 인터랙티브 웹진
- 9페이지 구성의 K-Beauty 산업 소개 콘텐츠
2. 디자인 통일성 확보
- 웹 트렌드북과 전시 부스 인쇄물 간 일관된 비주얼 아이덴티티
- 듀얼 테마 디자인 시스템(Mushroom/Magazine)으로 브랜드 일관성 유지
3. 개발 효율성 극대화
- 단발성 이벤트용 페이지로 개발 공수 최소화
- Rails 8 + Tailwind CSS로 빠른 프로토타이핑
- 디자인 퀄리티에 리소스 집중
프로젝트 성과
듀얼 테마에서도 통일된 UX를 제공하는 디자인 토큰 시스템 구축
듀얼 테마에서도 통일된 UX를 제공하는 디자인 토큰 시스템 구축
확장성: 재사용 가능한 26개+ 레이아웃 패턴 라이브러리
확장성: 재사용 가능한 26개+ 레이아웃 패턴 라이브러리
핵심 기능



듀얼 테마 디자인 시스템
Mushroom(다크)과 Magazine(라이트) 2가지 테마를 CSS 디자인 토큰으로 관리. 웹과 인쇄물 간 컬러 일관성 확보.



9페이지 인터랙티브 웹 트렌드북
K-Beauty 산업을 Origin → Philosophy → Brands → Global 순서로 소개하는 매거진 스타일 웹진. 바이어 미팅 시 페이지 단위 프레젠테이션에 최적화.

반응형 네비게이션
드롭다운 메뉴 3개 카테고리 + 모바일 풀스크린 사이드바. Sticky Header로 스크롤 시에도 네비게이션 유지.


비주얼 인터랙션
이미지 캐러셀, SVG Wave Divider 섹션 전환, 카드/버튼 호버 애니메이션으로 프레젠테이션 몰입감 강화.
진행 단계
요구사항&scoping
2025.12.
요구사항&scoping
레퍼런스 수집및, 러프디자인
2025.12.
구현방법 탐색&확정
섹션디자인 페이지구현
2025.12.
섹션디자인 페이지구현
컨텐츠 자료수집+ 페이지구현
2025.12.
실컨텐츠 + 페이지구현,랜딩페이지구현,네비바
프로젝트 상세
1. 9페이지 디지털 매거진
- Identity & Philosophy (K-Beauty의 기원과 철학)
- Brand Reports (아모레퍼시픽, LG생활건강, COSRX 분석)
- Global Market (국내외 시장 트렌드)
2. 듀얼 테마 디자인 시스템
2스타일을 시안으로 제공함으로써 클라이언트가 다양한 옵션을 선택후 커스텀할수 있도록 도와드렸습니다.
https://webzine.jumpriq.com/magazine/sections
https://webzine.jumpriq.com/magazine/mushroom_sections
- Mushroom Theme: 다크 모드, 자연 영감 컬러 (#384742, #F8D917)
- Magazine Theme: 라이트 모드, 에디토리얼 스타일
3. 26개+ 레이아웃 패턴 라이브러리
- 3-column Kinfolk 스타일
- Mode Magazine 분할 레이아웃
- Wave Divider 섹션 전환
- 이미지 갤러리 & 캐러셀
4. 반응형 네비게이션
- 드롭다운 메뉴 시스템
- 모바일 사이드바 (터치 & 키보드 접근성)
- Identity & Philosophy (K-Beauty의 기원과 철학)
- Brand Reports (아모레퍼시픽, LG생활건강, COSRX 분석)
- Global Market (국내외 시장 트렌드)
2. 듀얼 테마 디자인 시스템
2스타일을 시안으로 제공함으로써 클라이언트가 다양한 옵션을 선택후 커스텀할수 있도록 도와드렸습니다.
https://webzine.jumpriq.com/magazine/sections
https://webzine.jumpriq.com/magazine/mushroom_sections
- Mushroom Theme: 다크 모드, 자연 영감 컬러 (#384742, #F8D917)
- Magazine Theme: 라이트 모드, 에디토리얼 스타일
3. 26개+ 레이아웃 패턴 라이브러리
- 3-column Kinfolk 스타일
- Mode Magazine 분할 레이아웃
- Wave Divider 섹션 전환
- 이미지 갤러리 & 캐러셀
4. 반응형 네비게이션
- 드롭다운 메뉴 시스템
- 모바일 사이드바 (터치 & 키보드 접근성)

섹션디자인 선택

섹션디자인선택_매거진스타일










