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

스테이폴리오 안내

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

프로젝트 주요 성과

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

• 문제: 해외 사용자가 자신의 언어로 서비스를 이용하지 못해 불편을 겪었고, 그 결과 이탈이 발생했습니다. 특히 일본어는 한자와 특수 문자를 많이 써서 글자 크기와 줄 간격 등 CSS 스타일 조정이 필요했고, 번역 과정에서 원본과 차이가 생겨 중요한 정보가 제대로 전달되지 않는 문제가 있었습니다.
• 해결 방안 및 선택 이유:
  • i18next 라이브러리를 활용한 다국어 지원 구현: i18next는 프론트엔드 다국어 지원을 쉽게 확장·관리할 수 있는 라이브러리로, 다국어 포맷팅과 복수형 처리 등 글로벌 서비스 운영에 필요한 기능을 지원합니다. 번역 데이터를 JSON 형식으로 관리해 필요한 언어만 동적으로 로딩하도록 구성했고, 유지보수도 한결 수월해졌습니다.
  • JSON 기반 번역 데이터 관리와 목업 데이터 활용: 일부 번역 데이터를 JSON 형식으로 저장해 다국어 데이터를 쉽게 관리했습니다. 초기 개발 단계에서 목업 데이터를 활용한 덕분에 API가 준비되지 않은 상황에서도 다국어 기능을 미리 구현·테스트할 수 있었고, 개발 속도가 빨라지면서 피드백 반영 주기도 짧아졌습니다.
  • URL에 언어 코드 포함 및 상태 유지: URL에 언어 코드를 포함해 페이지 리로드 시에도 선택한 언어가 유지되도록 설계했습니다. 쿠키·localStorage에 언어 상태를 저장하는 방식도 검토했지만, SEO 노출과 URL 공유 가능성을 우선순위로 두고 URL 경로 기반 방식을 선택했습니다. 그 결과 사용자가 원하는 언어로 끊김 없이 서비스를 이용하게 됐습니다.
  • CSS 조정을 통한 일본어 페이지 UI 최적화: 일본어의 언어적 특성에서 오는 가독성 문제를 풀기 위해 글자 크기와 줄 간격을 조정하고, word-break 속성을 추가해 일본어 페이지의 시각적 안정성을 확보했습니다. 일본어 사용자가 더 편한 환경에서 서비스를 쓸 수 있게 된 작업입니다.
  • 백엔드와의 협업을 통한 다국어 데이터 제공: 다국어 데이터를 백엔드 RESTful API로 admin·host URL에서 받아오고, i18next와 옵셔널 체이닝으로 안정적으로 처리했습니다. 데이터가 없거나 지연될 때도 앱이 문제없이 작동하도록 했고, 백엔드와 긴밀히 협업해 필요한 데이터 구조를 유연하게 제공받으면서 개발 효율을 높였습니다.
• 성과 및 개선 효과: 다국어 지원과 UX 개선으로 해외 사용자가 자신의 언어로 편하게 서비스를 이용하면서 전반적인 만족도가 올라갔습니다. 특히 일본어 페이지 UI를 최적화해 가독성을 높였고, 일본어 사용자 피드백도 긍정적으로 바뀌었습니다. 별도 정량 지표가 아니라 CS 문의 감소·사용자 피드백 기반의 정성적 개선으로 확인했고, 이후 글로벌 사용자 유입이 늘어나는 흐름도 함께 관찰했습니다.

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

• 문제:

  숙소 이미지를 세로로 나열한 레이아웃이라 사용자가 여러 사진을 보려면 계속 스크롤해야 하는 불편이 있었습니다. 숙소 정보를 직관적으로 탐색하기 어렵다는 피드백도 함께였습니다. 또한 프로모션과 프리오더 페이지의 데이터 구조가 일관되지 않아 마케팅 팀이 페이지 간 데이터를 통합해 분석하기 어려운 상황이었습니다.

• 사용자 관점에서의 개선:

  프리오더 페이지에 이미지 슬라이더 기능을 더해 숙소 이미지를 직관적으로 넘기도록 개선했습니다. 사용자는 여러 사진을 더 쉽게 탐색하게 됐고, 시각적 몰입감도 올라갔습니다.

