미리보기
기본 정보
동료들과의 협업을 통해 사용자에게 최적의 UI/UX 환경을 제공하는 과정을 즐기며 개발하고 있습니다. 디자이너 분들과는 Figma와 Storybook을 활용해 원활한 소통을 이어가며, 보다 직관적이고 사용성 높은 UX/UI를 설계하는 것에 집중하고 있습니다. 동료 개발자들과는 GitHub의 Pull Request를 중심으로 코드 리뷰 문화를 적극적으로 실천하며, 코드의 가독성과 효율성을 높이는 데 힘쓰고 있습니다. 페이지의 성능 최적화는 Lighthouse를 활용해 웹 성능 지표를 분석하고 페이지 로딩 속도, 접근성, SEO 등 전반적인 웹 환경의 완성도를 높이고자 노력하고 있습니다. 이러한 과정을 통해 사용자 중심의 서비스를 구현함과 동시에, 기술적으로 발전할 수 있는 방향을 지속적으로 시도하고 있습니다.
기술 스택
JavaScript, TypeScript, React, HTML/CSS, Next.js, Node.js, REST API, websocket, express.js, MongoDB, C, C++
프로젝트
🗺️ 어데고 (urdego)
프로그래머스 데브코스 프론트엔드 과정
2024.12. ~ 진행 중
프로젝트 개요
서비스: 사용자가 추천하고 싶은 장소나 소중한 추억이 깃든 장소를 가족, 커플, 친구들과 함께 사진을 매개로 지도상 위치를 추측하여 맞추는 게임 서비스
담당 : PM, 프론트엔드
사용 기술: React TypeScript next.js styled component zustand storybook websocket SSE
담당한 기능
마이페이지
유저 검색 / 유저 초대
게임 대기방 / 인 게임
기여한 부분
github action ci/cd 적용
github project와 연동하여 각 팀원의 업무 진행상황을 보다 체계적으로 확인할 수 있는 환경 구성
Lighthouse 프로그램과 연동하여 최신 내용으로 인해 변경된 전체 성능이 70% 미만일 시 merge가 불가능 하도록 환경 세팅
UI의 컴포넌트화 및 원활한 협업을 위해 StoryBook 작성
공통으로 사용되는 UI 세분화 하여 컴포넌트화 시켰습니다. 페이지 구성시 최대한 컴포넌트 재사용을 지향하여 생산적인 페이지 구현 방식을 채택했습니다.
각 공통 사용 컴포넌트 마다 Storybook을 작성하였으며, 이후 개발자와 디자이너 간의 미팅 시간이 기존보다 약 30% 단축되어 보다 효율적인 업무가 가능해졌습니다.
SEO 적용
Next.js의 metadata 활용: 전역 메타데이터를 관리하고 페이지별 메타 태그 설정을 통해 검색 엔진 최적화를 구현했습니다.
검색 엔진 색인 개선: next-sitemap을 적용하여
robots.txt및sitemap.xml을 자동 생성하고, 검색엔진이 웹사이트의 허용된 페이지를 빠르고 정확하게 찾고 크롤링 할 수 있도록 최적화했습니다.SEO 성능 개선 성과:
Lighthouse SEO 점수 72% → 100% 향상
검색 엔진 색인 최적화로 검색 노출 속도 개선 (구글 서치 콘솔 반영 시간 단축)
실시간 통신(SSE, Websocket) 구현 및 최적화
1차 MVP
유저 초대 기능을 위한 SSE 통신 기반 실시간 알림 서비스 구현했습니다.
게임 대기방과 인 게임 내의 실시간 통신을 js 클래스 웹소켓 통신으로 구현했습니다.
2차 MVP
기존에 분리되어 있던 알림 서비스와 게임 통신 서버를 하나로 통합하여, 클라이언트 사이드에서 발생하던 불필요한 성능 소모를 줄였습니다. 이를 통해 WebSocket 하나만으로 실시간 통신을 효율적으로 유지하도록 개선하였습니다.
기존에 싱글톤 패턴으로 구현된 WebSocket 클래스를 React Hook으로 변경하여, 리액트 라이프 사이클에 최적화된 실시간 통신 요청 및 응답 구조로 개선하였습니다. 이를 통해 컴포넌트 단위의 효율적인 자원 관리와 안정적인 데이터 흐름을 확보했습니다.
구현 페이지 기능개선
마이페이지의 Lighthouse 렌더링 성능을 52%에서 100%로 대폭 개선하였습니다.
이전 페이지에서 받아온 데이터를 전역 상태로 관리하여 불필요한 API 요청을 줄였고, 이를 통해 Total Blocking Time을 1,330ms에서 520ms로 단축했습니다.
또한,
useMemo를 활용하여 자식 컴포넌트의 불필요한 재렌더링을 방지함으로써 성능 최적화를 이뤄냈습니다.
트러블 슈팅
포트폴리오
교육
프로그래머스 데브코스 프론트엔드 1기
사설 교육 | 컴퓨터공학
2024.07. ~ 2024.12. | 졸업
42서울
사설 교육 | 컴퓨터공학
2022.10. ~ 2024.07. | 졸업
우석대학교
대학교(학사) | 컴퓨터공학
2015.03. ~ 2021.07. | 졸업
자기소개
"서비스 기획에서 개발로, 새로운 도전의 시작”
외국인 관광객을 위한 QR 오더 서비스 스타트업을 창업하며 개발에 관심을 갖게 되었습니다. 저의 IT 서비스 업무경험의 시작은 서비스 기획자로서 페이퍼 및 디지털 프로토타입을 제작해 UX/UI를 설계하는 것이었습니다. 제작안 기획을 바탕으로 개발자들과 협력하여 외국인 고객용 앱과 매장 관리용 앱을 함께 개발하는 경험을 할 수 있었습니다. 이 과정에서 30개의 매장을 가맹점으로 두는 성과를 거둘 수 있었고 이런 서비스를 직접 개발하고 싶다는 열망이 생겼습니다. 이를 계기로 개발자로서의 길을 걷기로 결심하게 되었습니다.
“전과를 통해 개발에 첫 발을 내딛다”
개발 역량을 쌓기 위해 생명과학 전공에서 컴퓨터공학으로 전과하였습니다. 새로운 전공에서 기본적인 이론을 익히며 학업에 매진한 결과, 교내 학술제에서 비행 슈팅 게임을 개발해 수상하는 성과를 거두었고, 전공 과목에서 전과 이후 2년간 4.0/4.5라는 학점을 유지하며 졸업할 수 있었습니다.
“협업을 통한 학습법으로 프로그래밍 기본기를 향상시키다”
42서울 프로그램에 참여하며 프로젝트 기반 학습과 동료 학습을 통해 c, c++ 언어를 기반으로 한 소프트웨어 개발 역량을 키웠습니다. 특히, 동료들과 300번 이상의 코드 리뷰를 진행하고 23개의 프로젝트를 발전시킨 경험은 협업 능력과 문제 해결 역량을 크게 성장시킨 계기가 되었습니다.
“서비스 기획 경험과 프로그래밍 기본기를 웹 서비스 개발에 녹여내다”
앞서 쌓아온 기획과 개발 공부의 경험을 웹 서비스 개발에 접목시키며, 프로그래머스 데브코스 프론트엔드 과정을 수료했습니다. 이 과정에서 총 4개의 프로젝트를 진행했으며, 그중 두 개의 프로젝트에서는 팀장으로서 디자이너 팀과 협력해 기획을 관리하고, 개발팀과 기술적인 논의를 주도하며 프로젝트 전반을 이끌었습니다. 이 경험을 통해 웹 기술 분야에서 기획과 개발 역량을 더욱 성장시킬 수 있었습니다.
“동료들과 함께 성장을 이어가는 개발자”
현재는 데브코스의 마지막 프로젝트를 동료들과 함께 고도화하며 앱과 웹 서비스 출시를 목표로 최선을 다하고 있습니다. 앞으로도 지금까지의 도전과 경험을 바탕으로 사용자에게 더 나은 가치를 제공하는 서비스를 개발하며, 지속적으로 성장하는 개발자가 되고자 합니다. 감사합니다.