이번 SOPT 38기에서 진행한 LINKareer 합동세미나는 단순히 화면을 나누어 구현하는 프로젝트가 아닌 실제 서비스처럼 여러 명이 같은 코드베이스에서 컨벤션을 맞추고 기능을 연결해가는 경험이었다. 나는 홈 화면의 주요 섹션과 공통 컴포넌트, 그리고 후반부에는 채용 상세 페이지의 합격 자료 API 연동을 맡으며 UI 구현부터 데이터 흐름까지 여러 Task들을 경험했다.
컴포넌트의 분리
가장 많이 배운 부분은 '컴포넌트를 어떻게 재사용 가능하게 만들 것인가'였다. 처음에는 피그마 화면을 그대로 옮기는 데 집중했지만, 작업이 진행될수록 컴포넌트 이름, props 구조, 스타일 파일 위치, 시맨틱 태그 같은 작은 결정들이 팀 전체 개발 속도에 영향을 준다는 것을 느꼈다. 특히 HomeBanner, HomeCuratedCard, HomeNewNoticeCard, SearchBar 같은 컴포넌트를 구현하면서 단순히 보이는 대로 빠르게 구현하는 것보다 이후 조립과 수정이 쉬운 구조로 만드는 것이 더 중요하다는 점을 체감했다.
무한 캐러셀 구현
추천 공고 캐러셀을 구현한 경험도 기억에 남는다. 자동 슬라이드, 드래그 이동, 무한 루프, 클릭 방지 처리까지 고려해야 해서 생각보다 복잡했다. 처음에는 화면 이동만 되면 된다고 생각했지만, 실제 사용성을 생각하면 드래그 중 링크가 클릭되지 않도록 막거나, transition이 끊겨 보이지 않게 처리하는 등 디테일이 필요했다. 이 과정에서 useHomeFeaturedCarousel 훅으로 로직을 분리했고, UI 컴포넌트와 상태 관리 로직을 나누는 방식에 익숙해졌다. 특히 ref를 사용해 애니메이션 상태나 드래그 상태를 관리한 점이 좋은 학습이었다.
협업에서의 '컨벤션'
협업 측면에서는 컨벤션의 중요성을 크게 느꼈다. 브랜치, 커밋, 파일명, import 순서, 스타일 작성 방식까지 팀 규칙을 맞추는 과정이 처음에는 번거롭게 느껴졌지만, 나중에는 오히려 코드 리뷰와 병합을 훨씬 편하게 만들어줬다. PR을 작게 나누고, 리뷰를 반영하며 네이밍이나 구조를 계속 다듬는 과정에서 “내 코드”가 아니라 “팀이 함께 유지보수할 코드”라는 관점을 배웠다. 팀장님이 초반에 컨벤션을 잘 작성해 주어서 꼼꼼한 컨벤션에 잘 적응했던 것 같고 중요성을 잘 체감할 수 있었다.
아쉬웠던 점..
아쉬웠던 점도 있다. 초반에는 기능 구현에 급급해서 상태나 데이터 구조를 충분히 추상화하지 못한 부분이 있었다. 이후 리팩토링을 하며 상수 분리, 훅 분리, 네이밍 수정 등을 진행했지만, 처음 설계 단계에서 조금 더 확장성을 생각했다면 수정 비용을 줄일 수 있었을 것 같다. 또한 API 연동 단계에서는 서버 데이터와 목 데이터가 섞이는 부분이 있었는데, 실제 서비스라면 로딩/에러/빈 상태까지 더 촘촘하게 설계했어야 한다고 느꼈다.
결론
그래도 이번 프로젝트를 통해 React, TypeScript, vanilla-extract, TanStack Query를 실제 협업 환경에서 사용해볼 수 있었고, 모바일 웹에서 작은 UI 차이가 사용자 경험에 큰 영향을 준다는 점을 배웠다. 무엇보다 합동세미나를 하면서 프론트엔드가 단순히 화면을 예쁘게 만드는 역할이 아니라 기획과 디자인, 서버의 데이터를 사용자가 자연스럽게 경험할 수 있도록 연결하는 역할이라는 것을 더 선명하게 알게 되었다.
다음 프로젝트에서는 구현 전에 컴포넌트 책임과 데이터 흐름을 더 명확히 설계하고, QA 단계에서 발견되는 디테일을 줄일 수 있도록 초기부터 다양한 상태와 화면 크기를 함께 고려하고 싶다. 이번 LINKareer 프로젝트는 협업의 기준과 프론트엔드 개발의 디테일을 동시에 배운 프로젝트였다. 나와 함께 팀을 이루어 잘 지도해 준 팀원들에게도 감사드린다.
리포지토리 링크
https://github.com/SOPT-all/38-COLLABORATION-WEB-LINKAREER