SSAFY · Portfolio

기자를 준비하다 데이터 저널리즘을 거쳐 개발을 만났고, SSAFY 7기에 합격하면서 진로를 바꿨습니다. 1학기에는 오전 9시부터 새벽 1시까지 자리를 지키며 Python, 알고리즘, Django, Vue를 배웠고, 사용자와 가장 가까운 곳에서 일하고 싶어 프론트엔드를 택했어요. 2학기의 세 프로젝트에서는 매번 다른 기술(Vue 3, React Native, React + TypeScript)을 골라 새로 배우면서 만들었습니다. 그 과정은 SSAFY 7기 1년 회고에 자세히 남겨 두었습니다.

아래 스크린샷은 각 프로젝트 저장소의 시연 화면입니다.

무비플레이리스트

영화 OST와 명대사로 영화를 추천하는 서비스. 1학기 최종 프로젝트, 반 최우수상

기간·팀: 2022.05.18 – 05.27 (9일), 2명. 프론트엔드·화면 설계·데이터 수집은 제가, 추천 알고리즘과 Django 백엔드는 팀원이 맡았습니다.
스택: Vue 2, Vuex, Django REST Framework, SQLite, Bootstrap, TMDB API

한 일

화면 명세와 컴포넌트 구조를 설계하고, 로그인·회원가입·프로필 화면을 만들었습니다.
홈의 박스오피스·명대사·편지 위젯, "이 노래 어디 나왔더라" OST 페이지, #무플리 해시태그 플레이리스트, 배우 상세 페이지와 전체 CSS를 맡았습니다.
OST 목록은 BeautifulSoup으로 음원 사이트에서 직접 수집했습니다.
교수님 조언으로 Atomic Design을 적용했는데, 처음부터 구조를 완벽하게 나누려다 시간을 많이 썼습니다. 컴포넌트 구조는 기능과 함께 자라게 두는 편이 낫다는 걸 이때 배웠어요.

반 교수님과 동기들의 평가로 반 최우수 프로젝트에 뽑혔습니다. 1학기 관통 프로젝트 10개를 돌아본 글은 관통 프로젝트 회고에 있습니다.

코윗미 (Coding with me)

강사가 웹 IDE로 보낸 코드를 학생이 받아 실행하고 시험까지 보는 1:N 코딩 교육 서비스. 2학기 공통 프로젝트

기간·팀: 2022.07.08 – 08.18 (6주), 5명 (서울 3반 A304)
스택: Vue 3 (Composition API), Pinia, Quasar, vee-validate, OpenVidu(WebRTC), Spring Boot, MySQL

첫 주에 다른 프론트엔드 팀원 두 명이 모두 취업으로 과정을 떠나, 백엔드 4명과 프론트엔드 1명으로 진행했습니다. 그래서 Figma로 와이어프레임 → 스토리보드 → 화면 설계까지 기획도 거의 맡았어요.

한 일

Vite 기반 Quasar 프로젝트를 세팅하고, 화면 디자인과 공통 스타일을 만들었습니다.
JWT 로그인·회원가입(아이디 중복 확인, 폼 검증, 역할별 라우팅과 내비게이션 가드), 마이페이지를 구현했습니다.
LMS 기능: 반 개설·수정, 학생 검색·추가, 캘린더 출석 체크, 성적표, PDF를 올리고 내려받는 시험 출제 화면을 만들었습니다.
강사·학생 강의 화면과 시험 화면, 채팅 UI를 OpenVidu(WebRTC) 화상 강의 위에 붙였습니다.
배포 단계에서 Pinia 상태 유지와 라우터 모드(history → hash), base URL 문제를 고쳤습니다.

처음 쓰는 Vue 3와 Quasar였기에 블로그보다 공식 문서를 먼저 정독하는 습관이 이때 생겼습니다. 사용자 흐름 순서대로 만들다 핵심 기능이 늦어진 아쉬움은 다음 프로젝트에서 "핵심 기능부터"라는 원칙으로 바꿨어요.

