안녕하세요 🍃
프론트엔드 개발자 황현정입니다

피드줍줍 피드줍줍 피드백하러가기

우아한테크코스에서 진행했던 TypeScript/React로 개발한 팀 프로젝트입니다. 피드백을 더 쉽게 받고, 쉽게 줄수있는 서비스를 개발했습니다.

12,000+ 명의 사용자가 접속하여 이벤트수 28,000+ 으로 실제 우아한테크코스 일부 수업의 피드백 플랫폼으로 사용되고있습니다.

React, TypeScript, React Query, Emotion, Firebase FCM, CloudFront, Sentry, Google Analytics

 

피드백 작성자 서비스 해당 서비스 이동

• QR, URL로 들어온 사용자에게 보이는 페이지 기여도 50+%
• 미처리/완료/내가쓴글 피드백 필터링 기여도 100%
• 최신순/좋아요순/오래된순 정렬 기여도 100%

 

피드백 관리자 서비스 해당 서비스 이동

• 피드백 방 QR/URL생성 기여도 50%
• FCM 알림 설정 기여도 100%

TypeScript/React로 확장 가능한 구조를 구축했습니다.

• 도메인 중심 모듈화로 페이지,컴포넌트,훅을 기능별로 묶고, 공용 레이어는 단방향 의존만 허용해 확장 시 복잡성을 최소화.
• 타입 우선 설계로 API,도메인 모델을 단일 출처에서 관리하고, 제네릭을 활용해 입력·출력 타입을 연결하여 런타임 오류 가능성 줄임.
• 상태는 훅으로 캡슐화하여 UI와 분리했고, UI는 props만 의존하게 해 재사용성과 가독성을 높임.

API 연동과 안전한 데이터 플로우를 설계했습니다.

• 타입 정의로 API와 UI를 안전하게 연결
  • 서버 응답 구조를 types/*에 정의하고, 제네릭을 적용해 요청/응답 타입 보장.
  • UI는 타입을 그대로 활용해, 런타임 오류 없이 안정적인 데이터 플로우 유지.
• 알림(FCM) 서비스 로직 구현 및 API 연동 블로그 포스팅
  • Service Worker에서 알림을 수신하도록 연동, 훅으로 알림 설정을 관리해 UI는 단순히 상태만 구독하도록 함.
  • iOS PWA 환경에서는 자동 권한 요청이 불가해, 버튼 클릭 시 권한 모달을 띄우도록 개선.

로딩 성능/렌더링 성능을 80+% 개선했습니다. 블로그포스팅

• 첫 화면 로딩이 5~6초 소요되는 문제를 코드 스플리팅과 Lazy Loading 적용하여 1초대로 단축
• 스크롤·필터 변경 시 전체 리스트 리렌더링되는 문제를 React.memo, useCallback 적용하여 불필요 렌더링 70% 감소 및 프레임 드랍 제거
• 동일 API가 페이지 이동마다 반복 호출되는 문제를 CloudFront 캐싱과 React Query 적용하여 중복 요청 60% 감소, 응답 속도 0.5~1초 단축

AWS S3와 CloudFront 기반 배포 인프라를 구성했습니다.

• S3·CloudFront로 배포 환경 구축
  • 정적 파일을 S3에 업로드하고 CloudFront를 오리진으로 연결해 CDN을 구성.
• AWS CodePipeline으로 자동 배포 구현 블로그포스팅
  • 개발/프로덕션 브랜치별로 S3 내 별도 경로에 배포하도록 설정.
  • CodePipeline을 연동해 브랜치 머지 시 자동으로 빌드·배포가 실행되도록 구성하여, 배포 시간을 단축하고 안정성을 높임.

Sentry 기반 에러 모니터링 체계를 구축했습니다. 블로그 포스팅

• 에러를 종류와 심각도 기준으로 분류해, 대시보드에서 필터링,모니터링이 가능하도록 세팅.
• Sentry와 Discord 알림을 연동해 새로운 에러가 발생하면 팀이 즉시 공유,대응할 수 있도록 세팅.
• 실제로 Discord 알림을 통해 나의 피드백 API 불러오기 실패를 즉시 발견했고, Replay 영상을 활용해 merge 과정에서 코드 일부 누락이 원인임을 확인 후 빠르게 수정 및 재배포함.

Lighthouse CI 기반 성능·품질 자동화 파이프라인을 구축했습니다.

• 로컬 환경마다 수치가 달라 신뢰가 낮았고, 팀원들이 매번 수동 측정하는데에 10분정도의 시간이 소요되어 재현 가능하고 일관된 측정 방법이 필요하다고 판단.
• PR마다 자동 수집할 수 있도록 CI로 구현(LHCI) 리뷰 단계에서 성능을 즉시 확인할수있도록 함. 블로그링크
• 결과를 Google Spreadsheet에 자동저장하여 히스토리/추세를 한눈에 관리하도록 구현.
• 성능 확인까지 걸리는 시간 80%+ 감소, 환경 차이로 인한 혼선 현저히 감소

인생책장 서비스링크

⚠️ Flutter로 만든 앱서비스⚠️

액티브 시니어가 인터뷰 기반으로 손쉽게 자서전을 제작할 수 있도록 돕는 모바일 서비스입니다. 팀장 겸 PM/디자이너/개발자로서 1년간 기획,설계,개발,발표까지 전 과정을 주도했습니다.

• 온보딩 화면 기여도 100
• 메인화면 기여도 100
• 출판화면 기여도 50

사용자 경험을 고려한 기능을 기획했습니다.

• AI 교정 기능이 생소한 단어를 잘못 수정하는 경우, 사용자가 매번 직접 고치는 불편 발생. 이를 개선하기 위해 기본적으로는 AI가 교정한 결과를 보여주되, 해당 단어를 클릭하면 원래 입력값으로 즉시 되돌릴 수 있는 UX를 설계해 시니어 사용자들이 훨씬 편리하게 교정 과정을 경험할 수 있도록 함.
• 시니어 4명을 대상으로 실제 사용 테스트를 진행하며 불편사항을 빠르게 반영하고, 반복적으로 UX를 개선.

발표와 스토리텔링으로 프로젝트 가치를 극대화했습니다.

• 1000만원·120일이 걸리는 자서전 제작을 AI로 3만원·2주로 단축한다 라는 메시지를 중심으로 스토리라인을 구성해 청중의 관심과 공감을 이끌었고, 이를 통해 2024 IN JEJU Challenge 대상을 수상. 유튜브링크
• 개발자로서 역할에만 머무르지 않고, 서비스 성공을 위해 PM과 디자이너 역할까지 직접 수행함. 단순히 기능 구현에 그치지 않고 서비스 전체를 바라보며, 어떤 역할이든 맡아 프로젝트가 더 나은 방향으로 나아가도록 이끌었음.
• 이 경험을 바탕으로 '개발자끼리 서비스를 만들때, PM, 기획, 디자인은 어떻게 하지?'라는 주제로 우테코 공식 유튜브 영상을 제작해 인사이트를 확산함. 유튜브 영상