본 페이지는 상업적 용도가 아닌 개인 포트폴리오 용으로 제작되었습니다.
© 2022 Hyeon Jin Kim. All Rights Reserved.
안녕하세요
HELLO
Profile
Skill
항상 변화하는 기술 패러다임과 함께 회사의 요구사항에 발맞춰 계속 공부해 나가고 싶습니다. 프론트엔드와 함께 백엔드 언어도 공부하여 역량을 높이고 가치를 키워나감과 동시에 현장 업무에 빨리 적응해 온전한 한 명의 개발자로서의 입지를 가지고 근미래에 풀스택 개발자로 활약하는 스스로의 모습을 그려 보고자 합니다.
Portfolio
포트폴리오
IKEA
협업 쇼핑몰 웹 프로젝트
SEIKO
반응형 웹 프로젝트
IKEA - React ver
React 재구현 프로젝트
primera
동적 구현 웹 프로젝트
HTML / CSS / JavaScript 전체 하드코딩
다양한 애니메이션 코드 구현
풀페이지 슬라이드
a 태그를 사용하지 않은 싱글 페이지 구조
포트폴리오 용으로 제작한 사이트입니다. 구조를 최대한 통일성을 지키며 간소화하고 레이아웃들을 미니멀하게 디자인하여 매끄럽고 깔끔한 느낌이 들도록 의도하였습니다.
다양한 애니메이션 / 풀페이지 스크롤
GSAP과 CSS transition을 활용하여 대부분의 event에서 애니메이션을 주어 사이트가 좀 더 동적으로 보일 수 있도록 노력했습니다.
풀페이지 구조로 구성했으나, 풀페이지는 2페이지 상하 구조로 짧게 구성하고 하단 페이지를 프로젝트 페이지로 구성한 다음 각 서브페이지들을 메인페이지와 동일한 레벨에 위치시킴으로 모든 페이지에서 빠르게 프로젝트 페이지로 진입할 수 있도록 구조화했습니다.
HTML / CSS / JavaScript 전체 하드코딩
팀 협업 프로젝트
GNB,LNB, 서브, 디테일 페이지 구현
장바구니 및 필터 기능 추가
간단한 로그인 로직 구현
같은 학원 수강생 4명이서 팀을 이뤄 협업 프로젝트로 진행한 사이트입니다. 저는 메인 페이지 및 디테일 페이지 디자인과 전체적인 조율, 장바구니와 필터 등의 핵심 자바스크립트 구현을 맡았습니다.
장바구니 및 위시리스트
메인 / 서브 / 디테일 페이지의 각 상품마다 존재하는 버튼을 클릭하면 해당 상품이 장바구니 또는 위시리스트에 담길 수 있도록 구현했습니다. 수량 변경 / 총 주문 금액 계산 / 배송비 계산 / 처음 담을 시 장바구니 창으로 진입여부 로직 등을 추가하였으며 다양한 상황에서 원활히 구동될 수 있도록 하였습니다.
카테고리 필터 기능
각 카테고리에 체크된 옵션에 따라 필터링되어 상품이 보이는 필터 기능입니다. 각 옵션의 세부옵션(ex:색상 옵션 중 화이트와 베이지가 체크될 경우 서로 더함)이 체크될 경우 합집합으로 필터되며 다른 옵션 사이는 교집합으로 필터되도록 2차원 배열과 조건문, 필터함수의 중첩활용으로 로직을 구현했습니다.
HTML / CSS / jQuery 전체 하드코딩
모바일 / 태블릿 / PC 반응형 사이트
메인비주얼 동영상 버튼
다양한 슬라이드
css 미디어쿼리 및 js 매치미디어를 사용하여 반응형 사이트를 구현했습니다. 슬라이드는 플러그인을 사용하지 않고 직접 하드코딩으로 구현해보았으며 고급 시계 브랜드인 SEIKO의 이미지에 맞게 UI를 디자인하여 적용했습니다.
디바이스 크기에 맞춘 반응형
PC / 태블릿 / 모바일 디바이스에 맞춰 반응형으로 제작했습니다. 디바이스 각각의 반응형 형태에 따라 코드를 하나의 함수로 그룹화하고 matchMedia를 사용한 조건문으로 모바일과 태블릿/PC에 각각 다른 코드가 적용되도록 하였습니다.
UI/UX 디자인
스크롤을 내릴 때마다 자연스럽게 UI가 위로 움직이는 스크롤 이벤트를 구현했으며 아이템의 배치, 버튼과 레이아웃 디자인에서 감각적이고 세련된 느낌을 받을 수 있도록 의도하였습니다. 모바일 디바이스에서는 메뉴를 햄버거 버튼으로 구현하여 편리하게 메뉴에 접근할 수 있도록 했습니다.
React / Router / Redux / Styled Component
Router를 활용하여 각 페이지 라우팅
Redux를 활용하여 장바구니 기능 적용
data를 활용한 디테일 페이지
Hook과 LifeCycle 로직 활용
카카오맵 api 적용
JavaScript로 제작했던 IKEA 프로젝트의 아이템을 그대로 React로 재작성한 프로젝트입니다. 장바구니 추가와 삭제, 총합 가격 계산 및 담긴 아이템의 총 수량 등의 로직을 작성하고 구현했으며 페이지 라우팅으로 각 페이지간 연결이 되게끔 하였습니다.
Redux를 활용한 장바구니 기능
장바구니 추가 / 삭제와 함께 장바구니에 담긴 아이템의 총 주문 금액을 구해 표기되도록 하였으며 담긴 수량 또한 헤더에 위치한 아이콘에 나타나도록 해 사용자가 알 수 있도록 구현하였습니다. 또한 장바구니에 담긴 아이템과 디테일 페이지간의 이동도 원활히 되도록 적용하였습니다.
하나의 페이지로 각기 다른 아이템의 디테일 페이지 구현
detail page를 작성한 다음 React-Router의 Location기능을 활용하여 각 아이템의 data에 따라 이미지와 상세 정보들이 각각 다르게 나타나도록 구현했습니다.
HTML / CSS / JavaScript
Swiper를 활용한 텍스트 타이핑 효과
GSAP 및 Scrollmagic을 활용한 다양한 애니메이션
GNB / LNB 메뉴 구현
자바스크립트 플러그인을 최대한 활용하여 제작한 프로젝트입니다. Swiper를 사용하여 메인 비주얼에 슬라이드를 적용하였으며, 슬라이드마다 타이핑효과를 적용하여 슬라이드가 나타날 때 자연스럽게 보이도록 노력하였습니다.
텍스트 타이핑 슬라이드
Swiper의 고유 메서드를 활용하여 각 슬라이드가 나타날 때 마다 타이핑 효과가 시작되도록 적용했습니다. 조금 더 자연스러운 움직임을 위해 GSAP을 활용하여 타이핑과 동시에 위로 애니메이션 되도록 구현해보았습니다.
마우스 움직임에 따른 애니메이션 레이아웃
mousemove 이벤트를 활용하여 마우스의 움직임에 따라 배경의 요소가 따라 움직이는 레이아웃을 구현했습니다. 또한, 탭 메뉴에 마우스를 올릴 시 각기 다른 배경으로 변하도록 하여 좀 더 동적이고 화려한 느낌을 주도록 노력했습니다.
