미리보기
기본 정보
동료들과의 협업을 통해 사용자에게 최적의 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)
프로그래머스 데브코스 프론트엔드 과정
진행 중
프로젝트 개요
서비스: 사용자가 추천하고 싶은 장소나 소중한 추억이 깃든 장소를 가족, 커플, 친구들과 함께 사진을 매개로 지도상 위치를 추측하여 맞추는 게임 서비스
담당 : 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
"SSE 통신 기반 알림 서비스 -> 웹소켓 통신" 으로 통합 변경
웹 소켓 class 싱글톤 패턴 -> react hook 으로 변경
구현 페이지의 기능개선
트러블 슈팅
포트폴리오
교육
프로그래머스 데브코스 프론트엔드 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++ 언어를 기반으로 한 소프트웨어 개발 역량을 키웠습니다. 특히, 동료들과 400번 이상의 코드 리뷰를 진행하고 23개의 프로젝트를 발전시킨 경험은 협업 능력과 문제 해결 역량을 크게 성장시킨 계기가 되었습니다.
“서비스 기획 경험과 프로그래밍 기본기를 웹 서비스 개발에 녹여내다”
앞서 쌓아온 기획과 개발 공부의 경험을 웹 서비스 개발에 접목시키며, 프로그래머스 데브코스 프론트엔드 과정을 수료했습니다. 이 과정에서 총 4개의 프로젝트를 진행했으며, 그중 두 개의 프로젝트에서는 팀장으로서 디자이너 팀과 협력해 기획을 관리하고, 개발팀과 기술적인 논의를 주도하며 프로젝트 전반을 이끌었습니다. 이 경험을 통해 웹 기술 분야에서 기획과 개발 역량을 더욱 성장시킬 수 있었습니다.
“동료들과 함께 성장을 이어가는 개발자”
현재는 데브코스의 마지막 프로젝트를 동료들과 함께 고도화하며 앱과 웹 서비스 출시를 목표로 최선을 다하고 있습니다. 앞으로도 지금까지의 도전과 경험을 바탕으로 사용자에게 더 나은 가치를 제공하는 서비스를 개발하며, 지속적으로 성장하는 개발자가 되고자 합니다. 감사합니다.