미리보기

• 깃허브링크

• 배포된 서비스 링크

[글모임 서비스]
유저에겐 에디터를 활용해 보다 다양한 기능으로 간편하게 글을 쓰고 상호작용할 수 있는, 모임 관리자에겐 admin기능을 제공해 글모임을 만들고 간편하게 관리할 수 있도록 해주는 데스크탑 웹 서비스입니다.

[개발 스택]

React, Typescript, Emotion, Tanstack Query(v5), MSW, TipTap (Editor library)를 사용하여 개발하였습니다.

[ Lighthouse지표와 vite-bundle-visualizer를 활용한 성능개선 ]

유저보이스를 통해 모바일 서비스에 대한 수요를 확인하고, 모바일 환경 개발중 메인 페이지 초기 로딩 속도의 문제를 발견했습니다. 이후 Lighthouse와 vite-bundle-visualizer를 활용해 성능문제에 대한 원인을 분석하고, 문제점을 개선했습니다.

1. 네트워크 탭에서 폰트 파일의 용량이 가장 큰 부분을 차지하고 있는 것을 확인하고 다운로드 용량 감소를 위해 font dynamic subset을 적용하였습니다.
   이를통해 font Resource를 2.1MB → 400KB 약 80%를 절감하였고
   SI 3.2s → 2.6s 약 20%의 성능을 개선하였습니다.

   ---

2. 글모임에서 업로드 되고있는 고화질 이미지로 인해 초기 렌더링되는 리소스 크기와 LCP 성능에 악영향을 주고있는 것을 확인하여 이미지 업로드 과정에서 이미지의 확장자를 webP로 변경하는 방법으로 이미지 최적화를 적용하였습니다.
   이로 인해 LCP load time을 30% 단축하고 S3의 사용량을 30% 절감하였으며
   초기 렌더링되는 리소스를 8.0 MB → 2.6MB로 약 75% 감소시켰습니다.
   PR 링크

   ---

3. 개발자 도구의 Coverage 탭을 확인하여 메인페이지에 불필요한 JS파일, 사용하지 않는 CSS파일을 확인 후 해당 번들을 route level을 기준으로 여러 chunk로 나누어 필요한 시점에 해당 청크들을 불러오도록 code splitting을 적용하여 초기 번들 사이즈를 줄여주었습니다.

   ---

4. 불필요한 리렌더링 로직과 useEffect로직을 제거하는 리팩토링 과정을 거친 후 below the fold 영역의 이미지를 lazy loading하는 과정을 거쳐 FCP를 3.3s → 1.8s 약 50%의 성능을 개선하였습니다.

   
   
   위 4가지를 통해 메인페이지의 Production 기준 성능지표를 아래와 같이 개선하였습니다
   FCP - 3.3s->0.5s

   
   SI - 5.2s->0.5s
   Lighthouse Performance Score - 66->99

[낙관적 업데이트 적용 & Tanstack Query라이브러리 setQueryData 동작과정 뜯어보기]

네트워크 환경이 불안정한 상황에서 좋아요 기능의 느린 업데이트로 인해 좋지 않은 유저 경험을 제공하고 있다는 것을 확인하여 낙관적 업데이트를 적용하여 UX를 개선하였습니다. 구현과정 중 Tanstack query 라이브러리의 setQueryData 메소드를 깊게 고찰하며 어떤 원리로 해당 로직이 작동하는지를 기록하고 공유하였습니다.

낙관적 업데이트 feat: setQueryData 동작과정 뜯어보기

[Tanstack query key 구조 개선]

query key factory를 도입하여 React Query key를 구조화하여 Hierarchy 구조로 만들었고 아래 4가지를 고려하며 Query key를 관리하는 구조를 리팩토링 하여 기존의 중복 가능성과 파악하기 어려운 키 위계, 휴먼 에러로 발생하였던 문제들을 해결하였습니다.

1. 중복되지 않는 키

2. 확실한 위계

3. 쉽게 파악할 수 있는 키 구조

4. 공동배치(Colocation)의 이점
이를 통해 키의 위계를 한 눈에 파악할 수 있어 키의 세분화에 대한 변경에도 쉽게 대처할 수 있게 되었고 더 용이한 수동 상호작용이 가능하게 하여 개발자 경험을 향상시켰습니다.

[ presigned URL 도입으로 고화질 이미지 화질저하 방지 및 서버 부하 감소 ]

서버에 고화질 이미지 업로드 시에 화질이 저하되는 문제와 더불어 서버의 부하를 줄이기 위한 방법으로 s3로 직접 이미지를 업로드하는 presigned URL 방식을 채택하여 이를 적용하였습니다. 이 때 이미지를 업로드하는 모든 로직에 반복적인 코드를 사용하는 것을 확인하여 이를 커스텀훅으로 만들어 코드의 중복을 없애고 가독성을 높였습니다.

[ FE Lead Developer ]

