미리보기

다양한 테마의 게임 콘텐츠를 즐길 수 있는 몰입 경험 플랫폼인 리얼월드를 서비스하는 유니크 굿 컴퍼니에서 프론트엔드 개발을 담당했습니다.

리얼월드 모바일 앱 연동 웹 페이지 개발과 사용자 경험을 고려한 홈페이지 개선 프로젝트 개발 을 메인으로 전담하였고, 리얼월드 앱과 동일한 사용자 경험을 제공하는 웹 버전으로 이전의 정적인 인터페이스를 동적이고 상호작용이 가능한 페이지로 개선하여 유저에게 보다 몰입도 높은 경험을 제공하는데 기여했습니다.

일일 업무 공유 도입 및 산재되어있는 문서들을 통합하고 관리하고 팀 내의 문서화 시스템을 체계적으로 개선하며 효율적인 협업 문화를 구축하는 데 주도적으로 기여하면서, 팀원들과 함께 성장하는 문화와 병목없는 업무 환경을 조성하고자 했습니다.

Work Performance

• 웹 리뉴얼 프로젝트 메인 개발자

  • 모바일·PC 대응 반응형 UI로 접근성 개선

  • 기존 정적 홈페이지를 앱 연동 UX 중심 구조로 리디자인 및 개발

  • Safari WebView UI 렌더링 이슈 해결 → 모바일 오류율 감소

  • 사용자 온보딩 개선 → 신규 사용자 이탈률 감소

• React Query 기반 성능 최적화

  • 캐싱 전략 도입으로 API 호출 80% 감소, 페이지 로딩 속도 개선

  • App Router 구조 정립 및 공통 모듈화 → 코드 가독성 및 유지보수성 향상

• 협업 문화 정비 및 문서화 시스템 도입

  • 산재된 개발 문서들을 Notion으로 체계화 → 신규 온보딩 시간 30% 단축

  • 코드 컨벤션, 트러블슈팅 사례 정리 → 팀 내 지식 공유 문화 구축

  • 일일 업무 공유 시스템 도입으로 효율적인 커뮤니케이션 환경 조성

• 기획/디자인 연계 역량

  • 디자이너와 긴밀한 협업으로 디자인 의도를 정확히 반영한 UI 구현

  • 초기 기획 단계부터 참여하여 기능 기획 및 UX 흐름 개선 제안

리얼월드 웹 홈페이지 바로가기

Description

사용자 경험을 고려한 리뉴얼 개선과 유저 간 소셜 기능을 제공하기 위해 진행된 프로젝트.
리얼월드 플랫폼의 사용자 경험을 향상시키고, 다양한 기기에서의 접근성을 높여 더 많은 사용자를 확보를 목표로 진행.

Experience

기존 플랫폼은 앱과 전혀 다른 인터페이스와 기능으로 리얼월드 앱 서비스를 소개하는데에만 국한되어 있었으며, 모바일 기기에서 최적화되지 않아 유저 접근성이 제한적이었음. 또한 앱과 웹 모두 사용자 간 상호작용이 부족했고 이를 위해 커뮤니티 기능 도입이 필요하다 판단하였음.

• 리얼월드 홈페이지의 PC 및 모바일 웹 리뉴얼과 고도화를 전담

• 로그인/회원가입 및 유저 온보딩 과정을 동적인 애니메이션과 함께 최적화하여 신규 사용자 경험을 개선함

• React-Query를 활용하여 기존 API 호출을 80% 감소시키는 캐싱 전략 도입으로 성능 최적화

• App Router를 활용하여 애플리케이션 구조를 체계적으로 구성, 코드 가독성과 유지보수성을 대폭 향상

• Custom Hook 설계, 공통 모듈화 등으로 팀 내 코드 관리와 협업 생산성을 향상시키며, 유지보수 비용 절감 효과를 달성

• 정적인 페이지를 앱과 동일한 화면 구조로 개선하여 웹과 앱의 사용자 경험을 통합하고 사용자 경험을 긍정적으로 개선하면서 리얼월드 웹 MAU(월간 활성 사용자 수)가 1만에서 4만으로 400% 증가하며 플랫폼 활성화에 기여함

Tech Stack

• 주요 기술 React TypeScript Next.js emotion

• 사용 경험 React Query Storybook

Description

리얼월드 앱의 제약에서 벗어나 웹 브라우저를 통해 게임을 즐길 수 있도록 접근성을 개선하고 사용자 경험을 향상시키는 프로젝트

Experience

게임 플레이를 앱 내에서만 즐겨야 한다는 앱 중심의 제한적인 사용자 경험에 대한 극복이 필요했으며, 웹 플레이 과정에서의 커뮤니티 활성도와 참여율이 낮은 문제가 있었음

