그로스톤 후기

2주간의 그로스톤 회고

우연히 스타팅 에서 주관하는 2주의 실무기반 해커톤 그로스톤에 참여하게 되었다. 먀침 최근에 새롭게 공부하던 기술 스택들을 기반으로 작게 프로젝트를 하고 싶었던 참이라 참여하게 되었다.

🚀 팀, 라스트팡

마지막처럼 마-마-마지막처럼 내일 따윈 없는 것처럼 🎵

게더타운, 슬랙을 사용하여 6명이 한팀을 이루게 되었고 당일 회의 끝에 팀명은 라스트팡으로 정하게 되었다. 기획(1), 마케터(1), 디자이너(1), 프론트엔드(2), 백엔드(1)으로 이루어졌고 절반 이상이 실무자였다. 아직 실무 경험이 없는 나로서는 실무자들과 처음으로 협업하게 되어 두근거렸다.

nextjs + vanilla extract

nextjs13 에서 추가된 App Router를 사용하고 싶어서 간만에 nextjs를 써서 프로젝트를 구성하려고 했으나 VE에서 아직 React18에서의 서버 컴포넌트를 지원하지 않는것으로 확인되어 기존의 Page Roter 방식으로 세팅을 하게 되었다.

VE는 간단하게 소개하면 typescript를 적용해 정적으로 css를 작성할 수 있게하는 라이브러리로 build time에 css 파일을 전부 가져오기에 런타임 속도가 빠르다고 소개되고 있다.

역시 장접은 typescript의 타입시스템을 적용하여 정적으로 css를 작성할 수 있다는 점으로 사용해본 결과 정적 스타일링이 가능하다는 점만으로도 기존의 styled나 css module 방식과는 확실히 차별화되는 장점이 있었다.

Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

Next.js에서 vanilla extract 사용
VE, theme, light/dark-mode

위티 UX 개선

그로스톤에서는 기업의 실제 서비스를 대상으로 2주간의 짧은 기간동안 주어진 문제에 솔루션을 제안하게 된다. 링크 프로필을 서비스하는 위티가 이번 그로스톤의 참여 기업이었고 "위티의 USP를 고도화 할 수 있는 기능 제안 MZ 겨냥 마켓팅 전략 도출"이 과제로 주어졌다.

첫 날 회의를 통해 여러 안건들이 솔루션으로 제시되었고 2-3일 정도 기획, 마케터 분들이 UDP를 분석하고 전략을 수립, 이후 운영진들의 피드백을 거쳐서 결국 내가 제안했던 "프로필 제작 UX 개선"이 우리 팀의 솔루션으로 채택되었다.

짧은 개발기간 그럼에도

기획방향이 중간에 틀어졌기 때문에 그에따라 디자인 작업도 느려지면서 개발기간은 더욱 짧아졌고 더군나나 대부분이 재직자라 팀원간에 작업 시간도 달라서 소통에도 어려움이 있었던것 같다. 그럼에도 디자이너 분이 재시간안에 목업을 완성해주시고 2-3일 정도를 소요해서 MVP 개발을 완료했다. 비록 백엔드와의 API 연동은 실패했지만 우리의 가설을 보여주는데에 굳이 백엔드의 API 연동이 필수라고 생각되지는 않아서 프론트 개발에 좀 더 집중했다. 한번 기존의 서비스와 비교하여 UX가 어떻게 바뀌었는지 확인해보면 좋겠다.

기존 도메인 : https://www.wity.im/page
서비스 도메인 : https://lastpang.vercel.app/
깃허브 : https://github.com/joooonis/3-LastPang-Front-End/tree/main

우하하하 1등했담

리팩토링 예정

1. toss, useFuunel
   • 전역변수 사용하지 않고 Funnel 방식으로 상태 관리해보기 (50% 완)
   • 좀 더 추상화를 거쳐서 컴포넌트 및 훅으로 분리해보기(합성 컴포넌트 사용해보기??)
2. react-hook-form + forwardRef
   • forwardRef 사용하는 방식으로 Input 컴포넌트 개선 (완)
   • 그런데 두 번 ref를 forwarding 한다면?
   • 차라리 라이브러리 사용을 안하는 것도 방법일듯
3. VE 패턴 정리
   • 구현을 위해 스타일 중복 등 마구잡이식으로 사용, 패턴 정리 해봄직 함