드론아레나
본 프로젝트는 기존 드론 아레나 웹사이트의 UI 구성 및 퍼블리싱 구조를 정리·개선하는 작업으로, 기존에 분리되어 있던 PC·모바일 화면의 불일치 요소를 통합하고 디자인 일관성과 반응형 대응력을 강화하는 것을 주요 목표로 진행되었습니다.
전체 시스템 개발이나 기능 확장보다는,기존 페이지의 레이아웃 구조를 재정비하고 시각적 완성도를 높이는 방향으로 작업이 수행되었습니다.
제작 기간2025. 08 - 2025. 09
고객사드론아레나
사용 기술React.js, TypeScript, Vite
서비스
미리보기
미리보기
고객 요구사항
& 프로젝트 방향
& 프로젝트 방향
클라이언트의 인터뷰 및 협의를 통해 프로젝트의 핵심 요구사항을 도출하였으며, 인사이트를 바탕으로 사용자 경험과 브랜드 관점에서 개선이 필요한 5가지를 기반으로 설계하였습니다.
1.
페이지별로 일관되지 않던 UI를 통일된 디자인 시스템으로 재정비
2.
헤더·푸터·버튼·입력 폼 등 공통 UI 요소의 시각적 일관성 확보
3.
중복 CSS를 제거하고 Media Query 기반 반응형 구조로 퍼블리싱 코드 정리
4.
공통 컴포넌트를 단위 관리하고 스타일 가이드 문서화로 협업 일관성 제공
5.
모바일 접근성과 유지보수 편의성을 높여 브랜드 완성도 강화
타이포 그래피
& 컬러 시스템
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.
타이포 그래피
& 컬러 시스템
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.
