한국방송통신대학교
컴퓨터과학과 학사 편입/졸업
안녕하세요,
프론트엔드 개발자 이유정입니다
에이전시에서 다양한 프로젝트를 경험하며 성장하고 있습니다
반응형 웹, TV 애플리케이션, 하이브리드 앱 등 다양한 환경에서 최적화된 UI를 개발해왔습니다. 프로젝트마다 다른 요구 사항에 맞춰 유지보수성, 확장성, 재사용성이 높은 코드 구조를 설계하며, 효율적인 개발 프로세스를 고민하고 적용하는 데 집중하고 있습니다.
즐거운 사용자 경험을 제공하는 것을 중요하게 생각합니다
GSAP, Three.js, SVG 애니메이션을 활용한 인터랙티브 웹 구현과 디자인 시스템 고도화, 크로스 브라우징 대응, TV 및 웹뷰 최적화 등의 경험을 바탕으로 사용자 경험 향상에 기여하고 있습니다.
Career
2021.01.11 - 현재
에이치나인퍼블리싱 및 UI 개발
다양한 디지털 플랫폼의 UI/UX 개발, 성능 최적화 및 인터랙티브 웹 구현을 담당하였습니다. 주요 프로젝트에서 UI/UX 최적화, 컴포넌트 개발, 인터랙션 설계 및 유지보수를 담당하며, 사용자 경험 향상과 개발 생산성 증대에 기여하였습니다.
- React, Next.js, VanillaJS 환경에서 컴포넌트 UI부터 페이지 단위까지의 퍼블리싱 작업 수행
- Web Component 기반의 모듈화된 UI 컴포넌트 설계를 통해 코드 재사용성을 높이고 유지보수성을 강화
- GSAP, Three.js, SVG 애니메이션을 활용한 인터랙티브 웹 구현, 트렌디한 인터랙션 기획 및 최적화 적용
- Media Query를 활용한 반응형 UI 개발 및 특정 디바이스 환경(Webview, TV, 크로스 브라우징 등)에 최적화된 UI/UX 대응
- 성능 개선을 위한 애니메이션 및 렌더링 최적화
- 스타일 가이드에 맞춘 디자인 토큰 및 테마 커스터마이징
Experience
01
한화 드림플러스 포털 개편
한화 드림플러스의 공식 홈페이지 구축(개편)했습니다. 드림플러스는 스타트업들의 성장을 지원하는 프로그램과 공간을 제공하는 한화생명의 브랜드입니다.
2024.11 - 2025.01
02
삼성전자 삼성닷컴 프로토타입
삼성전자의 삼성닷컴 홈페이지 UI / UX 개선 관련 프로토타입 페이지를 작업했습니다.
2024.08 - 2024.12
03
삼성전자 SPACE UX 통합 개발
사내 분리된 5개의 서비스를 하나의 플랫폼으로 통합하여 통일된 UI/UX를 기반으로 신규 플랫폼을 구축하였습니다.
2024.01 - 2024.07
04
퀸버스퀘어 HENCE (헨스)
사용자가 자신의 취향 탐색과 소비를 한 플랫폼에서 가능하도록 SNS와 쇼핑이 결합된 모바일 웹뷰 하이브리드 앱 서비스입니다.
2023.03 - 2023.1
05
이노부스트 공식 홈페이지
제약 바이오 기업을 대상으로 토탈 솔루션 및 컨설팅 서비스를 제공하는 전문 에이전시 홈페이지를 구축했습니다.
2022.12 - 2023.03
06
삼성전자 Samsung Experience Plus
Samsung Experience Plus는 삼성전자의 다양한 제품과 콘텐츠를 탐색할 수 있는 TV Web App 서비스 입니다.
2022.06 - 2023.03
07
SK하이닉스 Signal Design System 고도화
기존 SK 하이닉스 내부 디자인 시스템을 유지보수 및 추가 개발하는 고도화 작업에 참여했습니다.
2021.06 - 2022.02
Web Frontend Developer
Web Frontend Developer
Web Frontend Developer
Stacks
NextJS
- Next.js 14 버전 이상의 App Router 방식을 사용하여 프로젝트를 개발할 수 있습니다.
- SSR, SSG, ISR(Incremental Static Regeneration) 렌더링 방식을 이해하고 적용할 수 있습니다.
- 클라이언트 컴포넌트와 서버 컴포넌트를 구별하여 사용할 수 있습니다.
- API Routes를 활용하여 서버와의 데이터 통신을 구현할 수 있습니다.
- Metadata 및 SEO 최적화를 위한 head 설정과 Open Graph 태그를 활용할 수 있습니다.
- 이미지 최적화를 위해 next/image를 활용할 수 있습니다.
ReactJS
- React의 컴포넌트 기반 아키텍처를 이해하고 효율적으로 활용할 수 있습니다.
- React Hooks(useState, useEffect, useMemo, useCallback 등)를 적극적으로 활용할 수 있습니다.
- debounce, throttle 등의 커스텀 훅을 제작해 웹 성능을 최적화할 수 있습니다.
- Zustand를 활용하여 전역 상태 관리를 할 수 있습니다.
- React-hook-form을 활용하여 효율적으로 폼 유효성을 관리할 수 있습니다.
- React Portal을 활용하여 모달과 같은 컴포넌트 렌더링을 제어할 수 있습니다.
Javascript / Typescript
- ES6 문법을 사용할 수 있습니다.
- Vanilla Javascript 사용에 익숙합니다.
- async / await을 통한 비동기 처리가 가능합니다.
- localStorage를 활용하여 데이터를 관리할 수 있습니다.
- 타입스크립트의 기본적인 타입 시스템을 이해하고 활용할 수 있습니다.
- 인터페이스 및 타입 선언을 통해 코드의 안정성을 높일 수 있습니다.
- React 프로젝트에서 TypeScript를 적용하여 유지보수성과 가독성을 향상시킬 수 있습니다.
HTML / CSS
- 웹 표준을 준수한 코드 구조를 설계합니다.
- 시멘틱 마크업 작업이 가능합니다.
- Media Query 반응형 작업에 능숙합니다.
- Keyframes 애니메이션 작업에 능숙합니다.
- SVG 애니메이션을 활용할 수 있습니다.
- Flex, Grid 와 같은 속성을 적극적으로 활용합니다.
GSAP
- GSAP를 활용한 UI 인터랙션 및 애니메이션 구현에 능숙합니다.
- ScrollTrigger를 사용하여 스크롤 기반 애니메이션을 제작할 수 있습니다.
- Timeline을 활용한 복합 애니메이션을 효과적으로 구성할 수 있습니다.
- SVG 및 Canvas 요소를 GSAP와 결합하여 다양한 동적 효과를 구현할 수 있습니다.
- Three.js 와 결합하여 다이나믹한 애니메이션을 구현할 수 있습니다.
Git
- rebase, cherry-pick 등의 Git 명령어를 활용하여 커밋 이력을 정리할 수 있습니다.
- .gitignore 를 활용하여 프로젝트 관리의 효율성을 높일 수 있습니다.
- commit 컨벤션을 준수하여 가독성 높은 커밋 메시지를 작성할 수 있습니다.
ETC
- SCSS 전처리기의 mixin, extend, variables를 적극적으로 활용합니다.
- Styled-components, vanilla-extract와 같은 스타일 라이브러리를 활용할 수 있습니다.
Education
2022.09 - 2024.08
2019.03 - 2021.02
계원예술대학교
디지털미디어디자인과 전문학사 졸업
세부전공 프로그래밍
Certification
2022.11
정보처리기사
2020.11
정보처리산업기사