캡처
1 / 3
플라이티 클론 데모 캡처 1
내가 한 일
- Flighty 4.8.2 PC 버전 화면을 캡처하고 정보 구조, 폰트 계층, 카드 구성, 인터랙션 밀도를 분석
- 캡처를 기반으로 Figma에서 원본 디자인을 그대로 클론해 레이아웃 규칙과 시각적 디테일을 학습
- 모바일 환경에 맞춰 폰트 위계, 간격, 컴포넌트 크기, 색상 역할을 다시 정리한 최종 디자인 시안 제작
- Nuxt 3 기반으로 워크스페이스, 인증, 설정, 공통 컴포넌트 데모, 그리드·차트·업로드 UI 골격 구성
- Pinia·Axios·i18n 사전·GitHub Pages base path를 정리해 다국어 확장과 정적 배포를 고려한 구조로 설계
성과
- 원본 서비스 캡처, 디자인 클론, 모바일 재설계까지 이어지는 디자인 학습 과정을 프로젝트 산출물로 정리
- Nuxt 3 + Pinia 기반의 공통 UI 컴포넌트와 데모 페이지를 먼저 구축해 서비스 화면 확장 기반 마련
포인트
- 항공 경험에서 출발한 개인 동기를 서비스 기획과 프론트엔드 학습으로 연결한 클론 프로젝트
- 영어 중심 서비스의 한계를 다국어 지원 과제로, 기체 이미지 부족을 데이터·자산 확장 과제로 재정의
- 실제 서비스를 그대로 따라 만드는 단계에서 끝내지 않고, 모바일 사용성과 디자인 시스템 관점으로 다시 해석