🏫 알바스쿨 프로젝트 회고

이 프로젝트를 한 지는 오랜 시간이 지났지만, 이제서야 회고를 쓴다. 내가 처음 제대로 참여한 팀 프로젝트였고, 내 아이디어가 채택돼서 진행한 프로젝트였기 때문에 가장 애정이 가는 프로젝트인 것 같다. 20대 초반부터 했던 치킨집 알바, PC방 알바, 편의점 알바를 하면서 느꼈던 문제점들을 바탕으로, '이런 서비스가 있으면 너무 좋을 것 같아! ' 생각하며 기획을 했다.

처음 기획한 화면

나는 이 때 피그마도 쓸 줄 모르고, 내가 머리에 떠오르는 생각들을 바로 그리고 싶어서 아이패드에 손수 그려서 팀원들에게 보여줬다. 내가 낸 아이디어였기 때문에 내가 책임감을 갖고 해야겠다는 생각, 그리고 팀원들에게 이게 진짜 개발할만한, 필요한 서비스라는 것을 설득시키고픈(?) 마음에 열심히 했던것 같다 ㅋㅋㅋㅋㅋ 

 

우선, 내가 알바를 하면서 겪었던 문제점들을 생각하면, 

 

첫 번째, 알바 교육이 너무 비효율적이다. 

알바는 보통 6개월 이상을 하면 '오, 길게 했네?' 라고 하는 경우가 대부분이고, 많은 알바생들이 그 전에 그만둔다. 그러면 사장님은 계속 해서 똑같은 내용의 교육을 반복해야 하고, 이로 인해 발생하는 피로로 인해 교육 내용 또한 부실한 경우가 많다. 또한 당연히 모든 내용을 한 번에 가르칠 수 없고, 알바 또한 한 번 들은 것을 다 외울 수 없기 때문에 알바는 모르는 것이 생길 때마다 사장님에게 연락을 해야하는 문제가 발생한다. 이렇게 되면 사장님도, 알바생도 피곤해진다. 

 

두 번째, 퇴사 후 연락처 정리를 해야하는 불편함이 있다.

보통 알바의 경우 사장님과 연락처 교환을 하고, 단톡방에 초대되는 경우가 대부분이다. 아까 말했듯이 알바 기간은 보통 짧은데, 원하지 않아도 연락처 교환을 통해 개인 정보 노출을 해야한다. 그리고 그만 둔 경우에는 카톡 단톡방도 나가야하는데, 이러한 과정들이 좀 껄끄럽게 느껴질 때가 많다. 알바의 입장에서도 그렇지만 사장님의 입장에서도 그럴 것이라고 생각한다. 사장님의 경우는, 특히나 더 많은 알바생들을 상대하기 때문에 연락하지 않는 쓸데없는 카톡 친구가 정말 많지 않을까 싶다.. 

 

이러한 문제점들을 바탕으로 이것을 해결할 수 있는 서비스가 있었으면 좋겠다고 생각했고, 팀원들과 아이디어를 종합하여 아래와 같은 기능을 개발하기로 했다. 

1.  매뉴얼 관리 시스템 (교육)
: 업종별 표준화된 매뉴얼 제공, 업무 관련 자료 공유 기능

2. 스케줄 관리 시스템
: 실시간 스케줄 공유

3. 업무용 메신저
: 매장별 그룹 채팅, 공지 사항 전달, 실시간 알림 시스템

 

➡️ 팀원들과 회의를 하면서 스케줄 관리 기능이 추가돼서 더 퀄리티가 좋은 프로젝트가 됐다. 사장님 입장에서는 가게별로 일하는 직원의 스케줄을 한 눈에 확인할 수 있고, 알바 입장에서는 일주일 단위로 개인 알바 일정을 확인할 수 있어 편리하다. 

 

🛠️ 사용 기술

• React: 컴포넌트 단위로 UI 를 구성하고, 상태 변화에 따른 렌더링을 통해 동적 기능을 안정적으로 구현하기 위해 선택 
• Typescript : 타입 안전성을 위해 선택
• Tanstack Query : 간편한 서버 데이터 관리를 위해 사용, 코드 복잡성을 줄이고 성능을 최적화
• Zustand : 로그인 상태, 채팅 아이콘과 읽지 않은 메시지 같은 일부 전역 상태 관리를 위해 사용, 구조가 단순하고 가벼워 프로젝트 규모에 맞게 빠르게 상태를 공유하기 위해 선택
• MUI : 기본 UI 컴포넌트를 빠르게 구성하고 일관성 있는 디자인을 적용하기 위해 선택
• Styled-components : 컴포넌트 단위로 스타일을 관리하고, 재사용 가능한 UI 를 만들며 유지보수성을 높이기 위해 선택

 

