2022년도 ~ 2024년도의 스테이폴리오

스테이폴리오 안내

한 줄 소개: 독창적 숙박 경험을 제공하는 큐레이션 플랫폼
팀원 / 프로덕트팀 / 여행업 / 서울 종로구
기술 스택: TypeScript, Next.js, React, ContextAPI, Redux, AntDesign (admin), Material-UI (main)
주요 업무: 다국어 지원 (일본어), 프리오더, 프로모션 (웹 서비스)

프로젝트 주요 성과

글로벌 사용자 경험 개선 : 다국어 지원을 통한 글로벌 사용자 확보

문제: 해외 사용자들이 자신의 언어로 서비스를 이용하지 못해 불편을 겪고, 이로 인해 사용자 이탈이 발생했습니다. 특히 일본어 사용자의 경우, 한자와 특수 문자를 많이 사용하여 글자 크기와 줄 간격 등 CSS 스타일 조정이 필요했고, 번역 과정에서 원본과 차이가 생겨 중요한 정보 전달이 어려운 문제가 있었습니다.
해결 방안 및 선택 이유:
- i18next 라이브러리를 활용한 다국어 지원 구현: i18next는 프론트엔드에서 다국어 지원을 쉽게 확장하고 관리할 수 있는 라이브러리로, 다국어 포맷팅과 복수형 처리 등 글로벌 서비스 운영에 필요한 기능을 지원합니다. 이를 통해 번역 데이터를 JSON 형식으로 관리하여 필요한 언어만 동적으로 로딩할 수 있게 구성했고, 유지보수도 용이해졌습니다.
- JSON 기반 번역 데이터 관리와 목업 데이터 활용: 일부 번역 데이터를 JSON 형식으로 저장함으로써 다국어 데이터를 쉽게 관리할 수 있었습니다. 초기 개발 단계에서 목업 데이터를 활용해 API가 준비되지 않은 상황에서도 다국어 기능을 미리 구현하고 테스트할 수 있어 개발 속도가 향상되었으며, 빠르게 피드백을 반영할 수 있었습니다.
- URL에 언어 코드 포함 및 상태 유지: URL에 언어 코드를 포함하여 사용자가 언어를 변경해도 페이지 리로드 시 선택한 언어가 유지되도록 설계했습니다. 이 방식으로 사용자 경험이 개선되었고, 사용자는 원하는 언어로 지속적인 서비스 이용이 가능해졌습니다.
- CSS 조정을 통한 일본어 페이지 UI 최적화: 일본어의 언어적 특성으로 인해 생기는 가독성 문제를 해결하기 위해 글자 크기와 줄 간격을 조정하고, word-break 속성을 추가해 일본어 페이지에서 시각적으로 안정적인 UI를 제공했습니다. 이를 통해 일본어 사용자에게 더욱 편리한 환경을 제공할 수 있었습니다.
- 백엔드와의 협업을 통한 다국어 데이터 제공: 다국어 데이터를 백엔드 RESTful API를 통해 admin이나 host URL에서 받아와 i18next와 옵셔널 체이닝을 활용하여 안정적으로 데이터를 처리했습니다. 이를 통해 데이터가 없거나 지연될 경우에도 앱이 문제없이 작동할 수 있도록 했고, 백엔드와의 긴밀한 협업으로 필요한 데이터 구조를 유연하게 제공받아 개발의 효율성을 높였습니다.
성과 및 개선 효과: 다국어 지원과 UX 개선을 통해 해외 사용자들이 자신들의 언어로 편리하게 서비스를 이용할 수 있게 되면서 전반적인 만족도가 상승했습니다. 특히 일본어 페이지의 UI를 최적화하여 사용자들의 가독성을 높였고, 일본어 사용자의 피드백이 긍정적으로 바뀌었습니다. 다국어 지원과 UX 강화로 글로벌 사용자 유입이 늘어났고, 해외 사용자 이탈률이 눈에 띄게 줄어드는 성과를 거두었습니다.

프리오더 및 프로모션 페이지 사용자 인터렉션 개선