• PC 및 모바일 웹뷰 플랫폼에서 플레이 가능한 도움글 페이지 구현

• 게임 플레이 접근성을 개선하기 위해 UI/UX 설계 및 기능 구현을 주도

• 실시간 도움글 검색 기능과 사진 업로드가 가능한 게시글 작성/수정/삭제 기능 개발

• Custom Hook 설계, 공통 모듈화 등으로 팀 내 코드 관리와 협업 생산성을 향상시키며, 유지보수 비용 절감 효과를 달성

• 웹 브라우저를 통해 게임을 즐길 수 있도록 접근성을 개선하며 리얼월드 웹 활성화에 기여

Tech Stack

• 주요 기술 React TypeScript Next.js emotion

• 사용 경험 React Query Storybook

Github Repo | 너에게 닿기를 바로가기

Description

푸딩캠프(포트폴리오 만들기)프로그램 산하에서 진행하는 프로젝트에 참여했습니다. 멀어진 친구나 지인에게 메시지를 전달하는 플랫폼으로, 감정적 소통과 관계 회복을 돕기 위해 설계된 서비스입니다. 현재 1차 프로젝트 개발-배포 및 2차 프로젝트 개발-배포가 완료된 상태로 운영 진행 중에 있습니다.

• 1차 개발(24.09.16 ~ 24.10.09 완료)

  • 핵심 기능(메시지 전달) 구현 및 배포 완료

• 2차 개발(24.11.4 ~ 25.12.29 완료)

  • 1차 프로젝트에서 발견된 기술적 해결/도전 과제 수행을 목표로 추가 기능 구현 및 배포 완료

Experience

관계 단절을 경험한 사용자들에게 쉽게 소통할 수 있는 플랫폼을 제공하고자 한 프로젝트
현재의 2차 프로젝트에서는 1차 프로젝트의 유저 피드백을 반영하기로 결정하며 기존 코드를 기반으로 기술적 해결/도전 과제 수행을 목표로 하였으며, 1차 프로젝트에서 경험했던 100% 온라인 협업의 문제점(업무 병목 현상, 낮은 업무 효율성)에 대한 적극적 개선이 필요하다 판단함

• 메인/로그인/홈/질문작성하기/쪽지보내기(타입선택) 기능 개발

• App Router를 활용한 애플리케이션 구조 개선으로 코드 가독성과 유지보수성을 향상

• 프로젝트 전반의 문서화와 Git 브랜치 전략 수립으로 협업 효율성 극대화

• 프로젝트 기획 및 리드 역할 수행을 통해 업무의 방향성을 설정하고, 팀 내 역할을 명확히 분배하여 프로젝트를 안정적으로 진행하도록 주도함

• 플랫폼의 안정적 런칭 및 사용자 피드백 기반으로 서비스 개선

• 팀 내 협업 환경을 체계적으로 개선하며 원활한 소통을 주도하며 최종 배포까지 완료

Tech Stack

• 주요 기술 React TypeScript Next.js Tailwind CSS

• 사용 경험 React Query

Experience

'내 트리를 꾸며줘' 라는 성공적인 서비스를 벤치마킹하여 바이럴 효과를 목적으로 한 이벤트 페이지가 필요하다는 홍보처의 요청으로 기획부터 디자인까지 주도적으로 참여하며 진행하게 된 프로젝트.
유저가 감정과 추억을 공유할 수 있는 간단하면서도 감성적인 인터페이스를 제공하고 바이럴 효과를 위한 동적인 사용자 경험 강화가 필요하다는 공통된 의견.

✦ [토닥토닥 포토월 - 현재 deprecate 된 상태입니다.]

• Vite와 React를 사용해 CSR(클라이언트 사이드 렌더링) 기반으로 구현

• Swiper를 활용한 페이지 이동 로직 개발

• 런타임 CSS-in-JS인 Emotion 대신 Zero Runtime 라이브러리인 Stitches를 적용하여 성능 최적화

• 폴라로이드(이미지) 꾸미기 및 공유 기능 개발

• 동적인 인터페이스로 사용자에게 감성적인 경험을 제공하며 연말 프로젝트의 바이럴 효과를 달성

• 새로운 기술 도입으로 개발 효율성과 퍼포먼스를 동시에 개선함

Tech Stack

• 주요 기술 Vite+React TypeScript Stitches

• 사용 경험 React-hook-form

이력서 주제를 반영하는 포트폴리오를 위한 토이 프로젝트를 만듭니다. 참여하는 전체 기간 동안 2개의 프로젝트를 제작하며, 출시하고 운영하는 것이 목표입니다. 특정 기간 이상으로 운영하며 서비스를 개선 및 발전시키고, 운영에서 경험하고 얻은 교훈으로 하드스킬과 소프트스킬을 향상시키고자 참여하였습니다.