드림카드 프로젝트는 사용자 경험을 극대화하고, 개인정보 보호를 철저히 하기 위해 다양한 기능과 최적화된 기술을 도입했다. 이번 블로그에서는브라우저 최적화,실시간 자동 저장,인터랙션 강화등 이를 구현하게 된 이유와 사용자와 데이터를 보호하기 위해 기울인 노력들을 공유하고자 한다.
🎎 팀 도비가 개발한 드림카드 서비스에 대한 간단한 서비스 소개
드림카드는 사용자가 직접 모바일 청첩장을 커스텀 할 수 있는 서비스로, 소중한 결혼의 기억을 더욱 특별하게 간직할 수 있도록 도와준다.
💡 사용자 경험(UX) 측면의 개선
► 1. 브라우저 최적화
👀 이 기능을 구현한 이유는?
청첩장 완성페이지(미리보기)는 사용자가 처음 접근했을 때 빠르게 로딩되어야만 긍정적인 첫인상을 남길 수 있다. 결혼식 초대라는 특성상 다양한 기기에서 접속할 가능성이 높아 최적화된 속도와 반응성을 제공하기 위해 이 방식을 선택했다. 또한 완성된 청첩장을 보는 사용자들이 스크롤을 내릴 때 loading UI나 error가 뜨지않도록 하기 위함이다.
✨ 구현방법
Next.js의 SSG(Server-Side Generation) 기법을 사용해 사용자가 청첩장 페이지에 접근했을 때 완성된 청첩장을 볼 수 있게 해 즉각적으로 내용을 확인할 수 있도록 했다. 또한 CSR에서 작업한 페이지는 TanStack Query를 이용한 데이터 캐싱을 통해 페이지의 반응 속도를 극대화했다.
► 2. 스크롤 연동 인터랙션 강화
👀 이 기능을 구현한 이유는?
사용자 경험을 시각적으로 강화하고, 현재 작업 단계를 인식하기 쉽게 만들어 사용자의 집중력을 높이기 위해 이 기능을 추가했다.
✨ 구현방법
Intersection Observer API를 활용해 특정 섹션이 뷰포트에 진입하면 자동으로 해당 섹션을 감지하도록 구현했다. 이를 통해 사용자가 청첩장을 제작할 때 어느 단계에 있는지 직관적으로 파악할 수 있도록 했다. 또한, 제작 단계와 연결된 메뉴가 자동으로 활성화되어 사용자가 단계별로 쉽게 따라갈 수 있도록 했다.
► 3. 후기 무한 스크롤
👀 이 기능을 구현한 이유는?
사용자들이 청첩장 후기들을 더 쉽게 탐색하고, 피드 형식으로 끊임없이 콘텐츠를 자연스럽게 소비할 수 있도록 하기 위해 도입했다.
✨구현방법
useInfiniteQuery와 Intersection Observer API를 사용하여 후기 페이지에서 무한 스크롤 기능을 구현했다. 이를 통해 사용자가 페이지를 이동하거나 클릭하지 않아도 자동으로 콘텐츠를 추가 로드해 끊김 없는 사용자 경험을 제공했다.
► 4. 스켈레톤 UI & 로딩 UI
-스켈레톤 UI-
-로딩 UI-
👀 이 기능을 구현한 이유는?
완성된 청첩장 Form을 데이터베이스에 저장하고 데이터를 불러오는 과정에서 시간이 소요되었다.
이를 보완하기 위해 페이지 로딩 중에도 사용자가 불편하지 않도록 스켈레톤 UI와 로딩 UI를 적용했다. 이를 통해 페이지 로딩 시간을 체감적으로 줄이고, 원활한 사용자 경험을 제공했다.
✨ 구현방법
Tanstatck Query에서 useQuery, useMutation으로 데이터들을 불러오고 업로드할 때 isLoading을 활용하여 로딩 UI와 스켈레톤 UI 컴포넌트를 생성하여 로딩 상태일 때 UI를 띄워줄 수 있도록 로직을 작성해주었다.
🔄 개발 중 추가된 기능들
개발을 진행하면서 사용자 피드백과 실제 사용성을 고려해 추가적으로 다음의 기능들을 구현했다.
► 1. 후기 작성에서의 바텀시트 UI와 전역 상태 관리
❓ 추가된 이유는?
후기 작성을 할 때 창을 이동하는 것은 또 다른 탭의 전환으로 사용자들이 부담을 느낄 수도 있을 것 같다는 의견이 있었다. 창의 이동이 없이 하단 탭에서 버튼을 눌러 후기를 작성하는 간편한 방법으로 참여도를 높이고자 하였다.
✨ 구현방법
Zustand를 이용한 전역 상태 관리와 바텀시트 UI를 도입했다. 이를 통해 사용자는 한 화면에서 모든 기능을 빠르게 접근할 수 있다.
► 2. 마이페이지 진척도 현황 표시
✨ 구현방법
청첩장 데이터는 큰 객체 안에 여러 필드로 나뉘어서 저장이 되어있다.
기본값으로 설정해준 객체 데이터와 데이터베이스에 저장되어있는 값이 각 필드에서 하나라도 변경이 되었다면 그 필드는 완성이 된 것으로 판단하여 진척률을 나타낼 수 있도록 하였다.
lodash의 isEqual을 활용하여 객체의 깊은 비교를 할 수 있도록 진행하였고 깊은 비교를 하기 전
객체 내부의 각 필드의 depth가 다른 점을 고려해 배열형태인지 객체형태인지 구분을 하고 내부에서의 깊은 정렬을 하여 올바른 비교를 할 수 있도록 로직을 작성하였따.
사용자의 청첩장 작성 진척도를 시각적으로 표시했다. 이를 통해 사용자는 현재 작업의 완성도를 쉽게 파악하고, 빠진 부분을 확인하여 더 완성도 높은 청첩장을 제작할 수 있도록 했다.
❓ 추가된 이유는?
초반에는 진척도 표시가 없었으나, 사용자들이 어느 정도 완성했는지 알기 어렵고, 완성을 시키는데 도움이 될 것 같다는 의견이 반영되었다.
► 3. 사파리 최적화
❓ 추가된 이유는?
베타 테스트 중 사파리에서 디자인 깨짐 현상이 발생해 이를 해결하기 위한 최적화 작업을 추가했다.
✨ 구현방법
하단의 메뉴바 높이만큼 지정을 해주어 safari메뉴바에 의해 창이 가려지지 않도록 디자인 해주었다. 이를 통해 모든 기기에서 일관된 사용자 경험을 제공했다.
► 4. 실시간 자동 저장 기능 (시간별)
❓ 추가된 이유는?
초기에는 사용자가 저장 버튼을 누르거나 제작박스에서 다음 버튼을 눌러야만 데이터가 저장되는 방식이었으나, 브라우저 이탈이나 새로고침, 스크롤에 따라 아래 필드가 자동으로 바뀌기 때문에 필드를 옆으로 넘겨 데이터를 변경하지 않은 사용자들로 인한 데이터 손실이 잦아 자동 저장 기능을 추가했다.
청첩장 작성 중 새로고침이나 브라우저 닫힘으로 인해 데이터가 유실되는 문제를 해결하기 위해 도입했다.
✨ 구현방법
Debounce를 활용하여 사용자가 입력 중일 때는 저장을 지연시키고, 일정 시간이 지난 후에만 데이터를 저장하도록 했다.
스크롤 하면서 Input이 바뀌어도 저장되지 않는 문제를 해결하여, 사용자가 필드를 옆으로 넘기면서 작성하더라도 자동으로 실시간 저장이 가능하게 했다.
🔒 개인정보 보호를 위한 노력
► 1. 개인정보 저장 기간과 URL 접근 제한
👀 이 기능을 구현한 이유는?
청첩장 링크가 외부로 공유될 가능성을 고려해 프라이버시를 강화하고, 데이터 노출을 방지하기 위함이었다. 또한 데이터베이스에 저장되어있는 데이터들을 관리하여 비용적인 측면에서 효율적으로 관리하기위해서 이 기능을 구현하게 되었다.
✨ 구현방법
사용자의 민감한 정보가 담긴 URL은 일정 시간이 지나면 자동 삭제되도록 설계했다. 또한, 개인정보 저장 기간을 최소화하여 사용자 데이터를 안전하게 보호했다.
► 2. 세션 스토리지로 데이터 저장
👀 이 기능을 구현한 이유는?
외부에서 접근할 가능성을 차단하고, 사용자가 예기치 않게 민감한 정보를 입력했을 때 안전하게 보호하기 위해 변경했다.
✨ 구현방법
민감한 데이터를 로컬 스토리지에서 세션 스토리지로 변경했다. 이를 통해 브라우저가 닫히면 데이터가 자동으로 삭제되도록 하여 개인정보 유출 위험을 최소화했다.
► 3. 토글 버튼을 사용하여 URL을 타인이 접근했을 떄 마이페이지의 청첩장 공개 여부에 따라 접근처리
👀 이 기능을 구현한 이유는?
사용자가 이미 청첩장 링크를 외부에 공개했더라도 추후에 예식장소나 계좌정보등 중요한 정보가 잘못 입력된 상황을 대비하고 수정할 때 비공개 처리하여 정확한 서비스를 제공하고 개인정보를 보호하기 위해서이다.
✨ 구현방법
TanStack Query의 useMutation을 활용하여 사용자의 토글에 따라 서버의 데이터를 수정할 수 있도록 하고 useQuery로 데이터베이스의 공개상태여부를 가져와 그에 따라 청첩장에 접근할 수 있도록 설정해주었다.
🚀 결론
이 모바일 청첩장 서비스는 사용자 편의성과 개인정보 보호를 동시에 고려한 설계로, 사용자가 편리하게 서비스를 이용하면서도 개인정보를 안전하게 보호할 수 있는 다양한 기능을 제공하고 있다. 디자인 자유도, 임시저장 기능, 체험 서비스 제공, 세션 기반 저장, 캡처 방지 등의 기능을 통해 사용자 경험을 최적화하고, 개인정보와 민감한 정보에 대한 보안을 강화한 점이 매우 중요한 부분이었다.
🌟 느낀점
이번 프로젝트를 진행하면서 비교적 짧은 시간 안에 기획을 마치고 바로 개발에 착수했다. 이를 통해 서비스를 개발할 때에는 UI/UX적인 고려뿐만 아니라, 개인정보 보호와 관련된 다양한 규약과 제약을 철저히 준수해야 한다는 점을 실감했다.
특히 기획 단계에서 다양한 시뮬레이션과 사용자 관점에서의 고민을 충분히 반영하는 것이 중요하다는 것을 배웠다. 이를 통해 서비스 초기 단계에서부터 중요한 요소들을 설계하고 구현할 수 있었고, 사용자가 더욱 안전하고 편리하게 이용할 수 있는 서비스를 제공하기 위해 초기 설계 단계의 중요성을 다시 한번 깨닫게 됐다.