문제:
숙소 이미지를 세로로 나열한 레이아웃으로 인해 사용자들이 여러 사진을 보기 위해 계속 스크롤해야 하는 불편함이 있었습니다. 이로 인해 숙소 정보를 직관적으로 탐색하기 어렵다는 피드백이 있었습니다. 또한, 프로모션과 프리오더 페이지의 데이터 구조가 일관되지 않아 마케팅 팀이 페이지 간 데이터를 통합하여 분석하기 어려운 상황이었습니다.
사용자 관점에서의 개선:
프리오더 페이지에 이미지 슬라이더 기능을 추가하여 숙소 이미지를 직관적으로 넘길 수 있도록 개선했습니다. 이를 통해 사용자는 더 쉽게 여러 사진을 탐색할 수 있었고, 시각적인 몰입감이 향상되었습니다.
관리자 관점에서의 개선:
프로모션과 프리오더 페이지의 데이터 구조를 통합하여 마케팅 팀이 각 페이지 데이터를 일관성 있게 분석할 수 있도록 지원했습니다. 페이지 코드의 일관성을 높이고, 코드 재사용을 통해 파일을 간소화하여 유지보수 효율성을 강화했습니다. GA4와 UTM 링크를 통해 사용자 행동 데이터를 분석할 수 있는 환경을 구축하고, 배포 테스트 페이지를 활용한 간단한 A/B 테스트를 진행하여 클릭 패턴과 유입 경로를 확인했습니다. 이 테스트를 통해 초기 탐색 패턴을 파악하고 UI 개선의 방향성을 잡을 수 있었습니다.
프리오더 페이지의 국가별 데이터 관리에서는 해외 사용자도 많은 프리오더 페이지의 특성을 고려하여 백엔드와 협업하여 엑셀로 데이터를 관리할 수 있는 기능을 추가했습니다. 관리자 페이지에서 국가 코드를 별도로 관리할 수 있도록 구성하여 해외 사용자 데이터를 효율적으로 분류하고 관리할 수 있게 했습니다.
성과 및 개선 효과:
UX 개선으로 인해 페이지 체류 시간이 증가하며 사용자 경험이 향상되었습니다. 이미지 슬라이더 도입으로 탐색이 직관적이었고, 사용자 피드백 또한 긍정적으로 변했습니다. 데이터 구조 통합을 통해 마케팅 팀의 데이터 활용과 협업 효율성이 강화되었고, GA4와 UTM 링크로 수집한 사용자 행동 데이터는 보다 효과적인 마케팅 전략 수립에 기여했습니다. 국가별 데이터 관리 기능은 글로벌 사용자의 데이터를 체계적으로 관리할 수 있는 기반을 제공하여 관리의 편의성을 높였습니다.

CSS 사용량 최적화 : 컴포넌트 기반의 스타일링 체계 구축

문제:
기존 CSS 구조에서 전역 스타일 충돌이 빈번하게 발생했으며, 특히 외부에서 가져온 CSS 파일들이 스타일 우선순위 문제를 일으켜 특정 페이지의 요소가 정상적으로 보이지 않는 상황이 자주 발생했습니다. 새로운 기능 추가 시에도 예상치 못한 스타일 변경이 생겨 유지보수가 어려웠습니다.
사용자 관점에서의 개선:
사용자 경험을 개선하기 위해, Styled-Components를 도입하여 CSS를 컴포넌트 단위로 관리하는 구조를 구축했습니다. 이를 통해 컴포넌트별로 필요한 스타일만 로드하여 UI 안정성을 보장할 수 있었습니다. 또한, 동적 스타일이 필요한 경우 props로 스타일을 제어할 수 있어 다양한 사용자 상호작용을 효율적으로 구현할 수 있었습니다. 정적 스타일링이 필요한 부분에는 CSS 모듈을 적용하여 전역 스타일 오염을 방지하고, 일관된 UI를 유지했습니다. 이로써, 화면 크기나 브라우저에 관계없이 안정적이고 일관된 UI를 제공하여 사용자 만족도를 높일 수 있었습니다.
개발 과정에서의 선택 이유:
Styled-Components와 CSS 모듈의 결합을 통해 컴포넌트 단위로 필요한 스타일만 적용하는 구조를 만들었습니다. CSS 모듈은 전역적으로 영향을 주지 않으면서 정적 스타일을 안정적으로 관리할 수 있었고, Styled-Components는 동적 스타일링을 props로 제어하여 컴포넌트의 재사용성과 유연성을 높일 수 있었습니다. 이러한 방식으로 외부에서 받아온 CSS 파일로 인해 발생하는 스타일 충돌을 줄이고, CSS 코드의 가독성과 유지보수성을 강화할 수 있었습니다. 팀원들이 쉽게 이해하고 수정할 수 있는 구조를 구축하여 개발 효율성도 높였습니다.
성과 및 개선 효과:
컴포넌트 기반의 스타일링 체계를 도입하면서 전역 스타일 충돌 문제를 해결했고, 스타일링 관련 이슈가 줄어들었습니다. Styled-Components와 CSS 모듈을 함께 사용하여 UI 품질과 유지보수성이 크게 향상되었고, 외부에서 받아온 CSS로 인해 발생하던 스타일 우선순위 문제도 해결했습니다. 이로 인해 코드 관리가 한층 수월해졌으며, 개발 속도와 안정성이 모두 향상되었습니다.