• 관리자 관점에서의 개선:

  프로모션과 프리오더 페이지의 데이터 구조를 통합해 마케팅 팀이 각 페이지 데이터를 일관성 있게 분석하도록 지원했습니다. 페이지 코드의 일관성을 높이고 코드 재사용으로 파일을 간소화해 유지보수 효율도 끌어올렸습니다. GA4와 UTM 링크로 사용자 행동 데이터를 분석할 환경을 갖췄고, 배포 테스트 페이지를 활용한 간단한 A/B 테스트로 클릭 패턴과 유입 경로를 확인했습니다. 이 테스트에서 초기 탐색 패턴을 파악해 UI 개선 방향성을 잡았습니다.

  프리오더 페이지의 국가별 데이터 관리는 해외 사용자 비중이 큰 페이지 특성을 고려해 백엔드와 협업하여 엑셀로 데이터를 관리할 수 있는 기능을 추가했습니다. 관리자 페이지에서 국가 코드를 별도로 관리하도록 구성해 해외 사용자 데이터를 효율적으로 분류·관리했습니다.

• 성과 및 개선 효과:

  UX 개선으로 페이지 체류 시간이 늘어났고 사용자 경험도 좋아졌습니다. 이미지 슬라이더 도입으로 탐색이 직관적이었고, 사용자 피드백도 긍정적으로 바뀌었습니다. 데이터 구조 통합으로 마케팅 팀의 데이터 활용과 협업 효율성이 강화됐고, GA4와 UTM 링크로 수집한 사용자 행동 데이터는 마케팅 전략 수립에 보탬이 됐습니다. 국가별 데이터 관리 기능은 글로벌 사용자 데이터를 체계적으로 관리할 기반이 돼 관리 편의성을 높였습니다.

컴포넌트 기반 스타일링 체계 구축

• 문제:

  기존 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로 무한 스크롤을 구현해 사용자가 스크롤할 때 필요한 이미지만 효율적으로 로딩되게 했습니다. 콘텐츠가 끊김 없이 자연스럽게 노출되면서 사용자 탐색 경험이 크게 향상됐고, 페이지 로드 시간도 줄었습니다.

• 성능 최적화 선택 이유:

  무한 스크롤 특성상 캐시 무효화와 포커스 리페칭, 데이터 신선도 유지가 핵심 요구사항이었고, useSWR은 이 유즈케이스에 최소 설정으로 대응할 수 있어 적합했습니다. React-Query(TanStack-Query)와 Next.js SSR 기반 재조회 방식도 후보로 검토했지만, 당시 팀 내 학습 비용과 납기 일정을 종합적으로 보고 SWR로 결정했고, 이후 프리오더·프로모션 페이지 등 다른 영역으로의 확장 가능성까지 확인했습니다. 데이터 캐싱과 상태 관리를 효율적으로 수행하면서 불필요한 API 호출에서 오는 네트워크 부하도 줄였습니다.

• 성과 및 개선 효과:

  페이지 로드 속도가 개선됐고, 사용자 탐색 과정에서 콘텐츠가 끊김 없이 노출되면서 사용자 편의성도 크게 좋아졌습니다. 최적의 기술 선택이 성능과 사용자 경험에 얼마나 중요한지 체감한 작업이었습니다.

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

• 문제점:

  기존 검색 기능은 속도가 느리고 정확도가 낮아 사용자가 원하는 관광 정보를 찾기 어려웠습니다. 인근 지역 데이터가 반영되지 않아 결과의 관련성도 떨어졌습니다.

• 프론트엔드 개선 작업:

  디바운스 기법을 적용해 사용자가 검색어를 입력하는 동안 발생하는 불필요한 API 호출을 줄였습니다. 검색 속도를 최적화해 사용자에게 신속하고 정확한 결과를 제공함으로써 전반적인 검색 경험을 개선했습니다.

• 백엔드 협업을 통한 개선:

  API 요청 시 사용자 위치와 인근 지역 데이터를 통합해 검색 결과에 반영되도록 백엔드와 협업했습니다. 가까운 지역의 정보를 쉽게 확인할 수 있게 해서 사용자 맞춤 검색 경험을 제공했습니다.

• 성과 및 개선 효과:

  검색 속도와 정확성이 크게 향상돼 사용자 만족도가 올라갔습니다. 이 과정에서 데이터 구조화와 API 최적화의 중요성을 한층 깊이 이해하게 됐습니다.

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

• 문제:

  고객은 상품 가격을 명확히 이해하지 못해 구매 결정을 내리기 어려워했고, 관리자는 복잡한 할인 목록과 비효율적인 가격 표시 방식 탓에 관리에 어려움을 겪었습니다. 특히 메인 페이지와 관리자 페이지가 같은 데이터를 쓰는데도 두 페이지의 가격 데이터 관리가 일관적이지 않아 업데이트와 관리가 번거로웠습니다.

• 사용자 관점에서의 개선:

  고객이 가격 범위를 쉽게 이해하도록 최소·최대 가격을 명확히 표시하는 UI를 제공했습니다. 할인 옵션이 있으면 할인 금액과 기본 가격을 시각적으로 강조했고, 할인 옵션이 없으면 최소값과 최대값을 함께 보여주는 방식으로 가격 데이터를 구성했습니다. 고객이 가격 정보를 직관적으로 파악하게 됐고, A/B 테스트로 구매 전환율을 높이는 최적의 가격 표시 방식을 도출했습니다.

