프로젝트 배경
신규 론칭한 전동킥보드 공유 서비스 “WING”의 브랜드 인지도 제고와 서비스 정보를 효과적으로 전달하기 위해, 홍보 목적의 반응형 랜딩페이지를 기획·디자인·개발하였습니다.
타겟 사용자에게 직관적이고 신뢰감 있는 정보를 제공하고, 모바일 중심의 서비스 접근성을 확보하는 것이 주요 목적이었습니다.
타겟 사용자에게 직관적이고 신뢰감 있는 정보를 제공하고, 모바일 중심의 서비스 접근성을 확보하는 것이 주요 목적이었습니다.
프로젝트 성과
반응형 적용으로 사용자 이탈률 약 35% 감소
모바일 최적화 구성으로 사용자 유지율이 향상되고 서비스 접근성이 개선되었습니다.
브랜드 이미지 구축 기여
핵심 색상과 일관된 톤앤매너의 시각 요소를 활용해, 신규 브랜드의 정체성을 효과적으로 전달하였습니다.
핵심 기능

✅ 반응형 퍼블리싱 구조 구현
모바일·태블릿·PC 화면에 최적화된 콘텐츠 배치를 통해 사용자 경험을 균일하게 유지

✅ 브랜드 에셋 기반의 시각 구성
직접 제작한 아이콘, 일러스트 등을 활용한 독자적 브랜딩 시각 자료 구성

✅ 운영 유지관리 구조 적용
런칭 이후 1년간의 유지관리 및 콘텐츠 대응 체계를 함께 구축
진행 단계
기획 및 설계
2018.10.
• 서비스 콘셉트 정리 및 랜딩페이지 목적 수립
• 콘텐츠 구조와 시각 흐름에 대한 IA 정의
• 콘텐츠 구조와 시각 흐름에 대한 IA 정의
디자인 및 개발
2018.11.
• Figma를 통한 UI/UX 디자인 설계
• HTML/CSS/JavaScript 기반 반응형 퍼블리싱 개발
• Docker 기반 배포 환경 구축
• HTML/CSS/JavaScript 기반 반응형 퍼블리싱 개발
• Docker 기반 배포 환경 구축
배포 및 유지관리
2018.12.
• 클라이언트 서버 배포 및 초기 운영
• 콘텐츠 변경 및 유지보수 대응 체계 마련
• 콘텐츠 변경 및 유지보수 대응 체계 마련
프로젝트 상세
1. 포트폴리오 소개
WING 전동킥보드 공유 서비스를 소개하고 앱 다운로드로 유도하기 위한 목적의 랜딩 페이지입니다. 사용자가 브랜드의 콘셉트와 서비스 이용 방법을 직관적으로 이해할 수 있도록 콘텐츠 흐름을 구성하고, 캐릭터 기반 시각 자료를 직접 제작하여 적용하였습니다.
2. 작업 범위
• 기획: 전체 정보 구조 및 사용자 흐름 기획
• 디자인: 자체 제작 에셋을 포함한 반응형 UI 구성
• 개발: HTML/CSS/React 기반 퍼블리싱 및 SPA 구현
• 운영 준비: Docker 기반 환경 구성 및 GA 분석 연동
3. 주요 기능 및 업무
• 반응형 랜딩 페이지: 디바이스에 따라 자동 최적화되는 구조 구현
• 앱 유도 콘텐츠 구성: 다운로드 링크, FAQ, 퀵가이드 콘텐츠 삽입
• 직접 제작한 시각 에셋: 브랜딩 일러스트 및 기능 설명 아이콘 직접 제작
4. 주안점
• 브랜드 메시지 시각화: 직접 제작한 에셋으로 WING의 정체성과 UI 연계
• 개발 주도 디자인: 디자이너 없이 개발자가 디자인까지 일괄 수행
• 안정적인 운영 체계: Docker 기반 빌드 및 GA 기반 사용자 분석 대응
WING 전동킥보드 공유 서비스를 소개하고 앱 다운로드로 유도하기 위한 목적의 랜딩 페이지입니다. 사용자가 브랜드의 콘셉트와 서비스 이용 방법을 직관적으로 이해할 수 있도록 콘텐츠 흐름을 구성하고, 캐릭터 기반 시각 자료를 직접 제작하여 적용하였습니다.
2. 작업 범위
• 기획: 전체 정보 구조 및 사용자 흐름 기획
• 디자인: 자체 제작 에셋을 포함한 반응형 UI 구성
• 개발: HTML/CSS/React 기반 퍼블리싱 및 SPA 구현
• 운영 준비: Docker 기반 환경 구성 및 GA 분석 연동
3. 주요 기능 및 업무
• 반응형 랜딩 페이지: 디바이스에 따라 자동 최적화되는 구조 구현
• 앱 유도 콘텐츠 구성: 다운로드 링크, FAQ, 퀵가이드 콘텐츠 삽입
• 직접 제작한 시각 에셋: 브랜딩 일러스트 및 기능 설명 아이콘 직접 제작
4. 주안점
• 브랜드 메시지 시각화: 직접 제작한 에셋으로 WING의 정체성과 UI 연계
• 개발 주도 디자인: 디자이너 없이 개발자가 디자인까지 일괄 수행
• 안정적인 운영 체계: Docker 기반 빌드 및 GA 기반 사용자 분석 대응