페이지 로드 시간 최적화 : 무한 스크롤 도입을 통한 이미지 노출 개선

문제:
숙소 이미지를 효과적으로 노출하여 사용자가 더 많은 콘텐츠를 자연스럽게 탐색할 수 있도록 개선이 필요했습니다. 기존 방식에서는 스크롤을 통해 이미지를 탐색할 때, 매번 새로운 데이터를 API로 불러오는 방식으로 구현되어, 네트워크 부하가 발생하고 간헐적으로 데이터가 누락되는 등의 문제가 생겼습니다. 특히, 데이터가 최신 상태인지 확인하기 어렵다는 문제가 있었습니다.
사용자 관점에서의 개선:
Intersection Observer API를 사용해 무한 스크롤을 구현함으로써, 사용자가 스크롤할 때 필요한 이미지들만 효율적으로 로딩되도록 했습니다. 이를 통해 콘텐츠가 끊김 없이 자연스럽게 노출되어, 사용자 탐색 경험이 크게 향상되었습니다. 또한, 페이지 로드 시간을 줄여 사용자 경험이 개선되었습니다.
성능 최적화 선택 이유:
성능을 최적화하고 불필요한 API 호출을 줄이기 위해 useSWR을 활용하여 데이터 캐싱과 상태 관리를 효율적으로 수행했습니다. React-Query나 TanStack-Query, SSR을 활용한 Next.js 업데이트 등 다양한 방법을 고려했으나, 프로젝트가 긴급하게 진행되어 간단하면서도 효율적인 useSWR을 선택했습니다. 이를 통해 데이터의 신선도를 유지하고 빈번한 API 호출로 인한 네트워크 부하 문제를 완화할 수 있었습니다.
성과 및 개선 효과:
페이지 로드 속도가 개선되었으며, 사용자 탐색 과정에서 끊김 없이 콘텐츠가 노출됨으로써 사용자 편의성이 크게 향상되었습니다. 이를 통해 최적의 기술 선택이 성능과 사용자 경험에 얼마나 중요한지 깨닫게 되었습니다.

검색 속도 및 정확성 : 관광 권역 데이터 관리 및 검색 성능 향상

문제점:
기존 검색 기능은 검색 속도가 느리고 정확도가 낮아 사용자들이 원하는 관광 정보를 찾기 어려운 상황이었습니다. 또한, 인근 지역 데이터가 반영되지 않아 결과의 관련성이 떨어지는 문제가 있었습니다.
프론트엔드 개선 작업:
디바운스 기법을 적용하여 사용자가 검색어를 입력하는 동안 발생하는 불필요한 API 호출을 줄였습니다. 이를 통해 검색 속도를 최적화하여 사용자에게 신속하고 정확한 검색 결과를 제공함으로써, 전반적인 검색 경험을 개선하였습니다.
백엔드 협업을 통한 개선:
API 요청 시 사용자 위치와 인근 지역 데이터를 통합하여 검색 결과에 반영될 수 있도록 백엔드와 협업하였습니다. 이를 통해 사용자가 가까운 지역의 정보를 쉽게 확인할 수 있도록 하여 사용자 맞춤 검색 경험을 제공하였습니다.
성과 및 개선 효과:
검색 속도와 정확성이 크게 향상되어 사용자 만족도가 높아졌습니다. 이 과정을 통해 데이터 구조화와 API 최적화의 중요성을 더욱 깊이 이해하게 되었습니다.