• 관리자 관점에서의 개선:

  관리자·기획 팀과 협의해 페이지별로 필요한 가격 데이터 스타일을 정해 관리자 페이지와 메인 페이지 모두 일관된 가격 데이터 구조로 표시되도록 했습니다. 특히 관리자 페이지에서는 복잡한 할인 목록을 효율적으로 관리하려고 할인 목록을 상·중·하로 구분하고, 셀렉트 박스를 재구성해 관리자가 자주 쓰는 가격 정책을 손쉽게 설정하도록 했습니다. 관리 효율을 높였고 일관된 가격 관리가 가능해졌습니다.

• 성과 및 개선 효과:

  구매 전환율이 늘었고, UI/UX 개선이 비즈니스 성과에 미치는 중요성을 확인했습니다. 관리자 도구의 직관성을 높여 운영 효율도 끌어올렸으며, 메인 페이지와 관리자 페이지의 데이터 일관성이 관리 편의성을 크게 개선한다는 점을 체감했습니다.

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

• 문제:

  기존 알림 시스템은 외부 연동 방식으로 운영돼 신속한 업데이트가 어렵고 맞춤형 알림 발송에 제약이 있었습니다. 사용자 요구에 따라 알림을 빠르게 수정·추가하기도 까다로웠습니다.

• 해결 방안 및 선택 이유:

  알림 시스템을 외부 연동에서 내부 시스템으로 전환해 프론트엔드에서 직접 알림 데이터를 관리하고 사용자 그룹별로 맞춤형 알림을 발송하도록 했습니다. 엑셀 파일로 특정 사용자 그룹 대상 알림을 효율적으로 관리하도록 UI를 정리했고, 사용자가 필요한 정보를 적시에 받도록 개선했습니다.

• 성과 및 관리 효율성 향상:

  내부 전환 이후 알림 처리 속도가 빨라졌고, 사용자 맞춤 정보 제공이 가능해져 서비스 만족도가 올라갔습니다. 관리자 페이지의 알림 관리 UI를 단순화해 알림 추가·수정·삭제 기능을 한눈에 볼 수 있게 한 덕에 관리 효율도 늘었습니다.

• 성과 및 개선 효과:

  알림 시스템을 내부화하면서 관리자 도구의 사용성이 운영 효율에 미치는 영향을 배웠고, 데이터 활용을 통한 사용자 맞춤 서비스의 중요성도 새삼 체감했습니다. 백엔드 팀과 협업하면서 프론트엔드에서 API 요청 효율을 높이는 방법에 대한 이해도 함께 늘었습니다.

그로스해킹 기반 웹→앱 전환 UX 개편 : 앱 설치율 향상을 위한 프런트엔드 작업

• 문제:

  팬데믹 이후 해외여행 수요가 늘면서 서비스 구조를 웹 중심에서 앱 중심으로 바꿔야 하는 상황이었습니다. 충성 고객의 재구매와 신규 고객 유입을 위해 웹 사용자를 앱으로 이동시킬 필요가 있었지만, 모바일 웹 방문자가 앱으로 넘어갈 명시적인 채널이 없었고 웹/앱 사용자 행동 데이터도 분리돼 있어 캠페인 효과를 측정하기 어려운 상태였습니다.

• 프런트엔드 기여 및 선택 이유:

  1. 모바일 웹 상단 앱 설치 CTA 구현: 모바일로 유입되는 방문자만 타깃팅해 페이지 상단에 앱 다운로드 CTA 버튼을 노출하도록 UI를 개편했습니다. 기존 웹 사용자가 자연스럽게 앱으로 넘어갈 채널을 확보하는 것이 목표였고, 캠페인이 아닌 평상시 트래픽에서도 전환이 일어나도록 상시 노출 구조로 설계했습니다.

  2. GA4 + Firebase 이벤트 태깅 및 웹뷰 데이터 동기화: 웹과 앱의 사용자 행동을 통합적으로 분석하려고 GA4 핵심 이벤트 태깅과 구글 애즈 전환 태깅을 프런트엔드에서 작업했고, 모바일 앱 내 웹뷰에서 Firebase / JavaScript 핸들러로 이벤트가 동기화되도록 구현했습니다. 이 작업으로 마케팅·데이터 팀이 Looker 대시보드에서 퍼널·전환·재방문 데이터를 한 뷰에서 확인하게 됐습니다.

  3. 앱 설치 유도용 랜딩/프로모션 구조 정비: 캠페인 소재와 일관되게 노출되도록 숙소 이미지 구성과 CTA 위치를 재배치했고, 예약 시작·구매 완료 등 인앱 액션을 위한 웹 측 이벤트 포인트를 정리했습니다.

