React 기반 프로젝트
Dashboard Project와 Toss Clone의 프론트엔드에 React를 사용했습니다.
프로젝트 살펴보기 →PROFILE
About Me
화면 구현과 인터랙션을 만드는
프론트엔드 개발자
웹퍼블리싱과 프론트엔드 개인 프로젝트를 이어오고 있습니다. React 기반 웹 애플리케이션과 HTML·CSS·JavaScript를 활용한 화면 구현에 관심을 두고 작업합니다.
프로젝트 보기 ↗Personal Info
- 이름
- 김기윤
- 위치
- 인천광역시, 대한민국
- 이메일
- 159pko@naver.com
Education
한국폴리텍 인천캠퍼스 정보통신과 2016.03 – 2018.02Experience
프론트엔드 개발 · 개인 프로젝트 2022.09 – 현재 웹퍼블리셔 · 프리랜서 2020.01 – 현재SKILLS IN PROJECTS
기술을 화면과 기능으로
프로젝트에 사용한 기술과 이 포트폴리오에서 확인할 수 있는 구현 내용을 소개합니다.
반응형 화면 구성
이 포트폴리오에서 HTML과 CSS로 화면을 구성하고, 화면 너비에 따라 내비게이션과 카드 배치를 조정했습니다.
구현 내용 보기 →JavaScript 인터랙션
스크롤 등장 효과, 고정 헤더 높이 계산, 화면 표시 여부와 모션 설정에 따른 영상 재생 제어를 구현했습니다.
구현 내용 보기 →그 외 기술·도구
TypeScript · Tailwind CSS · Node.js · Express · PostgreSQL · MongoDB · Firebase · Git · GitHub · VS Code · Figma · Photoshop
CONTENT
My Approach
개발에 임하는 방식과 중요하게 생각하는 가치
사용자의 입장에서 생각하고, 기술로 가치를 만들어 더 나은 웹 경험을 제공하기 위해 노력합니다.
사용자 중심
사용자의 니즈를 분석하고 직관적인 인터페이스를 설계합니다.
반응형 웹
모든 디바이스에서 일관된 경험을 제공하도록 구현합니다.
클린 코드
유지보수와 확장성을 고려한 명확한 코드를 작성합니다.
지속적 학습
새로운 기술을 꾸준히 학습하고 프로젝트에 적용합니다.
SELECTED PROJECTS
My Works
프로젝트의 기능과 사용 기술을 확인하고, 실제 사이트를 둘러보세요.
01 / WEB APPLICATIONDashboard
Dashboard Project
차트, 메일, 파일 관리 기능을 포함한 웹 대시보드 프로젝트입니다.
프로젝트 개요
주요 기능
- 차트를 활용한 정보 표시
- 메일 및 파일 관리
기술 구성
React, Node.js, Socket.IO를 사용한 웹 애플리케이션입니다.
02 / MOBILE WEBToss Clone
Toss Clone
토스 앱의 주식, 쇼핑, 혜택 기능을 구현한 모바일 버전 클론 프로젝트입니다.
프로젝트 개요
주요 기능
- 주식 관련 화면
- 쇼핑 및 혜택 기능
확인 환경
모바일 화면을 기준으로 제작한 프로젝트입니다. 휴대폰 또는 브라우저의 모바일 화면에서 확인해 보세요.
03 / PERSONAL WEBSITEPortfolio
개인 포트폴리오
소개와 프로젝트 탐색을 한 페이지로 연결한 반응형 웹사이트입니다.
설계와 구현 과정
해결한 문제
고정 헤더가 섹션 제목을 가리지 않도록 실제 높이를 측정해 스크롤 여백에 반영했습니다.
사용 환경에 따른 처리
모션 감소 설정에서는 정지 이미지를 표시하고, 첫 화면을 벗어나거나 탭을 전환하면 영상을 일시정지합니다.
코드 구성
HTML, CSS, JavaScript를 분리하고 공통 스타일 변수를 사용합니다. 키보드 탐색을 위한 본문 바로가기와 포커스 표시를 제공합니다.
GET IN TOUCH
함께 만들 이야기를
기다립니다.
프로젝트나 협업에 대해 궁금한 점이 있다면 이메일로 연락해 주세요.