Next.js 기반 투표 앱 EasyPollVote 개발 일지 #2: UI/UX 개선 및 기능 구현
by DD
3개월 전
조회수 24
Next.js 기반의 투표 애플리케이션 EasyPollVote(EasyPV)의 두 번째 개발 일지 공개
UI/UX 개선을 통해 사용자 인터페이스(UI)를 개선하고, PokeAPI를 활용한 데모 투표 기능 구현
사용자 정의 투표 생성 기능 구현 및 Supabase를 활용한 데이터베이스 설계
투표 종료일 설정, 중복 투표 방지 등 향후 기능 구현 계획 발표
PokeAPI를 활용한 동적 데이터 로딩
본문에서는 PokeAPI를 사용하여 포켓몬 데이터를 동적으로 로딩하는 방법을 설명한다.
`fetchOne` 함수: PokeAPI에서 포켓몬 이름, 이미지, 색상 정보를 비동기적으로 가져옴
`getWeeklyPokemonIds` 함수: 매주 다른 포켓몬을 보여주기 위해 주차별 ID를 계산
`Promise.all`: 병렬로 API 호출하여 데이터 로딩 속도 개선
이러한 방식을 통해 사용자는 매주 새로운 포켓몬을 선택할 수 있으며, API 호출 실패에 대한 예외 처리가 필요하다.
Supabase를 활용한 데이터베이스 설계
글에서는 사용자 정의 투표 기능을 위해 Supabase를 사용하여 데이터베이스를 설계한 내용을 다룬다.
Poll 테이블: 투표 제목, 종료일, 종료 여부 등 투표 관련 기본 정보 저장
VoteOptions 테이블: 투표 옵션 텍스트, 투표 수, 색상 정보 등 투표 옵션 관련 정보 저장
관계 설정: Poll 테이블 ID를 VoteOptions 테이블의 외래 키(Foreign Key)로 설정하여 데이터 무결성 보장
향후 중복 투표 방지, 투표 결과 시각화 등 추가 기능 구현을 위한 데이터베이스 구조 개선이 필요하다.
Next.js 환경에서의 UI/UX 개선
개발자는 Next.js 환경에서 UI/UX 개선을 위해 다양한 시도를 했다.
Front Page UI 변경: 스크롤 최소화를 통해 사용자 경험(UX) 향상
반응형 디자인(Responsive Design): 모바일 환경에서도 최적의 UI 제공
컴팩트한 레이아웃: 정보 밀도(Information Density)를 높여 사용자 편의성 증대
UI/UX 개선은 사용자 참여율을 높이는 데 중요한 역할을 하며, 지속적인 사용자 피드백(User Feedback)을 반영하여 개선해 나가야 한다.
향후 기능 구현 계획 및 개선 방향
개발자는 EasyPollVote의 향후 기능 구현 계획을 공유하며, 지속적인 개선을 예고했다.
중복 투표 방지 기능: 데이터베이스 레벨에서 제약 조건(Constraint) 설정을 통해 구현 예정
투표 종료일 기능: 서버 측에서 투표 종료 여부 확인 및 UI 업데이트
투표 결과 시각화: 차트 라이브러리(Chart Library)를 활용하여 투표 결과 시각화
지속적인 기능 추가와 사용자 피드백 반영을 통해 EasyPollVote의 완성도를 높여갈 계획이다.
![EasyPollVote [Dev Log #2]](https://static.devday.kr/thumbnails-w1200/devto-3512805-a0480242.webp)
