미리보기

인턴 직위로, 37개국으로 확산하는 삼성닷컴 어플리케이션을 CMS로 관리하고 QA하는 업무를 맡았습니다. 각 나라마다 다른 언어와 문화에 대응하고, 서로 다르게 기획된 캠페인을 진행하는 데 차질을 겪지 않도록 관리하는 일이 업무의 목표입니다.

첫 학기동안 풀스택 중심의 웹 프로그래밍 기술 습득을 위해 Java, Spring Boot, Vue.js 학습을 진행하고 동시 편집이 가능한 공공 데이터 기반 여행 서비스를 개발해서 우수상을 수상했습니다.

두 번째 학기에는, 총 3번의 팀 프로젝트에서 프론트엔드 개발 파트를 이끌었습니다. 컴포넌트 기반 개발 방법론에 입각하여 생산성을 높이고 storybook, MSW와 같은 도구를 도입하여 개발을 용이하게 한 경험이 있습니다. 개인적으로는 Next.js의 렌더링 전략을 적극적으로 활용하기 위해 학습했고 웹 바이탈에 대한 분석을 통해 사용자의 최초 진입 시점을 1.8초에서 0.8초로 단축시키기도 했습니다. 프로젝트를 수행하는 데 주어진 6주 내에 요구 사항을 만족하는 결과를 얻기 위해 팀원의 개발 현황을 관리하는 데 집중하면서 성공적으로 프로젝트를 마무리했고 총 2번의 우수상을 수상했습니다.

약 4개월간, 웹 프론트엔드 개발의 기초적인 지식과 기술을 학습하였습니다. JAM 스택 기반의 교육 커리큘럼을 수강하고, React를 활용해서 소셜 네트워크 서비스를 개발하였습니다.

타인과 비교하는 삶에서 벗어나서 바른 습관을 정립할 수 있게 돕는 서비스입니다.
(Next.js, React, TailwindCSS, Three.js, Framer-motion, Storybook)

기여한 내용
6명으로 이루어진 팀에서 프론트엔드 개발 리드 역할 수행
렌더링 전략(SSG, ISR) 수립 및 적용
여러 폼에서 발생하는 데이터 저장과 서비스 플로우 파악에 강점이 있는 useFunnel 구현 및 활용
선언적으로 모달, 바텀시트, 토스트 메시지를 제어할 수 있는 useOverlay 구현 및 활용
웹 바이탈인 FCP, LCP, CLS 성능 지표를 개선하고 최초 웹 컨텐츠 렌더링 속도를 1.8초에서 0.8초로 단축
폰트 스왑으로 인한 CLS 지표 점수의 악화를 막기 위해 Next.js의 로컬 폰트 기능 활용
지연 로딩을 적극적으로 활용하여 서비스 진입 시 로드하는 JavaScript chunk의 크기를 줄여 통신 비용 절감

얻은 경험
간트 차트를 꼼꼼히 작성하고 팀원의 진행 상황을 관리하면서 빠르게 MVP를 구성할 수 있었습니다.
요구 시에 페이지를 업데이트하여 화면을 렌더링하기 위한 리소스를 절감할 수 있었습니다.
성능 개선을 하면서 WebPageTest 서비스를 통해 리소스의 waterfall 현상을 포착하고 해결할 수 있었습니다.
비교적 제한적인 모바일 환경에서 성능 개선을 통해 원활한 서비스 사용 환경을 구성할 수 있었습니다.
우수상(2등)을 수상했습니다.

아이의 경제 교육을 위한 핀테크 서비스입니다.
(Next.js, React, TailwindCSS, Zustand, ApexCharts.js, MSW, Express.js, Storybook, Playwright)

기여한 내용
6명으로 이루어진 팀에서 프론트엔드 개발 리드 역할 수행
컴포넌트 문서화를 통해 접근하기 편한 환경을 구축하는데 강점이 있는 Storybook 도입
사용자 시나리오를 보장하기 위한 E2E 테스트 도구인 Playwright 도입
프로젝트에 MSW를 도입하고, 서버 컴포넌트 환경에서 fetch시에 동작하지 않는 문제를 Express를 차용하여 해결
실시간으로 변화하는 주가와 차트를 구현하기 위해 웹소켓 기술을 적용
결제 비밀번호 입력 시 발생할 수 있는 보안 취약점을 고려한 번호 데이터를 키패드 내 좌푯값으로 대체

얻은 경험
스토리를 작성해서 컴포넌트가 활용될 수 있는 방안을 미리 작성해두면, 팀원이 쉽게 활용할 수 있었습니다.
백엔드 개발자가 API를 마련하기 전에 mocking한 API를 연결해두어서 개발하는데 시간을 절약할 수 있었습니다.
정적 사이트 생성(SSG) 개념을 활용하여 업데이트가 더디거나 정적인 자원을 캐싱하는 기능의 편의성을 알았습니다.
XSS 공격을 막기 위해 사용자 입력의 유효성을 검사할 때 스크립트 입력을 막는 행위의 중요성을 알았습니다.
우수상(1등)을 수상했습니다.

동네 어르신들이 간소한 심부름이나 동행을 쉽게 요청할 수 있는 모바일 웹 서비스입니다.
(React, styled-components, Zustand, Axios, 카카오 지도 API)

