<aside> 💻
새로운 기술과 개념을 배우는 데 주저하지 않으며, 직접 다루고 적용하면서 성장해 나갑니다. 사용자 경험을 고려한 성능 최적화를 통해 완성도 높은 서비스를 만들어 나갑니다. 또한, 개발자 경험까지 고민하며 팀과 프로젝트가 함께 성장할 수 있도록 노력합니다.
</aside>
☎️ 010-8237-2487 ✉️ [email protected] 🧑🏻💻 부산 SW마이스터고등학교 - 소프트웨어 개발과 재학 중
깃허브 - https://github.com/junghongseop
블로그 - https://blog-hong.vercel.app
2023 1학년 4반 부반장
2023 DevCoop 1학년 Project Manager
2024 밤돌이로 Project Manager
Design 2명 Backend 2명 Frontend 3명
부산SW마이스터 고등학교 입학 전형 시스템 2024.04 ~ 2024.12
Github
https://github.com/Bamdoliro/marururu
Link
Stack
Next.js styled-components recoil axios react-query
TypeScript Storybook
회고록
<aside>
마루는 부산소프트웨어마이스터고등학교의 새로운 입학전형 플랫폼입니다.
이 플랫폼은 입학 과정에서 지원하는 학생과 담당 선생님 모두에게 더욱 편리한 환경을 제공하는 것을 목표로 개발되었습니다.
학생들은 입학 설명회 일정 조회 및 신청, 원서 작성 및 관리, 입학 등록 등의 기능을 이용할 수 있으며, 선생님들은 원서 관리, 단체 메시지 발송, 입학 지원자 분석 데이터 제공 등 입학 업무에 필요한 다양한 기능을 활용할 수 있습니다.
2024년부터 사용하여 앞으로 계속해서 사용할 예정입니다.
</aside>
클라이언트 기능 구현 및 퍼블리싱
<aside>
입학전형 설명회
선생님들이 등록한 입학 전형 설명회를 조회하고, 클릭하면 설명회 신청 폼으로 이동합니다.
getFairList를 통해 서버와 API를 연결하며, useFairListQuery 훅은 React Query를 사용해 입학 전형 설명회 데이터를 효율적으로 페칭하고 상태를 관리합니다. React Query는 데이터 캐싱, 동기화, 로딩 및 에러 상태 관리 기능을 자동으로 제공하여 네트워크 요청을 최적화하고 사용자 경험을 향상시킵니다. 또한 queryKey를 활용해 데이터를 구분하고 쿼리 상태를 간단하게 처리할 수 있습니다.
입학 설명회의 상태 및 종류에 따라 조회할 수 있도록 구현했으며, FairList 컴포넌트에서는 grid-template-columns 속성을 사용해 아이템을 두 개의 열로 배치했습니다.
원서 관리
현재 원서 상태를 확인할 수 있으며, 접수증, 수험표, 원서를 발급하고 학교 연락처도 확인할 수 있습니다.
getFormStatus를 통해 서버에서 사용자의 원서 상태를 받아옵니다. 또한, GetFormStatusRes 인터페이스를 사용해 서버에서 받아오는 데이터의 타입을 지정했습니다.
getExportForm, getExportRecipt, getAdmissionTicket을 통해 서버에서 파일을 받아오며, 사용자가 원하는 경우 다운로드할 수 있도록 구현했습니다. 단, 일정이나 원서 상태에 따라 다운로드가 제한될 수 있도록 방지 로직을 추가했습니다.
개인정보 약관
회원가입 시 사용자는 개인정보 약관에 필수적으로 동의해야 가입할 수 있습니다.
이를 위해 선생님들에게 개인정보 약관 내용을 확인하고, 그 의견을 반영하여 디자인을 설계한 후 퍼블리싱을 진행했습니다.
원서 작성
지원자는 지원자 정보, 보호자 정보, 출신 학교 및 학력, 성적 입력, 자기소개서 등의 단계를 거쳐 원서를 작성합니다.
form 폴더의 page.tsx에서는 @toss/react 라이브러리의 SwitchCase를 사용해 단계별 화면을 렌더링하며, useFormStep.ts에서 Recoil을 활용해 상태를 관리합니다.
공통 UI를 줄이기 위해 FormLayout을 구성했고, FormStatusManager와 SaveFormManager를 통해 상태별 이동 가능한 페이지를 구분하고 원서를 저장하도록 했습니다.
처음에는 5분마다 자동 저장되도록 했으나, 아무것도 작성하지 않은 상태에서 저장되면 Redis에서 원서를 불러오지 못하는 문제가 발생해, 단계를 넘어갈 때만 저장되도록 수정했습니다.
교무부 시연 중, 빈 항목이 있을 경우 작성 후 넘어가도록 요청받아, 각 페이지에서 미입력 시 경고 메시지를 띄우도록 구현했습니다.
최종 제출 후에는 1차 합격일과 안내 메시지를 표시하고, 접수증을 발급할 수 있는 버튼을 추가했습니다.
입학 등록
최종 합격한 지원자는 입학 등록을 해야 하며, 직접 방문이 아닌 마루를 통해 온라인으로 제출합니다.
공지사항에 게시된 입학 등록 양식을 다운로드해 작성한 후, 스캔하여 PDF로 변환해 업로드하면 됩니다.
‘서류 제출’ 버튼을 클릭하면 patchFormEnter를 통해 서버와 API를 연결하고, 지원자의 원서 상태를 ENTERED로 변경합니다. 파일 업로드는 원서 상태가 PASSED인 경우에만 가능하도록 했으며, 파일을 업로드하지 않았거나 업로드 중일 경우 버튼이 비활성화되도록 처리했습니다.
</aside>
어드민 기능 구현 및 퍼블리싱
<aside>
입학전형 설명회
입학전형 설명회 일정에 맞게 담당 선생님께서 일정을 생성및 조회가 가능합니다.
fair/post에서 폼 링크, 타입, 장소, 날짜, 신청 시작과 마감일을 작성해주면 postFair를 통해 서버와 API를 연결하여 일정을 생성합니다.
fair에서는 생성된 일정을 교사와 학생으로 구분하며 진행중과 마감된 일정으로 보여주도록 했습니다.
분석 페이지
지원자 수(경쟁률), 성적 분포, 지원 전형 비율, 지원자 성비, 출신 학교 현황을 제공하여 담당 선생님들이 서류 작업을 보다 편리하게 할 수 있습니다.
추가 요청에 따라, 지원자 수(경쟁률)와 지원 전형 비율에서 1차 합격 전후의 결과를 비교할 수 있도록 수정했습니다.
변경 전후에는 서버에 요청해야 하는 값이 다르므로, getNumberOfApplicantsList를 통해 적절한 쿼리 스트링을 전송하여 1차 합격 전후 데이터를 각각 받아오도록 구현했습니다.
</aside>
배포 전 QA 작업
입학 기간 중 발생한 프론트엔드 이슈의 신속한 대응 및 해결
Next.js 13 및 14 활용 경험
SSR, ISR, App Router 등의 최신 기능을 적극 활용하여 성능 최적화 및 유지보수를 고려한 개발을 수행했습니다.
특히, Middleware를 활용하여 인증및 요청 로깅을 처리하는 등 보안성과 성능을 고려한 개발 경험이 있습니다.
이를 통해 불필요한 API 요청을 줄이고, 사용자 경험을 개선하는 효과를 얻었습니다.
백엔드 개발자와 디자이너와의 협업 경험
백엔드와 협업하여 기존의 S3 직접 업로드 방식에서 보안 문제를 해결하기 위해 Presigned URL을 도입하고, 성능을 최적화했습니다.
또한, 교무부 피드백을 반영해 UI/UX를 개선하고, 증명사진 크기 조절 모달을 추가하여 사용자 편의성을 높였습니다.
디자이너와 협력해 직관적인 인터페이스를 설계하고, 이미지 리사이징 로직을 최적화하는 등 원활한 소통을 통해 다양한 문제를 해결한 경험이 있습니다.
배포 후 발생한 문제를 분석하고 신속히 해결하며 사용자 경험을 최적화 배포 후 발생한 문제를 신속히 분석하고 해결하며 사용자 경험을 최적화했습니다. 사용자 피드백과 모니터링 로그를 통해 오류를 파악하고 대응했으며, 지원서 제출 시 파일 누락 문제가 발생하는 원인을 분석했습니다. 이는 업로드 완료 전에 사용자가 웹을 닫아 발생한 문제로, 업로드 진행 중 모달을 표시하는 방식으로 수정하여 해결했고, 이후 동일한 오류는 재발하지 않았습니다.
<aside> 🚨 1. 학생이 허용되지 않은 특수 문자를 입력해 회원가입이 진행되지 않았다고 제보했습니다.
입학생 지원자 중 이름이 20자를 초과한 경우가 있어 문제가 발생했습니다. 이는 회원가입에서 이름 제한이 없어 가입된 그대로 원서에 반영되었기 때문입니다.
입학 전형 중 어드민 페이지에서 갑자기 이미지가 표시되지 않는 문제가 발생했습니다.
서버 점검으로 일시 중지하는 동안, 접속한 사용자에게 지속적으로 500 오류 페이지가 표시되는 문제가 발생했습니다.
입학 전형 진행 중, 전형별 경쟁률 환산식 오류로 인해 데이터 시각화가 잘못되었습니다.
로그인하지 않았거나 일정에 따라 접근이 제한돼야 하는 페이지에도 접속할 수 있는 문제가 있었습니다.
검정고시는 합격 연도만 입력하면 되지만, 불필요한 입력 필드가 표시되는 문제가 있었습니다.
증명사진은 3×4cm 크기의 사진만 업로드가 가능했었습니다.
</aside>
<aside>
💡 1. 비밀번호 입력창 아래에 특수문자(!@#*$%*&*? **중에서만 입력**)문구를 추가하였습니다.
ReadOnly 설정을 해제하고, 유효성 검사에서 입력값이 없거나 2자 이하 또는 20자 이상일 때 검토하도록 수정했습니다. 또한, 외국인의 경우에는 alert로 안내하여 문제를 해결했습니다.
Vercel의 Image 태그 요청 한도를 초과하여 문제가 발생했으나, Vercel Pro를 구매하여 해결했습니다.
점검 중에는 점검 페이지로 이동하여 다른 페이지 접근을 차단했습니다.
빠른 시간내에 올바른 수식으로 계산되도록 수정하였습니다.
middleware.ts에서 LocalStorage의 토큰 확인 및 일정에 따른 접근 제한을 적용해, 허용되지 않은 경우 경고창을 띄우도록 해결했습니다.
검정고시는 합격 연도 필드만 표시하고, 나머지 필드는 빈 문자열로 임시 저장되도록 수정했습니다.
react-easy-crop을 활용해 3×4cm 이상의 사진을 선택하면 모달을 띄워, 사용자가 직접 자를 수 있도록 구현했습니다.
</aside>
배포 후 원서 접수 기간 3일 동안 약 30,000+의 트래픽이 발생하는 큰 규모의 프로젝트를 경험할 수 있었습니다.
**”마루”**는 2023 밤돌이로 선배들께서 일부 개발한 프로젝트였기에, 모든 페이지를 처음부터 만들지는 않았습니다. 하지만 기존 코드를 수정하고 기능을 개선하는 과정에서 코드의 구조를 깊이 이해하고, 유지보수의 중요성을 체감할 수 있었습니다. 또한, 실제 사용자 피드백을 반영한 개선 작업, 협업을 통한 코드 수정 및 확장 등을 경험하며 실무에 가까운 개발 역량을 쌓았습니다. 그리고 입학전형이 끝난 이후 부터 두번째 버전을 만들면서 추가 기능과 코드를 효율적으로 변경하는 작업들을 진행하고 있습니다.
특히, 실제 운영 과정에서 예상치 못한 문제들이 발생했지만, 이를 즉각적으로 해결하며 서비스 안정성을 유지하는 경험을 할 수 있었습니다. 실시간으로 오류를 빠르게 분석하고 수정하면서, 문제 해결력과 운영 대응 능력을 키울 수 있었습니다.
이 프로젝트를 통해 기존 시스템을 분석하고 개선하는 능력을 키울 수 있었습니다. 이전보다 훨씬 더 성장할 수 있었습니다.