신한Q&A

2025.07 - 2026.04 · UI 디자인, 프론트엔드 개발

Next.js
TypeScript
Tailwind CSS
Turborepo
TanStack Query

개요

학과 학생들이 수업과 학과 운영에 대한 의견을 남기고 답변을 받는 서비스로 시작해, 자유게시판과 Q&A, 프로젝트와 스터디 모집 게시판을 갖춘 학과 커뮤니티로 발전했습니다. 방향이 바뀌면서 프론트엔드를 새로 만들었고, 새 버전은 학생용 앱과 관리자용 앱을 Turborepo 모노레포로 나누어 UI와 API, 타입을 공통 패키지로 함께 쓰도록 구성했습니다. 기획 1명, 안드로이드 1명, 백엔드 1명, 디자인과 프론트엔드 1명으로 구성된 팀에서 서비스 디자인과 웹 프론트엔드를 맡았습니다.

기여도

UI 디자인
100%
학생용과 관리자용 화면, 공통 컴포넌트, 다크모드까지 포함한 디자인 시스템을 설계했습니다.
프론트엔드 개발
100%
레거시 버전과 새 버전에서 학생용, 관리자용 웹 프론트엔드를 모두 개발했습니다.
인증 및 BFF 구성
100%
학생과 관리자 인증, 사이버캠퍼스 학생 검증, Route Handler 기반 API 프록시를 구현했습니다.

주요 작업

Turborepo 모노레포 구성
학생용 앱과 관리자용 앱을 분리하고, UI 컴포넌트와 API 클라이언트, 타입을 공통 패키지로 만들어 두 앱이 함께 쓰도록 구성했습니다.
커뮤니티 기능
자유게시판, Q&A, 프로젝트 모집, 스터디 모집 게시판과 게시글 및 댓글 작성, 좋아요, 신고 기능을 구현했습니다. 서버 상태는 TanStack Query로 관리하고, 데이터가 바뀐 뒤에는 필요한 목록만 다시 불러오도록 했습니다.
사이버캠퍼스 학생 검증
회원가입 시 사이버캠퍼스 계정으로 로그인해 학적 정보를 확인하고, 소프트웨어융합학과 학생만 가입할 수 있도록 만들었습니다.
BFF와 쿠키 기반 인증
브라우저가 백엔드를 직접 호출하지 않도록 Route Handler가 요청을 대신 전달하고, 토큰은 HttpOnly 쿠키로 관리했습니다. 로그인과 로그아웃, 토큰 갱신도 Route Handler로 처리했습니다.
관리자 대시보드
신고된 게시글과 댓글을 확인하고 삭제할 수 있는 관리자 화면을 만들었습니다. 모바일에서는 사이드바를 드로어로 바꾸고, 신고 표는 가로로 스크롤되도록 했습니다.
접근성과 다크모드
Modal, Tabs, Dropdown 같은 공통 컴포넌트에 ARIA 속성과 키보드 조작을 추가했습니다. 색상을 시맨틱 토큰으로 정리해 모든 화면에 다크모드를 적용했습니다.

담당 업무

서비스 UI 디자인과 디자인 시스템 설계
레거시 Next.js 프론트엔드 개발
Turborepo 기반 새 프론트엔드 설계와 개발
학생용 커뮤니티 화면 개발
관리자 대시보드 개발
카카오 로그인, JWT 인증과 사이버캠퍼스 학생 검증 구현
Route Handler 기반 BFF 구성과 API 연동
접근성, 반응형, 다크모드 대응

문제 해결 과정

한 앱에 섞여 있던 학생 기능과 관리자 기능
문제
레거시 버전은 학생 화면과 관리자 화면이 한 앱에 함께 있어서, 페이지마다 관리자인지 판별하는 코드와 미들웨어의 리다이렉트 조건이 계속 늘어났습니다.
해결
새 버전에서는 Turborepo로 학생용 앱과 관리자용 앱을 완전히 분리했습니다. 공통 UI와 API 클라이언트, 타입은 패키지로 나누어 두 앱이 같은 코드를 쓰면서도, 인증과 라우트 보호는 각 앱이 따로 관리하도록 만들었습니다.
수동으로 진행하던 학생 인증
문제
레거시 버전은 학생증 사진을 올리면 관리자가 직접 확인해 승인하는 방식이라, 가입까지 시간이 걸리고 관리자가 요청을 매번 처리해야 했습니다.
해결
회원가입 과정에서 사이버캠퍼스에 로그인해 학적 정보를 바로 확인하도록 바꿨습니다. 로그인 실패와 다른 학과, 학적 정보 확인 실패를 구분해 안내하고, 확인을 마친 학생만 다음 단계로 넘어가도록 회원가입을 2단계로 나눴습니다.
학생과 관리자 로그인 상태 충돌
문제
학생용 앱과 관리자용 앱이 같은 이름의 인증 쿠키를 쓰고 있어서, 한쪽에 로그인하면 다른 쪽의 로그인 상태에 영향을 줄 수 있었습니다.
해결
학생용 앱은 student_, 관리자용 앱은 admin_ 접두사를 붙여 인증 쿠키를 완전히 분리했습니다.
로그인 후 리다이렉트를 악용한 외부 이동
문제
로그인 후 원래 보던 페이지로 돌아가도록 경로를 쿼리로 받다 보니, 외부 주소를 넣어 사용자를 다른 사이트로 보낼 수 있었습니다.
해결
리다이렉트 경로가 서비스 내부 경로인지 확인한 뒤에만 이동하도록 Open Redirect 방어를 추가했습니다.