- vercel
- TailwindCSS
- supabase
- NextJS
- shadcn/ui







핵심 기능
QR코드 등원 체크인
학생이 키오스크에서 QR코드로 등원을 체크하는 기능입니다. 체크인시 학부모에게 알림이 자동 발송 됩니다.
교재신청
키오스크를 통해 교재를 신청하는 화면 입니다. 관리자가 교재를 등록하고 학생이 신청하면 배포하는 구조 입니다.
수강신청
학생이 다음달 수강신청을 키오스크에서 하는 기능입니다. 관리자가 다음달 과정을 등록하면 키오스크에서 수강신청이 가능하게 됩니다.
담당 선생님 면담신청
학생이 필요할 경우 담당 선생님과 면담을 신청할 수 있습니다. 선생님이 가능시간을 미리 스케쥴에 등록하면 학생이 신청하여 면담이 성사됩니다.
자습실 자리 예약
미리 자습실의 좌석현황을 확인하고 좌석을 예약하여 자습을 할 수 있습니다. 자습실 관리에 필요한 기능 입니다..
프로젝트 상세
본 앱 및 서비스는 국풍국어학원-신갈관에서 실제 운영되고 있는 서비스 입니다. 다른 개발자의 데모 포토폴리오와는 다르다는 점을 알려 드립니다. 이점을 개발자 선정시 꼭 확인하셔야 사전에 피해를 막을수 있습니다.
1) 포트폴리오 소개
중·고등 학원을 위한 무인 출결·자습실 관리 키오스크입니다. 국풍국어학원-신갈관을 대상으로, 학생이
직접 등하원을 체크인하고 자습실 좌석·수강·교재·면담을 셀프로 신청하는 태블릿 키오스크를
개발했습니다. 데스크 업무를 줄이고, 등하원 시 학부모에게 즉시 알림이 가도록 설계한 교육(EduTech)
카테고리 서비스입니다.
2) 작업 범위
화면 설계(IA), UI/UX 디자인, 디자인 시스템(컬러 토큰·타이포·컴포넌트) 구축, 프론트엔드 개발을
진행했습니다. 태블릿 세로(포트레이트) 화면에 최적화했으며, 안드로이드/아이패드 태블릿 거치형 +
키오스크 모드(화면 고정) 환경을 지원합니다. 브라우저에서 바로 구동되는 무빌드 웹앱 형태로, 별도
설치 없이 태블릿에 띄워 키오스크로 사용할 수 있습니다.
3) 주요 업무
핵심 기능으로 ① QR·PIN 이중 방식 등하원 체크인과 학부모 알림톡 발송, ② 자습실 좌석 예약(1·2자습실
좌석맵, 빈자리·사용중·내 선택·점검중 상태 구분, 이용 시간 지정), ③ 고등부 국어
수강신청(강사·시간·잔여석 선택), ④ 교재신청(복수 선택·합계 계산), ⑤ 선생님·날짜·시간 기반 면담
예약을 구현했습니다. 메인 홈, 체크인, 좌석맵, 신청, 완료(알림톡 미리보기) 페이지를 구성하고, 작업
완료 후 자동 홈 복귀 흐름까지 처리했습니다.
4) 주안점
키오스크 특성상 누구나 직관적으로 쓸 수 있는 큰 터치 영역과 명확한 동선을 최우선으로 했습니다.
디자인은 Radix 기반 컬러 토큰과 4/8 그리드 여백 시스템으로 일관성을 확보했고, WCAG AA 대비를
충족하도록 색을 검증했습니다. 또한 등하원 시 학부모 알림을 통한 안심 서비스, 좌석 노쇼 방지를 위한
체크인 연동 등 학원 운영의 실제 페인포인트 해결에 중점을 두었습니다.