Uno Platform으로 멋진 여행사 랜딩 페이지 만들기 — My WOW Factor 챌린지 제출 🤩
Source: Dev.to
Overview
이 제출물은 AI Challenge for Cross‑Platform Apps – WOW Factor에 대한 것입니다. Uno Platform Hot Design Challenge에서 인스타그램 스타일 프로필 페이지를 완성한 뒤, 더 큰 무언가를 만들고 싶어졌습니다: Uno Platform만을 사용해 만든 현대적이고 깔끔한 여행사 랜딩 페이지. 목표는 단순했습니다—심사위원들이 “WOW”라고 말하게 만드는 것.
WOW Factor Prompt
프롬프트는 시각적으로 매력적인 홈 화면을 요구했습니다. 여행사 랜딩 페이지는 자연스럽게 다음을 제공합니다:
- 대담한 히어로 섹션
- 그라디언트 오버레이
- 아름다운 이미지가 있는 목적지 카드
- 콜‑투‑액션 버튼
- 부드러운 수직 스크롤링
- 애니메이션을 위한 공간(예: 콘페티 효과)
- 강렬한 감성 비주얼
이 요소들은 요구되는 “WOW Factor”를 전달하기에 이상적입니다.
Goals
| Goal | Description |
|---|---|
| 생동감 있는 히어로 섹션 | 큰 이미지, 레이어드 레이아웃, 페이지 로드 시 트리거되는 콘페티 애니메이션. |
| 부드러운 수직 스크롤링 | 유동적인 스크롤 동작을 통한 몰입형 스토리텔링. |
| 목적지 카드 (모의 데이터) | 깔끔한 카드, 둥근 모서리, 은은한 그림자, 반응형 이미지. |
| 섬세한 애니메이션 | 성능에 영향을 주지 않으면서 즐거움을 더하는 소규모 전환 및 UI 효과. |
| 깨끗하고 구조화된 XAML | 읽기 쉽고, 모듈화되어 있으며, 확장이 용이함. |
Implementation Details
새로운 Uno Platform 프로젝트를 시작하고 다음을 활용했습니다:
- 모의 데이터 및 시각 자산 – 목적지 정보, 히어로 사진, 배경 이미지.
- Grid & StackPanel 레이아웃 구성 – Uno는 이러한 레이아웃을 플랫폼 전반에 걸쳐 일관되게 처리합니다.
- 버튼 및 CTA – 반응형이며 시각적으로 대담함.
- 애니메이션 – 페이지 로드 시 트리거되는 가벼운 콘페티 애니메이션과 기타 작은 UI 전환.
그 결과, 크로스‑플랫폼 UI가 성능과 시각적 매력을 동시에 가질 수 있음을 보여줍니다.
Demo & Repository
- Full Demo Video 🎥
- GitHub Repository 🐈
프로젝트가 마음에 드신다면, 저장소에 ⭐ 별표를 눌러 주세요—저장소 성장에 큰 도움이 되며, 더 많은 창의적인 오픈‑소스 Uno 앱을 만들 동기가 됩니다.
Key Takeaways
- 올바른 도구가 있으면 창의성이 빛난다 – Uno의 레이아웃 시스템은 여행사 테마와 완벽히 어울립니다.
- 애니메이션은 복잡할 필요가 없다 – 작은 콘페티 효과 하나만으로도 엄청난 개성을 부여할 수 있습니다.
- 디바이스 전반에 일관된 시각 디자인 – 하나의 코드베이스로 일관된 결과를 얻습니다.
- 감성 흐름이 랜딩 페이지 성공을 이끈다 – 여백, 비주얼, 색상, 움직임이 사용자를 자연스럽게 안내합니다.
Acknowledgements
이 챌린지를 시작하고 개발자들이 창의성을 탐구하도록 격려해 주신 Uno Platform 팀에 감사드립니다. 두 번째 제출은 계획된 것이 아니었지만, 창의성은 허가를 기다리지 않으니까요. 인스타그램 페이지를 만들면서 무언가가 촉발되었고, 여행사 홈페이지를 통해 더 많은 시각 아이디어, 애니메이션, 레이아웃 패턴을 탐험할 수 있었습니다.
“WOW”, 조금이라도. 🤩
Made with 💙 by Hadil Ben Abdallah