프론트엔드 팀 리더로서 공유하는 팀 문화를 만들어 도입해야할 라이브러리에 대한 세션을 진행해서 팀원 모두에게 공유하는 문화, 스프린트 끝에 서로가 마주한 트러블을 공유하고 회고하는 문화를 만들어 나갔습니다. Pn룰을 적용하여 코드리뷰 과정에서 명확한 의사전달이 가능하도록 하였고, PR이 커지는 것이 빠른 리뷰와 반영을 어렵게 하여 이를 방지하기 위해 PR size labeling을 도입하는 등 효율적인 코드리뷰를 위해 팀 컨벤션을 만들어나갔습니다.

• 깃허브링크

• 배포된 서비스 링크

회의 일정 잡는 과정에서의 불편함을 느껴 이를 프로덕트를 활용해 직접 개선해보고자 시작한 최적의 회의시간 도출 서비스 ASAP입니다.
사용자가 회의정보와 회의 가능 시간을 입력하고 링크를 공유해서 팀원들의 시간을 입력받아 최적의 회의시간을 도출하고 회의 일정을 공유할 수 있는 서비스를 개발하였습니다.

[ 개발스택 ]

React, TypeScript, styled-components, recoil를 사용해 개발하고 vite를 통해 배포했습니다.

[ CI를 구현하여 기존의 불편했던 배포 자동화 ]

github actions의 workflow를 통해 CI단계에서 Lint와 빌드테스트를 추가하여 배포시 에러가 발생할 가능성을 낮추었고 기존에 vercel 배포에 대한 과금을 피하기 위해 수동으로 진행하던 배포과정을 자동화해주는 workflow를 구축하여 기존에 번거로웠던 수동 배포 플로우를 개선하였습니다.


[ 일상생활에서 발견한 문제를 직접 해결하여 누적사용자 400명 유치 ]

팀프로젝트와 협업에서 팀 구성원들의 회의시간을 선정하는데에 불편함을 느껴 해당 문제를 직접 해결하기 위해 오너십을 가지고 진행한 프로젝트이며 지속적으로 유저 피드백을 받아 UX를 개선하여 지금까지 약 500명 의 누적 사용자를 보유하고 있습니다.

[ 크로스 부라우징 대응 & 반응형 웹 개발 ]

html2canvas, web share api를 활용하며 '이미지 저장' 기능과 '카카오톡 공유하기' 기능을 제공하고 있으며 이 과정에서 크로스 브라우징에 대한 적절한 대응을 통해 유저에게 불편함없이 서비스를 제공하였습니다.

데이원 컴퍼니에서 진행하는 패스트캠퍼스X카카오테크 교육에서 실습코치를 맡아 개발자 양성 교육 과정 전반에 대한 교육 운영과 지원 및 수강생 관리 업무를 맡았습니다. 체계적이고 꼼꼼하게 문서화하는 능력과 교육만족도를 극대화하기 위한 업무에 대한 능동적인 자세로 수강생의 과제를 확인하고 평가하고 피드백을 주는 업무와 질의응답을 받으며 문제 해결에 도움을 주는 업무와 강의 내용을 요약해서 전달해주는 업무를 전담하여 교육 퀄리티를 관리하였습니다.

모노라마에서 이커머스 쇼핑몰 웹 개발 업무를 담당하였습니다. Angular를 처음 접했지만, 빠르게 습득하여 UI/UX를 개선하고 웹을 반응형으로 만들어 웹 서비스를 더 접근성있게 만들었으며, 장바구니 기능과 필터 기능을 직접 개발하여 서비스에 기여하였습니다.

또한, BC카드 외부 사원으로 파견되어 WeChat Pay 백오피스 시스템의 UI/UX 개발을 담당했습니다. 웹서비스의 마크업을 전담하고 jQuery를 활용한 간단한 서버 통신 로직을 구현하는 업무를 맡았고 팀 내에서 애자일 방식으로 협업하여 업무를 책임감 있게 완수했습니다. 프로젝트 완료 후에는 결과물에 대한 프레젠테이션까지 주도적으로 진행하여 성공적으로 마무리한 경험이 있습니다.

NAVER D2, 아산나눔 재단 등에서 후원을 받고 있는 전국 최대 규모의 대학생 IT 창업 동아리 SOPT 웹파트원으로 참여하여 IT 지식과 웹 개발에 대해 깊게 탐구하고 이것을 팀원들과 공유하며 상호성장하였습니다.

디자이너, 서버, PM, 프론트엔드 4개의 직군과 협업하여 해커톤과 프로젝트에서 다수의 웹 서비스를 성공적으로 릴리즈 하였습니다.

동아리 활동 마지막에는 개발에 대한 깊이있는 고찰과 공유하며 상호성장하는 자세, 협업능력을 인정받아 200명 규모의 개발 동아리의 웹 개발 파트장을 맡아 단체를 더 발전시키고 성장시키는데에 기여하였습니다. 총 8번의 세미나를 준비하고 진행하였으며, 팀 내 신뢰와 유대를 만들어 나가는데 기여하고 테크톡을 만들어 공유문화를 조성하고 정착시켰습니다. 이와 같은 활동으로 27명의 대학생 파트원들을 주니어 개발자로의 성장을 이끌어내었습니다.