• 성과 (담당 범위 및 그에 기여한 전사 캠페인 지표):

  담당 범위 명시: 아래 수치는 2023.07~09 마케팅·데이터·디자인·개발팀이 함께 진행한 전사 그로스해킹 캠페인의 최종 지표이며, 문화체육관광부 그로스해킹 기반 관광기업 데이터 활용지원 용역사업 우수사례 보고서에 기록된 결과입니다. 프런트엔드 개발자로서 제가 담당한 범위는 웹→앱 전환 경로 구현과 이벤트 태깅 기반 구축이며, 이 작업이 캠페인 측정과 전환 유도를 가능하게 한 기반이 되었습니다.

  • 상반기 대비 앱 설치율 약 600% 증가, 업계 평균 대비 앱 설치 비용 약 70% 절감
  • 주요 이벤트 배너 클릭률 약 42% 증가 (충성 고객의 앱 사용량 증가에 따른 변화)
  • 목표 전환율 8% 대비 평균 23.45% 달성 (7월 6.27% → 8월 30.26% → 9월 33.37%)
  • 3차 캠페인 기간 앱 설치 4,622건 기록 (기존 월평균 1,400~1,500건 대비 유의미한 상승)

개인화 마케팅 도구(코드앤버터 스마트 배너/팝업) 연동 : 프로모션·앱 설치·쿠폰 전환율 향상

• 문제:

  웹 서비스에서 다양한 프로모션과 기획전이 동시에 운영되고, 숙소별로 참여하는 프로모션과 혜택이 달라지는 구조였습니다. 사용자 세그먼트(디바이스, 신규/재방문, 유입 UTM, 접속 지역 등)에 맞춰 서로 다른 배너/팝업을 보여줘야 했지만, 코드 배포 없이는 노출 조건과 문구를 바꿀 수 없어 마케팅 실행 속도가 지연되고 실험 사이클이 길어졌습니다.

• 프런트엔드 기여 및 선택 이유:

  1. 스마트 배너·팝업 SaaS(코드앤버터) 연동: 마케팅 팀이 노출 조건(페이지, 디바이스, UTM, 쿠키, 신규/재방문 여부 등)을 직접 설정하도록 코드앤버터 스크립트를 통합하고, 각 페이지에서 팝업/배너가 자연스럽게 트리거되도록 DOM 컨테이너와 위치 포인트를 정리했습니다. 코드 배포 없이 A/B 실험과 타깃팅 조건 변경이 가능해지는 것이 목적이었습니다.

  2. 제외 조건 및 사용자 식별 포인트 설계: 숙소 호스트, 내부 사용자 등 팝업 제외 대상을 구분하도록 프런트엔드에서 사용자 쿠키·로그인 상태·페이지 컨텍스트를 식별하는 포인트를 마련했습니다. 마케팅 팀이 실제 고객에게만 팝업을 노출하도록 조건을 설정할 수 있게 됐습니다.

  3. 쿠폰 랜딩 및 앱 설치 유도 팝업용 진입 경로 정비: 쿠폰 발급 랜딩 페이지와 모바일 웹 상단 앱 설치 유도 팝업이 자연스럽게 노출되도록 UX 위치와 트리거 시점을 조정했습니다. (앱 설치 유도 팝업은 위 "웹→앱 전환 UX 개편" 작업과 연계됩니다.)

• 성과 (담당 범위 및 그에 기여한 전사 마케팅 지표):

  담당 범위 명시: 아래 수치는 코드앤버터 스마트 배너/팝업 도입 이후 기록된 전사 마케팅 성과 지표이며, 코드앤버터 고객 성공 사례 블로그에 공개된 결과입니다. 프런트엔드 개발자로서 제가 담당한 범위는 외부 마케팅 도구 연동과 팝업 노출/제외 조건의 프런트엔드 기반 제공이며, 캠페인 기획·소재·타깃팅 조건 설계는 마케팅 팀에서 수행했습니다.

  • 프로모션 홍보 배너: 배너 노출 후 매출 약 246% 상승
  • 모바일 웹 앱 설치 유도 팝업: 전주 대비 앱 설치 약 92% 증가
  • 쿠폰 발급 팝업: 쿠폰 발급량 약 41% 증가

  외부 SaaS를 활용해 마케팅 팀이 코드 배포 없이 타깃팅·A/B 실험을 실행하도록 함으로써 캠페인 사이클을 단축했고, 프런트엔드 개발 리소스를 핵심 서비스 기능에 집중시켰습니다.

참고사항 : 사이트 사진