미리보기
기본 정보
사용자의 반응에 따라 동적인 서비스를 제공하는 개발에 큰 매력을 느껴 프론트엔드 개발자로 성장하고 있습니다. 기획, 디자인, 개발의 전 과정에 걸친 경험을 통해 향상된 의사소통 능력을 갖추고 있으며, 팀원들과 협력하여 효율적인 해결책을 찾는 것을 즐깁니다. 꾸준한 성장과 발전을 위해 Next.js 공식 문서를 스터디하며 새로운 기술을 학습하고 있으며, 이를 실제로 적용하기 위해 개인 블로그를 Next.js로 개발하는 프로젝트를 진행 중입니다.
자기소개
Mindset
사용자 중심의 사고를 바탕으로 최적의 사용자 경험을 제공하기 위해 노력합니다.
지속적인 학습과 성장을 통해 최신 기술 트렌드에 적응합니다.
협업과 소통을 중요시하여 팀원들과 원활한 협력을 이룹니다.
Communication
프로젝트의 주요 내용을 체계적으로 기록하여 팀원들과 공유합니다.
Frontend
React Hooks를 활용하여 상태 관리 및 생명주기 관리의 효율성을 높입니다.
TypeScript를 사용하여 코드의 안전성을 높이고 디버깅을 효율적으로 수행합니다.
TanStack Query를 이용하여 데이터 페칭, 캐싱 및 동기화를 효율적으로 처리하며 서버와 클라이언트 상태를 일관되게 유지합니다.
Zustand를 이용한 전역 상태 관리를 통해 데이터 흐름을 원활하게 유지합니다.
Styled-components를 기반으로 CSS-in-JS 방식으로 반응형 디자인과 조건부 스타일링을 구현합니다.
반응형 웹 디자인을 적용하여 다양한 기기에서 최적의 사용자 경험을 제공합니다.
Git을 통해 버전 관리를 수행하고 팀원들과의 협업을 지원합니다.
경력
애드펄스
사원 | UX/UI팀 | 재직 중
2024.06. ~ 재직 중 (8개월)
이커머스 전문 솔루션 업체에서 다양한 쇼핑몰 서비스의 프론트엔드 개발을 담당하며 UI/UX 개선, 성능 최적화, 반응형 웹 구현에 기여했습니다.
디자인 통일성을 제공하고 개발 생산성을 높이기 위해 디자인 시스템을 설계하였고, ESLint와 StyleLint를 주도적으로 도입하여 코드 컨벤션을 설정하고 가독성을 향상시켰습니다.
필요한 기능이 있을 경우 기획 및 디자인 단계에도 참여하여 더 나은 가치를 전달하는 데 기여하였으며, 작업 내역과 진행 과정을 문서화하여 팀의 협업 효율을 높였습니다.
알로카도스
인턴 | 개발팀
2022.11. ~ 2023.04. (6개월)
사내 협업툴 Gracy의 Frontend 개발을 담당하며, React와 TypeScript를 활용해 유지보수와 기능 구현을 진행했습니다. Gracy 소개 페이지와 Gracy 서비스 페이지를 반응형으로 구현하였고, Zustand로 상태관리를 최적화하여 sidebar 조건부 렌더링을 개선했습니다. 입력 검증 시스템을 리팩토링해 코드 재사용성을 높이고 오류 처리 로직을 통합하여 사용자 경험을 개선했습니다.
또한, 디자이너 및 백엔드 개발자와의 협업을 통해 사용자 요구 사항을 효과적으로 반영하며 팀의 개발 프로세스를 이해하고 원활한 소통을 경험했습니다.
프로젝트
AutoPlace, 공간 대여 서비스를 자동화해서 운영할 수 있는 서비스
사이드 프로젝트
2024.12. ~ 진행 중
AutoPlace는 파티룸과 같은 공간 대여 서비스를 자동화하여 효율적으로 운영할 수 있도록 돕는 서비스입니다. IoT 기기와 연동하여 난방, 에어컨, 도어락 등을 웹으로 제어할 수 있으며, 인원 추가 및 노래방 결제까지 비대면으로 처리할 수 있는 기능을 제공합니다.
상세 역할
기기 제어 페이지 및 각 기기별 제어 상세 페이지 리팩토링, 추가 기능 구현 및 변경된 UI 적용
[ SSR 도입 및 초기 로딩 최적화]
문제 정의
기존 코드가 Next.js와 TypeScript로 작성되었으나, 모든 페이지가 클라이언트사이드 렌더링(CSR)방식으로 구현되어 성능 저하 및 초기 로딩속도 지연 발생
하나의 useEffect에 여러 로직이 처리되어 코드 가독성과 유지보수성 저하
API 호출 로직이 분리되지 않고 호출하는 곳에서 직접 작성되어 재사용성 부족
localStorage와 Zustand의 중복 상태 관리로 인한 상태 동기화 문제 발생 및 불필요한 렌더링
주도적 해결
서버사이드 렌더링(SSR) 도입: SSR이 필요한 데이터는 서버에서 사전 렌더링하고, 상호작용이 필요한 데이터는 CSR으로 처리하여 성능을 최적화. 이를 통해 초기 로딩 속도를 개선하면서 동적 데이터 처리도 유연하게 대응
API 호출 로직 분리 및 데이터 처리 최적화: API 호출 로직을 분리하고, CSR로 불러오는 데이터는 Tanstack Query를 사용하여 관리
Zustand의 Persist 상태 관리 적용: 상태 관리 일관성을 유지하고, 중복된 상태 관리를 줄여 코드 복잡도 감소
핵심 성과
초기 로딩 속도 개선: SSR 도입으로 초기 로딩 시간을 단축시켰으며, FCP는 33%, LCP는 약 4% 개선
코드 구조 개선: 복잡했던 useEffect와 API 호출 로직을 서버 측으로 분리하고 클라이언트에서의 로직을 단순화하여 코드 가독성과 유지보수성 향상
상태 관리 최적화: Zustand Persist를 적용하여 상태 동기화 문제를 해결하고, 중복 상태 관리로 인한 불필요한 렌더링을 줄여 성능을 개선
링크 포텐데이 프로젝트
Edutube, 강의 및 커피챗 오픈마켓 서비스
멋쟁이 사자처럼 프론트엔드 스쿨 플러스
2023.11. ~ 2023.12.
에듀튜브는 교육 관련 영상을 카테고리별로 묶어 쉽게 시청할 수 있도록 서비스를 제공하고 커피챗을 통해 사용자들이 지식 공유를 할 수 있도록 도움을 주는 플랫폼입니다.
진행 과정
매일 아침 스크럼을 통해 Google Sheet를 활용한 작업 과정 공유, 노션을 이용하여 컨벤션과 회의록 정리, 깃허브를 활용하여 이슈 생성 및 팀원간 코드리뷰 진행
상세 역할
커피챗 게시물 CRUD, 예약 및 장바구니 기능, 후기 입력 및 전체 요약 보기 기능 개발, TailwindCSS 설정 및 전체적인 기획 및 디자인 업무 담당 (FE 3명)
[초기 로딩 속도 최적화]
문제 정의:
초기 페이지 로딩 속도가 지연되어 사용자 경험이 저하됨
구글 라이트하우스 점수에서 낮은 웹 성능 점수를 기록, 특히 이미지 로딩 속도에서 문제가 발견됨
주도적 해결:
지연 로딩과 무한 스크롤 구현: React Query와 Intersection Observer API를 활용하여 초기 로딩 시 화면에 필요한 데이터만 서버에서 가져오고, 이후 데이터는 사용자의 스크롤에 따라 동적으로 로드되도록 무한 스크롤 기능을 도입
이미지 최적화: 구글 라이트하ac우스를 통해 성능 저하의 원인이 된 이미지 로딩 속도를 개선하기 위해, 배너 이미지의 확장자를 PNG에서 WEBP 형식으로 변경하여 더 빠른 로딩이 가능하도록 최적화
핵심 성과:
초기 로딩 속도 개선: SSR 및 데이터 지연 로딩 전략을 통해 초기 로딩 시간 단축, 사용자 경험향상
웹 성능 점수 10점 상승: 구글 라이트하우스 성능 점수를 10점 이상 향상시켜, 최적화된 웹페이지 제공 및 SEO 개선에 기여
[Atomic 디자인 패턴 도입으로 개발 효율성 개선]
배경:
일관된 사용자 경험을 제공하고, 개발 과정의 생산성을 높이기 위해 Atomic 디자인 패턴 도입의 필요성 인식
주도적 해결:
Atomic 디자인 패턴 조사 및 적용: 프로젝트의 규모와 요구사항에 맞춰 atom, block, view 단계로 구성된 디자인 시스템을 직접 설계하고 구현
통합 디자인 및 개발: Figma를 활용하여 atom 컴포넌트를 직접 디자인하고, 이를 기반으로 재사용 가능한 컴포넌트를 구축하여 UI/UX 일관성을 강화하고 개발 효율성을 극대화
개발 생산성 향상: Atomic 디자인 패턴을 직접 설계하고 적용하여 코드 중복을 줄이고, 개발 시간을 단축하여 팀의 생산성 향상에 기여
링크 저장소 링크
게스 블랙 프라이데이 쿠폰 발급 시스템: 사용자 경험 향상 및 실시간 처리
애드펄스
2024.11. ~ 진행 중
목표
Guess Korea의 블랙프라이데이 이벤트 페이지에서 랜덤 및 정기 쿠폰 다운로드 기능 구현을 통해 사용자 참여를 유도하고, 이벤트 경험을 개선
[게스 블랙 프라이데이 이벤트 랜덤 쿠폰 다운로드 기능 개발]
문제 정의:
블랙 프라이데이 이벤트에서 랜덤 쿠폰 제공 및 시간대별 쿠폰 발급 제어 필요
비효율적인 로딩 구조로 인해 발급 처리 속도 저하 문제 발생
주도적 해결:
효율적인 데이터 확인 유틸리티 구현: 특정 데이터와 DOM 요소의 준비 상태를 주기적으로 확인하는 비동기 반복 검사 로직을 구축하여 이벤트 로직의 안정성과 효율성 확보
오류 상황별 안내 모달 설계: 발급 수량 소진, 중복 발급 등 다양한 오류 상황에 따라 사용자에게 명확한 안내 메시지를 제공하도록 인터페이스 구성
쿠폰 발급 로직 최적화: 데이터 페칭과 사용자 인터랙션 과정을 최적화하여 사용자 요청을 빠르게 처리
핵심 성과:
쿠폰 발급 과정 간소화: 불필요한 중복 요청 방지로 서버 리소스 효율화
유지보수 및 확장성 강화: 재사용 가능한 함수와 구조 설계
오류 상황별로 모달 표시하여 사용자 경험 개선
오드삭스
애드펄스
2024.09. ~ 2024.10.
[추천 상품 노출 및 반응형 UI 개선으로 UX 최적화]
문제 정의:
게시판 추천 상품
고객사의 요청으로 게시판 페이지에 게시물 별 추천 상품 리스트 새롭게 노출
카테고리 메뉴 구조
게시판 내 카테고리 구조가 단순하여 탐색 효율성이 떨어지고,
원하는 콘텐츠로의 접근성이 저하됨
주도적 해결:
게시판 추천 상품 리스트 개선
동적 데이터 로드 및 필터링: 서버에서 추천 상품 데이터를 가져오고, 고객사의 요구에 맞는 상품만 필터링하여 자동으로 갱신되도록 구현
lazy-loading 적용: 이미지 로딩 시 loading="lazy" 속성을 추가하여 초기 로딩속도 최적화
반응형 UI 작업
resize 이벤트 처리: 디바운스를 적용하여 화면 크기 변경 시 모바일/데스크탑 환경에 맞게 동적으로 조정
반응형 CSS 클래스 추가: 디바이스별 최적화된 환경을 제공하기 위해 only_mobile 및 only_pc 클래스를 동적으로 적용
카테고리 메뉴 구조 확장
동적 하위 카테고리 생성: API에서 카테고리 데이터를 가져온 후, 게시판 메뉴에 하위 카테고리를 동적으로 추가
핵심 성과
프로모션 효과 강화
동적 추천 상품 노출로 상품의 업데이트 효율성이 증대
lazy-loading 구현으로 초기 로딩 속도를 단축하고 사용자 경험 향상
반응형 UI 적용
반응형 UI 적용으로 다양한 디바이스 환경에서도 편리한 탐색 가능
카테고리 탐색 편의성 증대
하위 카테고리를 자동 생성하고 탐색 경로를 동적으로 설정하여 콘텐츠 접근성을 개선
링크: 오드삭스 페이지
Gracy, 사내 문화 증진을 위한 협업툴 서비스
알로카도스
2022.11. ~ 2023.04.
Gracy는 사내 구성원의 업무 효율을 높이고, 사내 문화 및 구성원 간 소통을 강화할 수 있는 다양한 인사관리 기능을 제공하는 서비스입니다.
상세 역할
회사 홈 메인 페이지 레이아웃 및 반응형 작업, 문의하기 기능과 입력 폼 유효성 검사 구현, Zustand로 상태 기반 sidebar 조건부 렌더링, 팀 상세 조회 시 팀 이름을 이용한 쿼리스트링 라우터 변경, 로그인 및 회원가입 입력값 실시간 에러 감지 기능 구현, 사내 팀원 무작위 대화 및 특정 주제 대화 기능 설정 페이지 레이아웃 및 반응형 작업, welcome 페이지 레이아웃 구현
[통합된 오류 처리 시스템 개발 및 사용자 경험 개선]
문제 정의:
폼에서 입력 값이 비어있는 상태로 전송되는 경우에 대한 예외 처리가 되어 있지 않아 사용자 혼란 발생
여러 페이지에서 입력 값의 오류 메시지가 중복된 코드로 관리되어 유지보수가 어려운 상황을 확인
주도적 해결:
필수 입력 값에 대한 예외 처리를 추가하여 사용자 오류를 방지하고, 전송 과정의 신뢰성을 향상
입력 값과 오류 상태를 관리하고 오류 메시지를 일관되게 반환하는 커스텀 훅을 리팩토링하여, 모든 페이지에서 통합된 오류 처리 로직을 적용
핵심 성과:
일관된 오류 처리 시스템 구축으로, 에러 메시지 수정 시 개발 생산성 향상
사용자 입력 오류 감소로 사용자 경험이 개선되고, 입력받은 데이터 관리 편의성 증가
링크 Gracy 페이지
금방내방, 인테리어 SNS 서비스
멋쟁이 사자처럼 프론트엔드 스쿨
2022.07. ~ 2022.08.
금방내방은 사용자가 자신의 인테리어 사진을 등록하거나 가구 판매 링크를 업로드할수 있는 SNS 웹 서비스입니다.
진행 과정
매일 아침 스크럼과 Google Sheet를 통한 작업 공유. 팀원의 집이나 Zoom을 활용한 협업으로 빠른 의사소통 진행
상세 역할
메인 피드 페이지와 검색 기능 페이지 개발, 프로필 이미지 미리보기 컴포넌트와 하단 NavBar 컴포넌트 생성, 전체적인 기획 및 디자인 작업 담당 (FE 4명)
트러블 슈팅
Axios instance 생성과 API 분리를 통한 코드 중복 최소화와 가독성 향상
검색 값 검증 후 요청 방식 적용으로 불필요한 서버 요청 문제 해결
base64 인코딩 방식 적용으로 프로필 이미지 미리보기 기능 향상
성과 및 기여
Git flow를 도입하기 위해 팀원들과 함께 학습하여 프로젝트에 적용
axios를 이용한 API 통신 방법 및 react 사용 방법 익혀 기능 구현
링크 저장소 링크
대외활동
멋쟁이 사자처럼, 대학생 프로그래밍 동아리
멋쟁이 사자처럼
리액트 스터디에 참여하여 컴포넌트 라이프사이클 메서드, 그리고 리액트 Hooks에 대한 개념과 사용 예제를 정리하여 발표했습니다.
해커톤에서는 리더로서 팀원의 역할 분담과 회의 진행을 주도하였으며, 프로젝트 기획 단계부터 개발 및 배포까지 참여하였습니다.
교육
성신여자대학교
대학교(학사) | 서비스디자인공학과 주전공 | 컴퓨터공학과 복수전공 | 학점: 3.83
2017.03. ~ 2022.02. | 졸업
멋쟁이 사자처럼 프론트엔드 스쿨
사설 교육 | 프론트엔드
2022.03. ~ 2022.08. | 졸업
멋쟁이 사자처럼 프론트엔드 스쿨 플러스
사설 교육 | 프론트엔드
2023.10. ~ 2023.12. | 졸업
자격증
정보처리기사
필기 및 실기 최종 합격 | 한국산업인력공단
2022.06.