기여한 내용
6명으로 이루어진 팀에서 프론트엔드 개발 리드 역할 수행
개발 환경을 미리 구축하고 공통 컴포넌트 생성을 주도하여 생산성 증대
하나의 페이지에서 하나의 목적을 달성하기 위한 디자인 설계
사용자가 입력에 부담을 느끼지 않도록 화면을 나누면서도 개발 경험을 향상시키는 useFunnel 개발
지도, 조건 기반으로 사용자를 매칭하는 기능 개발
표준 EventSource 객체를 활용하여 SSE에 의해 촉발되는 알람 기능 개발
코드 리뷰 도구인 Gerrit을 사용하여 공통 컴포넌트 위주로 리뷰를 진행

얻은 경험
공통 컴포넌트 설계와 개발을 통해 페이지를 빠르게 구축할 수 있었습니다.
합성 컴포넌트 패턴을 사용하여 하위 컴포넌트에서 발생하는 상태를 상위에서 손쉽게 관리할 수 있었습니다.
미리 개발 환경을 구성해 보고 제공하는 패턴만으로도 팀 구성원들이 안정적으로 개발에 참여할 수 있었습니다.
화면이 많을수록 사용자 시나리오 시뮬레이션의 중요하다는 점을 느꼈습니다.
리드하는 입장에서 프로젝트 진행 상황을 지속해서 확인하고, 수정하는 일의 중요성을 알았습니다.

지도 위에서 실시간 동시 편집을 통해 여행 경로를 계획하고, 여행 카드를 지인과 공유하는 서비스입니다.
(Vue3, Pinia, SpringBoot, MySQL, Redis, Yorkie.js, TOAST UI Editor, 카카오 지도 API, 카카오톡 공유 API)

기여한 내용
모던한 웹 페이지 디자인을 위해 SLASH23 사이트를 벤치마킹하고, 12개의 페이지를 마크업
장소 검색 조건을 반영하여 지도의 중심점을 변경하는 기능 추가
사용자가 초대한 지인만 열람이 가능한 동시 편집 페이지로 라우팅하고, 여행 장소를 경로에 추가/삭제하는 기능 구현
화면의 일부분을 캡처 후 이미지로 다운로드하고, 메신저로 공유하는 기능 구현
여행과 관련한 게시물의 다양성을 위해 마크다운/위지윅 Editor로 생성하는 기능을 추가
별도의 클릭 없이 스크롤로 추가 게시물을 조회할 수 있도록 무한 스크롤 기능 추가

얻은 경험
사용자가 서비스를 직관적이고 빠르게 이해할 수 있는 UI에 대해 고민하였습니다.
제한된 시간 안에 프로젝트를 이끌기 위해 데이터 스키마 정의에 집중하고 병렬적으로 개발을 수행하였습니다.
표준 HTML 사양의 input 요소의 value를 양방향 바인딩하기 위해 한글의 IME가 필요한 특성을 고려하였습니다.
실제 사용자처럼 서비스를 사용하면서 발견하는 오류를 해결했고, 블랙박스 테스트의 중요성을 깨달았습니다.
서비스가 정의하는 사용자의 수준에 따라 페이지의 접근 권한을 달리하는 중요성을 알았습니다.
개발하는 도중에 이슈를 구성원과 실시간으로 공유하면서 협업 도구 사용의 이점을 알았습니다.
차별화된 기능을 구현하기 위해 외부 API나 라이브러리를 선별하여 도입하는 안목이 중요하고 생각했습니다.
우수상(2등)을 수상했습니다.

대학 내 뷔페의 메뉴를 확인하고 관리하기 위한 서비스입니다.
(TypeScript, Node.js, Express.js, MongoDB, Netlify, cloudetype.io)

기여한 내용
모바일 환경을 기준으로 보기 편한 메뉴 페이지를 마크업
오늘을 기준으로 4주간의 메뉴를 볼 수 있도록 날짜 변경 기능 추가
메뉴 생성, 수정이 간편한 관리자 페이지를 마크업
달력 형식의 UI를 관리자 페이지에 추가
메뉴 데이터를 MongoDB에서 관리하는 Node.js 기반의 API 서버 구현

얻은 경험
실제 수요층에 대한 분석을 기반으로 서비스를 기획하고 디자인하는 중요성을 알았습니다.
서비스 의뢰인과 지속적으로 소통하며, 피드백을 즉시 반영하는 애자일한 프로세스의 이점을 깨달았습니다.
타입의 혼동을 방지하기 위해 TypeScript를 활용하여, 개발자 경험을 높일 수 있는 이점을 느꼈습니다.
클라이언트와 서버 구조를 분리하고 RESTful API를 구현하면서 각 진영의 확장이 용이하겠다고 생각했습니다.
관계형 데이터베이스를 활용할 때보다 느슨한 스키마 정의가 가능한 NoSQL의 장점을 느꼈습니다.
배포 도중 발생한 오류들을 해결하면서 클라우드 서비스가 요구하는 조건에 대해 상세히 살펴보기 시작했습니다.

우울장애 분류를 위한 인공지능 모델을 Python 기반으로 구축하고 분류 정확도와 정밀도를 향상시키는 연구를 진행하고 논문을 작성 및 발표하였습니다. 재귀적 특성 제거법을 활용하여 학습에 유효한 데이터를 선정하고 서포트 벡터 머신으로 학습을 진행하였습니다. 초기에 45% 내외의 분류 정확도를 나타냈던 모델에서 71.8%의 정확도와 80% 내외의 정밀도를 나타내는 모델로 발전하는 결과를 얻었습니다.