[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - KT wiz 홈페이지 개선 프로젝트 1주차 회고

🍀 요약

• 프로젝트 셋팅 
• 역할 분담
• 레이아웃 작업

🍀 내용

 

프로젝트는 선착순으로 폼을 제출한 순서대로 배정되었는데, 나는 이 프로그램에 참여하기 전부터 하고 싶었던 KT wiz 홈페이지 개선 프로젝트에 배정되었다!! (수 년 간의 폼림픽으로 다져진 경험이 빛을 발하는 순간)

팀원 분들도 오프라인 교육장에서 가까운 자리에 앉아서 내적 친밀감이 있던 분들과 한 팀이 되어 기뻤다.ㅎㅎ

 

📌 프로젝트 셋팅

기술 스택

Framework	React + Vite
Language	TypeScript
Styling	Tailwind CSS, Shadcn UI, GSAP
API / Store	Axios, Zustand
Project Management	Biome, Husky

 

팀원 개개인의 개발 실력을 고려해서 스택을 정했다. Next 와 React 중에 선택할 수 있었는데 아직 React를 배우는 단계인 팀원들이 대다수였기 때문에(나 포함) 리액트로 프레임워크를 정했다. 사전직무교육기간에 배운 Tailwind CSS와 Shadcn UI, Axios를 활용하기로 했고, 전역 상태 관리를 위해 Zustand라는 라이브러리를 활용하기로 했다. 사전직무교육기간에는 Jotai를 썼었지만, 이 라이브러리가 스토어(Store)를 사용해서 컴포넌트 간 공유할 데이터를 중앙에서 관리하는 현재 가장 많이 사용되는 라이브러리였기 때문이다.

상태 관리 라이브러리 비교

 

우리는 개발방향을 화려한 모션 을 넣는 것으로 정했다. 아무래도 프론트엔드만 작업하다보니 기능 구현에서 보여줄 수 있는 것은 한정적이므로, 우수 프로젝트로 선정되기 위해서는 이목을 끄는 것이 중요하다고 생각했기 때문이다. GSAP는 웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리이다. 이를 이용해 인터랙티브한 웹사이트를 만들어보기로 했다. 근데 일정 정리를 하다보니까 할 수 있을지 모르겠다

 

깃허브에 프로젝트 셋팅은 2년차 개발자이신 팀원분이 Biome와 Husky를 사용하여 해주셨다.

 

본래 나는 ES Lint + Prettier를 활용하고 있었는데, Biome은 모호한 오류 메시지를 피하고, 문제가 있을 때 정확히 어디가 문제인지와 해결 방법을 알려주어 편리했다. 또한 ESLint는 2020년부터 새로운 규칙이 추가되지 않고 있지 않은데, Biome는 formatter와 linter rule이 200+이상 있고 현재도 계속 linter rule이 추가되고 있다. 또 Biome는 개발 환경을 단순화하여 ESLint보다 빠르게 개발 환경을 설정할 수 있다고 한다.

 

Husky란 git hook 설정을 도와주는 package이다.

  🤔 여기서 git hook 이란?
     Git 과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능을 말한다. (ex. commit, push)

 

husky는 npm install 과정에서 사전에 세팅해둔 git hook을 다 적용시킬 수 있어서 모든 팀원이 git hook 실행이 되도록 하기 편하다.

 

우리는 커밋 템플릿을 설정했기 때문에, 이를 팀원 모두에게 적용할 수 있도록 강제하기 위해 hook을 설정했다. 따라서 husky로 이 템플릿을 지키지 않았을 때  merge, push 와 같은 과정에서 작업을 중단하도록 할 수 있다.

 

 

스크럼 규칙

• 매일[월-금] 1시에 10분~20분 회의 후 6시까지 개발 코어타임 [디스코드]
• 매주 (수)는 대면 회의
• 진행도 점검
• 그 날 뭐 개발할지 공유
• 이슈나 문제 있으면 어떻게 해결하면 좋을지
• 카메라 on (자율)

 

브랜치 전략

• main: 배포
• dev: 개발
• features: 이슈 별 
  • ex) 이슈 #1에 대한 개발 브랜치 명 features #1
  • 이슈는 이슈 템플릿에 따라 생성
• features #1을 나중에 dev 브랜치에 합병

 

📌 역할 분담

아직 API가 없었기에, 이번주는 피그마와 KT wiz 웹사이트를 보면서 레이아웃을 잡기로 했다.

먼저 공통 디자인을 정했다.

 

- 배경: 전체적으로 데이터들의 가독성을 높이기 위해 배경을 어두운색으로 정했다.

- 공통 색상: KT wiz의 대표 색상 (빨강, 검정, 하양)

1. 바탕: 검정(#141414)
2. 텍스트 : 하얀색(#FFFFFF), 좀 어두운 하얀색(#ECEEF2)
3. 강조: 빨간색(#D60C0C)
4. 필요 시: 회색(#35383e) → 직접 입력

 

그 다음 각 페이지 별로 역할을 나누어 레이아웃을 작업했다. 각자 맡은 페이지에서 개선할 점을 도출하면서 그때그때 회의록에 작성했고, 필요한 디자인을 찾아 반영했다. 그래서 빠르게 전체 레이아웃 작업을 마칠 수 있었다.

 

📌 내가 맡은 부분

나는 Kt wiz Park 부분을 맡았다. 원래 지도 부분은 이미지였는데 여기서 카카오지도 api를 연결해서 화면을 동적으로 바꾸었다. 주변 교통량을 표시하는 속성도 추가했다.

 

💥 트러블슈팅

div에서 border를 설정했는데 안 보이는 문제가 있었다.

이는 border의 width를 빼먹었기 때문이였다. border를 표시하기 위해서는 border-width, border-style, border-color 이 세 가지를 반드시 설정해야한다. 

<div class="flex w-auto h-auto border-2 border-solid border-black bg-white">
    <p>
        주소 : 경기도 수원시 장안구 경수대로 893(조원동) 수원 케이티 위즈 파크
        (구 : 경기도 수원시 장안구 조원동 775)
    </p>
</div>

 

tailwind에서는 border-숫자 로 width를 표현한다.

 

🍀 평가

 

학교 수업과 동아리 이외에, 기업과 함께 이렇게 제대로 된 개발 프로젝트를 하는 것은 처음이다. 팀원분들과 대화를 나누면서 개발적인 측면보다 Git 플로우나 협업 방식에서 내가 모르는 점이 많아서 놀랐다. 일경험사업을 해본 경험이 있고 나름 프로젝트 경험이 많다고 생각해서 팀장을 하겠다고 했는데, 내가 팀장으로서 부족한 점이 매우 많은 것 같았다... 그래서 팀원분들에게 많이 배우고 소통해서 프로젝트를 원활하게 이끌어나가야겠다고 생각했다. 적극적인 팀원분들을 만나서 정말 행운이다.