사용자 인터페이스 직관성 : 관리자 및 고객을 위한 가격 관리 개선

문제:
고객은 상품 가격을 명확히 이해하지 못해 구매 결정을 내리기 어려워했고, 관리자는 복잡한 할인 목록과 비효율적인 가격 표시 방식으로 인해 관리에 어려움을 겪었습니다. 특히 메인 페이지와 관리자 페이지가 동일한 데이터를 사용함에도 불구하고, 두 페이지의 가격 데이터 관리가 일관적이지 않아 업데이트와 관리가 번거로웠습니다.
사용자 관점에서의 개선:
고객이 가격 범위를 쉽게 이해할 수 있도록 최소 및 최대 가격을 명확히 표시하는 UI를 제공했습니다. 할인 옵션이 있는 경우에는 할인 금액과 기본 가격을 시각적으로 강조하여 표시하고, 할인 옵션이 없을 때는 최소값과 최대값을 함께 보여주는 방식으로 가격 데이터를 구성했습니다. 이를 통해 고객이 가격 정보를 직관적으로 파악할 수 있었고, A/B 테스트를 통해 구매 전환율을 높이는 최적의 가격 표시 방식을 도출했습니다.
관리자 관점에서의 개선:
관리자와 기획 팀과의 협의를 통해 각 페이지별로 필요한 가격 데이터의 스타일을 설정하여, 관리자 페이지와 메인 페이지 모두에서 일관된 가격 데이터 구조로 표시될 수 있도록 했습니다. 특히, 관리자 페이지에서 복잡한 할인 목록을 효율적으로 관리하기 위해 할인 목록을 상, 중, 하로 구분하고, 셀렉트 박스를 재구성하여 관리자가 자주 사용하는 가격 정책을 손쉽게 설정할 수 있도록 했습니다. 이를 통해 관리 효율성을 높이고 일관된 가격 관리가 가능해졌습니다.
성과 및 개선 효과:
구매 전환율이 증가했고, UI/UX 개선을 통해 사용자 경험 최적화가 비즈니스 성과에 미치는 중요성을 확인했습니다. 또한, 관리자 도구의 직관성을 높임으로써 운영 효율을 극대화할 수 있었으며, 메인 페이지와 관리자 페이지의 데이터 일관성 확보가 관리 편의성을 크게 개선했다는 점을 깨달았습니다.

관리 효율성 : 알림 시스템 내부 전환 및 관리 효율성 개선

문제:
기존 알림 시스템은 외부 연동 방식으로 운영되어, 신속한 업데이트가 어렵고 맞춤형 알림 발송에 제약이 있었습니다. 또한, 사용자의 요구에 따라 알림을 빠르게 수정하거나 추가하는 데 어려움이 있었습니다.
해결 방안 및 선택 이유:
알림 시스템을 외부 연동 방식에서 내부 시스템으로 전환하여, 프론트엔드에서 직접 알림 데이터를 관리하고 사용자 그룹별로 맞춤형 알림을 발송할 수 있도록 했습니다. 엑셀 파일을 통해 특정 사용자 그룹에 대한 알림을 효율적으로 관리할 수 있도록 UI를 최적화했으며, 사용자가 필요한 정보를 적시에 받아볼 수 있도록 개선했습니다.
성과 및 관리 효율성 향상:
내부 전환 이후 알림 처리 속도가 빨라졌고, 사용자 맞춤형 정보 제공이 가능해져 서비스 만족도가 향상되었습니다. 관리자 페이지에서 알림 관리 UI를 단순화하여 알림 추가, 수정, 삭제 기능을 한눈에 확인할 수 있게 함으로써 관리 효율성이 증가했습니다.
성과 및 개선 효과:
알림 시스템을 내부화하면서, 관리자 도구의 사용성이 운영 효율에 미치는 영향을 배울 수 있었고, 데이터 활용을 통한 사용자 맞춤 서비스의 중요성을 깨닫게 되었습니다. 또한, 백엔드 팀과의 협업을 통해 프론트엔드에서 API 요청의 효율성을 높이는 방법에 대한 이해도도 함께 향상되었습니다.

참고사항 : 사이트 사진