"Arti" 프론트엔드 개발자 회고

프로젝트 소개

Arti는 신진 디자이너들의 일러스트를 투표, 해당 투표 결과를 통하여 옷을 직접 제작하고 펀딩까지 하는 것을 목표로 하는 웹서비스

프로젝트 주제

• 신진 디자이너 및 브랜드 홍보 플랫폼

프로젝트명

• Arti

프로젝트 제작 기간

• 2023.10.04 ~ 2023.12.05

프로젝트 구현 기능

https://zza-lng.notion.site/Arti-cb288edfea4849608f06736a52845398

기술 스택

역할	종류
Framework
Programming Language
Styling
State Management
Data Fetching
Formatting
Package Manager
Version Control

1차 제작에서는 React+TypeScript로 개발을 시작했다. 타입스크립트를 모르는 상태에서 시작해서 .ts와.tsx 파일을 만들어 구현했더니 수많은 오류가 발생하여 당황했지만 하루종일 타입스크립트만 공부하고 프로젝트에 적용하면서 익숙해져갔다.

디자이너 및 브랜드 홍보 플랫폼답게 불러오는 이미지 파일이 많아져 렌더링이 정말 느렸다. 이를 해결하기 위해 팀원들과 Next로 SSR을 이용하여 렌더링 속도를 높이면서, SEO 최적화까지 가능하도록 마이그레이션을 해보기로 했다.

역할	종류
Framework
Programming Language
Styling
State Management
Data Fetching
Formatting
Package Manager
Version Control

emotion의 공식문서를 보면 SSR에 대한 지원이 이루어지고는 있지만, 모든 상황에서 적절한 대응이 가능하지는 않다라는 글을 보고 tailwind와 styled-components 중에 고민하다가 마이그레이션을 하면서 2차 스프린트 기능을 다 구현하기엔 데드라인이 촉박했기 때문에 팀원들이 더 익숙하고 빠르게 사용할 수 있었던 styled-components를 사용했다. emotion 사용을 추천하지 않는 이유를 찾아보니 SSR의 동작 방식과 CSS-in-js의 동작방식이 상충되는 부분이 있기 때문이라고 한다.

후기

창업팀에 개발자로 영입 제의를 받고, 부족한 실력으로 인한 문제가 발생하지 않도록 1달동안 몰두했던 프로젝트.
첫 소셜 로그인 구현이라 Redirect Uri를 백엔드와 맞춰야한다는 사실을 모르고 밤을 새가며 오류를 해결.
React+TypeScript로 서비스를 구현했다가 더 많은 사용자에게 노출시키고, 많은 이미지로 인해 페이지 렌더링이 느려지는 현상을 감소시키기 위해서 Next+TypeScript로 마이그레이션을 진행.
emotion을 이용하여 css를 작성했지만 Next로 마이그레이션하면서 Next에서는 emotion 호환이 안되는 오류가 발생하여 Style-Components로 변경.
실제로 1500명이 넘는 사용자가 이용 => GA와 Hotjar를 통해 사용자 이용 내역을 분석하고, 채널톡을 이용해 오류 제보 및 사용자 피드백을 받을 수 있었던 프로젝트