웹
-
프
론
트
엔
드
포
트
-
폴
리
오
Q. 프론트엔드를 지향하는 이유
사용자 중심 디자인, 협업, 프론트엔드 기초 지식을 쌓았습니다. 사용자와의 소통에 대해 중요성을 인지하고, 사용자와의 상호작용을 극대화하는 프로젝트를 개발하기 위해 프론트엔드 개발자로 전향을 결심하게 되었습니다. React, Zustand, Framer-Motion, GSAP 등 다양한 프레임워크와 라이브러리를 도입해 발전할 수 있는 새로운 도전에 나서고 있습니다.
Q. 일에 있어 가장 중요하게 생각하는 것이 있다면?
항상 역지사지 마인드로 사용자 중심 개발을 추구합니다. 직관적이고 친숙한 UI 제공과 Chrome Lighthouse를 활용해 성능 최적화에 신경쓰면서, 다양한 사용자들이 편리하게 서비스를 이용 할 수 있도록 기여하고자 합니다.
Q. 자기계발을 위해 어떤 것들을 해왔는지?
지속적인 학습을 위해 스터디와 온라인 강의에 적극 참여하고, 낯선 기술에도 포기 하지 않고 메타인지 방식을 활용해 문제 해결 능력을 쌓고 있습니다. 열린 마음으로 피드백을 소중히 여기고,개발 과정에서 항상 개선할 점을 찾기 위해 노력하고 있습니다.
커리어
주식회사 메이즈
팬덤박스 플랫폼에서 UX/UI 개선 및 API 최적화를 통해 브랜드 아이덴티티와 사용자 경험을 강화하고, 메이즈 공식 홈페이지의 프론트엔드 관리 및 설계를 통해 성능 최적화와 SEO 전략을 적용하여 검색 노출을 개선했습니다.
이솔 스튜디오 (창업)
삼성테마, 카카오톡 테마 등 플랫폼 별 테마를 이용한 캐릭터 디자인 및 아이콘 디자인을 이용해 무료로 제작 또는 유료로 판매하였습니다.
교육
라인컴퓨터아트학원
React와 PHP 기초, 알고리즘, GSAP 및 Swiper 등 다양한 라이브러리, 웹 표준 및 SEO에 대한 학습을 진행했으며, 3개의 JavaScript, 2개의 React, 1개의 PHP 프로젝트를 수행했습니다.
이
런
기
술
들
을
사
용
해
봤
어
요
라이브러리
Bootstrap
클래스명으로 간편하게 HTML을 스타일링할 수 있어 사용했습니다.
Laravel Blade Template
라라벨에서 효율적인 HTML 작성을 위해 조건문과 반복문 등을 사용했습니다.
Lottie
모션을 추가하여 GIF보다 적은 용량으로 최적화된 이미지를 제공하는 데 매력을 느껴 사용했습니다.
Swiper
다양한 슬라이드 형태를 구현할 수 있어 사용했습니다.
Lenis
부드러운 스크롤 제어가 간편하여 사용했습니다.
Jquery
바닐라 자바스크립트를 더 쉽게 사용하고, 애니메이션 구현 시간이 단축되어 사용했습니다.
프론트
React
React의 구조를 이해하고 여러 Hook을 사용하여 개발했습니다.
Zustand
리덕스의 초기 세팅을 축소하여 빠르게 작업할 수 있었고, 상태 정의와 사용이 간편해 사용했습니다.
Svelte
간단한 상태 관리와 반응형 기능을 제공하여 사용했습니다.
Next JS
서버 사이드 렌더링과 정적 사이트 생성 기능을 활용해 사용했습니다.
백엔드
PHP
Dothome을 통해 회원 정보 관리와 게시물 작성 및 삭제를 구현했습니다.
MySQL
PHP로 작성한 데이터를 Dothome 호스팅을 통해 관리했습니다.
디자인
Figma
반복 작업을 효율적으로 처리할 수 있도록 컴포넌트를 분리하여 디자인했습니다.
Framer
Lottie 모션 작업을 구현하기 위해 사용했습니다.
Photoshop
간단한 이미지 편집 작업에 사용했습니다.
After Effect
리깅과 퍼펫 작업을 포함한 간단한 모션 및 영상 편집을 했습니다.
협력도구
Jira
이슈 등록 및 의견 작성 등의 기본적인 작업을 수행했습니다.
Slack
팀원들과 코드 공유 및 업무 분배를 용이하게 하기 위해 사용했습니다.
Teams
팀 내 소통과 협업을 위해 사용했습니다.
Red Mine
이슈 등록 및 댓글 작성과 같은 기본적인 작업을 수행했습니다.
프
로
젝
트
팬덤박스
타입
모바일
반응형
프로젝트 규모
사내 서비스
참여도
프론트 60%
디자인 100%
프레임워크
Laravel
라이브러리
Vite
Swiper
Bootstrap
작업 기여도
- 개선 사항에 대한 피드백을 열린 마음으로 받아들이고, 이를 바탕으로 구체적이고 실질적인 해결책을 제안하여 프로젝트의 완성도를 높였습니다.
- PC 및 모바일에 최적화된 모든 서비스 페이지의 디자인을 책임졌습니다.
- 게이미피케이션 요소에 집중하여, 사용자 참여를 유도하는 디자인과 개발을 성공적으로 구현했습니다.
- 웹 표준 및 접근성 규정을 준수하며 퍼블리싱을 수행, 다양한 사용자들이 쉽게 접근할 수 있는 환경을 조성했습니다.
- 세분화되어 있던 적응형 웹 구조를 반응형 웹으로 전환하여, 유지보수 및 작업 효율성을 크게 개선했습니다.
스크린샷
메이즈 공식 사이트
타입
반응형
PC
모바일
프로젝트 규모
사내 사이드 프로젝트
참여도
프론트 100%
디자인 100%
프레임워크
Next JS
라이브러리
Framer-Motion
Matter JS
Swiper
Zustand
작업 기여도
- 모든 서비스 페이지의 UI/UX 디자인을 책임지고, 사용자의 경험을 최적화하기 위한 직관적이고 일관된 인터페이스를 설계했습니다.
- 추후 추가될 기능과 컨텐츠를 고려하여 서브 페이지를 효율적으로 확장할 수 있는 템플릿 기반의 구조로 구현했습니다.
- 기업의 브랜드 아이덴티티를 반영하여 사용자가 쉽게 인식하고 기억에 남을 수 있도록 디자인에 세심한 주의를 기울였습니다.
- 모든 페이지를 반응형으로 개발하여 다양한 디바이스에서 일관된 사용자 경험을 제공하였습니다.
스크린샷
픽클!
타입
PC
프로젝트 규모
토이 프로젝트
기타
Shazam API
Mongo DB API
프레임워크
Next JS
라이브러리
MongoDB
Zustand
Swiper
주요 기능 및 특징
- 날씨에 따라 추천되는 음악을 들을 수도 있고 서버 자체에 저장되어 있는 음악을 들을수도 있는 음악 사이트 픽클! 입니다.
- 웹 표준과 접근성을 준수하여 다양한 사용자가 서비스에 쉽게 접근할 수 있도록 퍼블리싱 작업을 진행했습니다.
- Zustand를 활용해 음악 재생 및 재생 목록 상태를 중앙에서 효율적으로 관리하여, 사용자의 경험을 향상시켰습니다.
- 외부 API를 활용하여 실시간으로 음악 데이터를 수집하고, 이를 기반으로 사용자가 다양한 음악을 검색하고 재생할 수 있는 기능을 구현했습니다.
- 수집된 음악 데이터를 MongoDB에 저장 및 관리하여, 데이터의 지속적인 보존과 사용자 맞춤형 플레이리스트 기능을 제공했습니다.
스크린샷
플레이그라운드
타입
PC
프로젝트 규모
토이 프로젝트
기타
Youtube API
메인
React
라이브러리
Vite
주요 기능 및 특징
- YouTube API를 통해 실시간 영상 데이터를 불러와 최신 콘텐츠를 제공했습니다.
- Zustand로 사용자가 선택한 영상을 목록에 저장하고 쉽게 접근할 수 있도록 상태 관리를 구현했습니다.
- YouTube 영상 검색 기능을 최적화해 사용자가 원하는 콘텐츠를 쉽게 찾을 수 있게 했습니다.
- YouTube 채널 정보를 불러와 사용자에게 상세한 채널 정보를 제공했습니다.
- 실시간 댓글 확인 기능을 통해 사용자들이 영상 관련 의견을 확인하고 참여할 수 있도록 했습니다.
스크린샷
개인 공부
개인적으로 공부한 내용들을 제 개인 웹사이트에 정리하였습니다,
각각의 본문은 '보기'를 클릭하시면 이동됩니다!
클로저란 무엇일까
사실상 면접을 대비한 공부라고 할수도 있고 일상생활에 있다보니 그러려니 하고 쓰다가 명칭을 알게된 경우였는데, 이번 기회에 클로저에 대해 알기쉽게 이해해보고자 작성하게 되었습니다.
React에서 로딩중일때 임시로 표시할 스켈레톤 UI를 구현해보자!
리액트로 작업하던 토이 프로젝트가 있었는데 API에서 데이터를 받아오는 동안 빈 화면으로 냅두는건 좀 아니다 싶어 스켈레톤 UI를 구현해보기로 했습니다!
useMemo를 활용해 값이 그대로 들어올때 불필요한 실행을 방지해보자!
값은 재할당 되었으나 값이 이전과 같아 굳이 다시 렌더링 할 필요가 없는 작업이 있었는데 그 부분을 해결하기 위한 useMemo를 사용해보자!
Portfolio
2024.09.09