Introduction
Feel your space 프로젝트를 풀스택으로 개발하면서 아직 부족한 프론트엔드를 공부하기도 시간이 모자란데 백엔드도 함께 구현해야 한다는 것이 상당히 부담스러웠다. FE 개발만 하는 프로젝트를 구상하던 중 주짓수 도장에 BE를 희망하는 컴퓨터 공학 전공 친구가 있다는 것을 알았고, 내가 구상해놓은 기획안을 제안하여 함께 토이 프로젝트를 개발해보기로 하였다.
내가 약 10 개월 동안 주짓수를 수련하면서 느낀 점들은 아래와 같다.
보통 1 주일에 3 번 이상 수련하지만 자주 사용하는 기술 외에는 수업 시간에 배웠던 기술이 생각나지 않는다.
기술의 종류가 매우 많으며, 기술 하나로 끝나는 것이 아니라 variation으로 이어나갈 수 있는 동작이 다양하다.
ex) 스파이더 가드 - 스윕, 서브미션, 패스
주짓수를 수련하는 사람들의 공통 목표라면 블랙 벨트를 받는 것인텐데 다른 무술과 달리 주짓수는 10 년 이상 꾸준히 수련해야 이를 달성할 수 있다고 한다. 더불어 높은 띠의 수련자들과 스파링을 해보면 기술이 정말 다채로운 것을 느낄 수 있다. 이에 착안하여 우리는 주짓수 기술을 분류하여 수련을 도와주는 웹 사이트를 구상하였다.
Post Black Belt(조만간 블랙벨트)
본 프로젝트의 이름은 Post Black Belt(조만간 블랙 벨트)로 주짓수 수련자들의 열망을 그대로 담았다. 다만 성취욕만을 드러내 블랙 벨트를 얻겠다라는 생각이 아닌, 주짓수라는 무술의 특성을 투영하여 "꾸준히 성실하게" 수련하여 "조만간" 이뤄내겠다는 의미를 추가했다. 조만간의 사전적 의미는 우리가 일상생활에서 사용하고 있는 의미와 상의한데, 가능한 빨리의 의미보다 "이를 조" "늦을 만" "사이 간"을 사용하여 늦든 빠르든 언제든지의 의미를 가지고 있다. 이 서비스를 활용하여 다양한 기술을 연마하고 기록하면서 블랙 벨트에 가까워져 보겠다는 진정한 수련인의 마음가짐을 잘 나타내는 이름이라 생각한다.
-
타겟: 주짓수 수련자 모두
- 특정 기술을 깊게 배우고 싶은 수련자
- 어떤 것부터 배워야 하는지 모르는 초보자
-
주요 기능
- 기술 분류: 일러스트 설명 + 유튜브 무료 강의 sorting
- 개인 일기 작성: 달력 형식의 수련 일지
아직 기획이 명확하게 종료되지 않아 추가적인 설명은 다음 포스트에서 진행하고, 기술 분류 일러스트 디자이너 초빙을 위해 제작한 FE 초안 제작기를 먼저 설명하려 한다.
FE 기획
보통 개발자들은 토이 프로젝트를 그동안 써보고 싶었던 기술을 맛보기로 사용해보는 기회로 여긴다고 한다. 나는 이번 프로젝트를 5 가지를 목표로 진행하려 한다.
- 백엔드와 다수의 다양한 통신
- 커서 & 스크롤 기반 인터렉티브 사용자 경험 구현
- 상태 관리 툴 redux 사용
- React 18 체험
- 코드 공유 목적의 주석 상세히 달기
CSS Framework 선정: CSS module
CSS style은 사용해 본 경험에 의해 인터렉티브한 웹 사이트에서는 CSS module이 적합하다고 판단하였다.
- Atomic(Tailwind): 애니메이션 제약이 많고, 커스텀 가능하지만 config를 매번 바꿔야 하는 번거로움이 있음
- CSS-in-JS(Styled-comp): 컴포넌트 리렌더링마다 CSS도 매번 파싱하여 성능저하됨.
- CSS-in-CSS(CSS module): 전체페이지를 한 번에 로딩하여 초기에 시간 걸리나 인터렉티브한 웹개발시에는 유리함. local scope로 클래스 네임 제한하므로 중복 관리 필요 없음
커서 애니메이션 구현: Redux 도입
내가 가장 구현해보고 싶었던 애니메이션 중 하나인 커서 애니메이션은 커서의 좌표 상태 관리가 필요하다. 먼저 이전에 사용해보았던 기술인 Recoil을 사용한 구현을 참조하여, Recoil ➡️ Redux로 변경하여 커서 애니메이션을 아래와 같이 디자인하였다. Recoil과 달리 Redux는 상태 변경이 reducer 함수 내에서만 가능하고, 외부에서는 dipatch를 사용하여 메시지만 보낼 수 있다. Recoil에 비해 러닝 커브가 어느정도 있지만 개인적으로는 만족스러웠는데 이 부분은 새로운 글에서 정리할 예정이다.
코드 참조
https://github.com/Post-jiu-jitsu/Post-jiu-jitsu/commit/72016ff4e585c2b8ecfd2fba89cfb38371ef29c2
커서 & 스크롤 레퍼런스 사이트
https://wickret.cuberto.com : 커서 애니메이션 및 귀여운 패시브 애니메이션
https://www.vincentsaisset.com : 역동적인 스크롤 기반 타이포 애니메이션
https://agencehotelparticulier.com : navigation 선택에 따라 나타나는 독특한 이미지 애니메이션
진행 상황
현재는 routing 구조와 페이지 구성에 대한 틀은 잡은 상태이지만, 주짓수 기술 분류의 자료구조를 key - value의 hash table이 아닌 다른 방식을 사용하는 것을 고려해보자는 의견이 있어 추가 의논이 필요한 상태이다. 개인적으로 FE 개발만 할 때는 자료구조에 대해 깊이 생각해보지 못했는데 협업을 하면서 다른 사고 방법을 터득할 수 있어서 상당히 보람있는 프로젝트라고 느낀다.