👩🏻‍💻 맡은 역할

 

아이디어 제안부터 UI / UX 기획까지 주도적으로 참여했고 로그인, 회원가입, 교육 페이지 등 핵심 화면 10개 이상을 직접 구현했다. 인증과 사용자 정보 관리는 Zustand 로 전역 상태를 관리해 페이지 간 상태 동기화를 단순화했고, Tanstack Query 를 활용해 서버 상태를 캐싱하고 불필요한 API 요청을 줄였다. 사용자 권한별 라우팅 보호와 맞춤형 접근 제어를 구현해 알바와 사장님이 각자 맞는 화면만 볼 수 있도록 처리했다.  

 

🗝️ 개선하고 싶은 부분

import {create} from "zustand";

interface StoreState {
  isloggedIn: boolean;
  storeLogin: (token: string) => void;
  storeLogout:() => void;
}

export const getToken = () => {
  const token = localStorage.getItem('token');
  return token;
}

const setToken = (token: string) => {
  localStorage.setItem('token', token);
}

export const removeToken = () => {
  localStorage.removeItem('token');
}

export const useAuthStore = create<StoreState>((set) => ({
  isloggedIn: getToken() ? true: false,
  storeLogin : (token: string) => {
    set({isloggedIn: true});
    setToken(token);
  },
  storeLogout: () => {
    set({isloggedIn: false});
    removeToken();
  }
}));

현재는 로그인 정보를 localStorage 에 저장해 인증 상태를 유지하고 있는데, 보안적으로 토큰이 브라우저에 그대로 남는 구조라 개선이 필요하다고 느꼈다. 

 

⛓️‍💥 localStorage 에 로그인 토큰을 저장하는 방식의 문제점

• XSS 공격에 취약: 로컬스토리지에 저장된 토큰은 클라이언트 자바스크립트에서 접근 가능하기 때문에, 만약 사이트에 크로스 사이트 스크립팅 취약점이 있다면 공격자가 토큰을 쉽게 탈취할 수 있다.
• 토큰 노출 위험: 브라우저의 개발자 도구나 다른 확장 기능을 통해 사용자가 토큰을 직접 조회하거나 복사할 수 있어, 타인과 공유될 위험이 있다.
• 자동 만료 / 갱신 어려움: 로컬스토리지는 만료 시간을 관리하지 않으므로, 토큰 만료 시 자동 로그아웃이나 토큰 갱신 로직 구현이 까다롭다. 

💡개선 방향

• 백엔드에서 JWT 토큰을 httpOnly, Secure 쿠키에 저장하여 클라이언트 자바스크립트가 토큰에 접근하지 못하도록 보안을 강화한다.
• 로그인 상태 확인은 클라이언트에서 직접 토큰을 다루는 대신, 인증 확인 API를 호출하여 서버가 쿠키 내 토큰을 검증한 후 사용자 정보를 응답받아 상태를 관리한다.
• 상태 관리 라이브러리에서는 사용자 정보 및 로그인 여부만 관리해 토큰 노출 위험을 줄인다. 
• JWT 토큰에 적절한 만료 시간을 두고, 필요 시 Refresh Token 으로 갱신하는 인증 흐름을 도입해 보안을 강화한다. 

 

✍🏻 배운 점

 

제대로 각을 잡고 진행한 팀 프로젝트는 처음이어서, 배운점이 굉장히 많았던 것 같다. 너무 운좋게도, 실력 좋은 팀원들과 함께해서 Vite, pnpm 같은 최신 도구들을 사용해 개발 환경 구축하는 법도 배웠고, TanStack Query 를 활용해 API 연동과 서버 상태 관리도 효율적으로 할 수 있게 되었다.

 

피그마를 사용해서 초기 화면을 기획하면서 UI/UX 설계의 중요성을 직접 체감할 수 있었다. 이전에는 초기 기획이 제대로 되어 있지 않아서 프로젝트 구조를 이해하는 데 어려움이 있었고, 팀 내 혼란도 발생했었다. 하지만 이번에는 기획을 확실히 해놓고 개발을 진행해 그런 혼란이 없이 개발 시간이 크게 단축되는 경험을 했다.

 

또, 깃허브를 활용한 협업 경험이 많이 향상된 것 같다. PR 템플릿 적용, 커밋과 브랜치 컨벤션 정립, 충돌 해결 등의 과정을 통해 협업과 버전 관리를 체계적으로 수행하는 법을 배웠다. 

 

🔗 깃허브 링크

https://github.com/albaschool/frontend