책크인

바코드로 책을 등록하고, 책 속 문장을 OCR로 기록하고, 취향에 맞는 책과 독서 모임을 추천받는 앱. 2학기 특화 프로젝트, 우수상

기간·팀: 2022.08.29 – 10.07 (6주), 6명. 팀장, 프론트엔드·디자인
스택: React Native (Expo), React 18, Google Cloud Vision, Spring Boot, FastAPI(협업 필터링 추천), Redis, Jenkins

한 일

OCR 문장 기록: 갤러리나 카메라로 찍은 책 페이지를 Google Cloud Vision으로 읽어 메모로 저장하는 기능을 처음부터 끝까지 만들었습니다. 이미지를 Base64로 인코딩해 보내야 한다는 걸 알려 주는 문서가 거의 없어 주말 이틀을 들여 원인을 찾았어요.
독서 모임: 모임 홈, 개설, 상세, 삭제, 댓글과 대댓글을 만들었습니다.
추천 홈: 협업 필터링 추천, 베스트셀러, 비슷한 책 API를 붙인 홈 화면을 만들었습니다.
하단 탭과 헤더 내비게이션, 폰트, 스플래시, 아이콘과 로고까지 앱 디자인을 맡았고, Flexbox로 반응형 화면의 80% 이상을 구현했습니다.
팀장으로서 기획이 여러 번 바뀌는 동안 팀을 끝까지 이끌어 출시했고, 지역 발표회 발표도 맡았습니다.

SSANTA CLINIC

3D 산타 마을에서 친구에게 선물 상자를 보내는 크리스마스 웹 어드벤트 캘린더. 2학기 자율 프로젝트

기간·팀: 2022.10.11 – 11.21 (6주), 6명 (서울 2반 A201). 팀장, 프론트엔드
스택: React 18, TypeScript, react-three-fiber, framer-motion, MUI, SCSS, react-media-recorder, Spring Boot, S3

채용 공고에서 자주 보이는 TypeScript를 일부러 골랐고, 앞선 프로젝트를 답습하지 않는 것을 목표로 삼았습니다.

한 일

어드벤트 캘린더: 날짜별 모달, 크리스마스 카운트다운, 당일 전에는 열리지 않는 잠금, 상자 애니메이션과 날짜별 상자 개수를 만들었습니다.
선물 상자 보내기: 사진과 음성 메시지를 담아 보냅니다. 브라우저에서 녹음한 음성을 multipart/form-data로 올리고, 받은 사람은 상자를 열어 재생합니다.
테트리스 미니게임, 친구 검색과 팔로우, 페이지별 배경음악, 눈 내리는 CSS 애니메이션을 만들었습니다.
ESLint·Prettier 설정, README, 발표 자료와 포팅 매뉴얼을 맡았습니다. (3D 마을 구현은 팀원들의 몫이었어요.)

돌아보며

네 번의 프로젝트에서 매번 새 프레임워크를 골랐습니다. 덕분에 처음 보는 기술을 공식 문서로 빠르게 익히는 법을 배웠고, 이 경험이 첫 회사에서 React, Vue, React Native, Nest.js를 오가는 힘이 됐습니다.
팀장을 두 번 맡으며 리더는 좋은 사람으로 남는 자리가 아니라, 각자 잘하는 것을 끌어내 결과까지 데려가는 자리라는 걸 배웠습니다.
과정 중에는 SSAFY 기자단(SSAFYcial)으로 한 달에 두 번 기사를 썼습니다. 2022 프론트엔드 프레임워크 트렌드, Next.js...누구세요? 같은 글이에요. 수료한 뒤에도 수료생 기자단으로 AX 개발자 같은 글을 기고하고 있습니다.
이때 시작한 TIL 저장소는 4년 동안 커밋 320여 개, 노트 130여 개로 쌓였고, 지금은 이 사이트의 지식 창고로 옮겨 왔습니다.