기여할 수 있는 역량
웹디자인부터 광고 소재 제작, 다양한 배너 디자인 및 HTML/CSS를 활용한 웹사이트 퍼블리싱까지 가능합니다. 나아가 React 기반의 퍼블리싱과 프론트엔드 개발, REST API 연동 및 컴포넌트 구현 등 전문적인 수준에서 수행할 수 있습니다.
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
나의 디자인 여정을 소개합니다
호기심 많은 크리에이터에서 풀타임 디자이너로 성장하기까지, 저의 길은 의미 있고 사용자 중심적인 디지털 경험을 만들어가는 열정으로 채워져 왔습니다. 모든 프로젝트마다 스토리텔링과 구조, 디자인을 조화롭게 담아내고 있습니다.
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
기술 스택
저는 디자인과 퍼블리싱을 함께 하기 때문에 가장 많이 사용하는 툴들을 소개하고 있습니다. 이 외에도 제가 자주 활용하는 툴들이 많습니다. 예를 들어 ChatGPT, Nano Banana, Swiper.js 등 다양한 툴들을 일상적으로 함께 사용하고 있습니다.
Figma
인터랙티브하고 반응형 웹사이트를 만드는 저만의 크리에이티브 놀이터입니다. 빠르고 유연합니다
Figma
인터랙티브하고 반응형 웹사이트를 만드는 저만의 크리에이티브 놀이터입니다. 빠르고 유연합니다
Photoshop
이미지를 제작할 때 가장 많이 사용하는 핵심 도구입니다.
Photoshop
이미지를 제작할 때 가장 많이 사용하는 핵심 도구입니다.
Illustrator
SVG와 일러스트 이미지를 제작할 때 가장 중요한 도구입니다. 사진이 없을 때 가장 유연하게 활용할 수 있는 조건을 제공합니다.
Illustrator
SVG와 일러스트 이미지를 제작할 때 가장 중요한 도구입니다. 사진이 없을 때 가장 유연하게 활용할 수 있는 조건을 제공합니다.
After Effect
작은 크기의 GIF 움직이는 이미지를 제작할 때 가장 적합한 도구이며, 간단한 애니메이션을 깔끔하게 만들 수 있습니다.
After Effect
작은 크기의 GIF 움직이는 이미지를 제작할 때 가장 적합한 도구이며, 간단한 애니메이션을 깔끔하게 만들 수 있습니다.
Lottie animation
전문적인 수준의 인사이트 GIF를 제작할 때, 코드 작성이 가장 간편하고 멋진 결과를 낼 수 있는 제가 가장 좋아하는 툴입니다.
Lottie animation
전문적인 수준의 인사이트 GIF를 제작할 때, 코드 작성이 가장 간편하고 멋진 결과를 낼 수 있는 제가 가장 좋아하는 툴입니다.
Tailwind css
코딩을 더 쉽고 빠르게 해 주는 제가 제일 자주 쓰는 툴이에요.
Tailwind css
코딩을 더 쉽고 빠르게 해 주는 제가 제일 자주 쓰는 툴이에요.
React js
React.js는 퍼블리싱할 때 가장 깔끔하게 재사용할 수 있고, 모든 것을 체계적으로 구성할 수 있게 해 주는 제가 가장 좋아하는 부분입니다.
React js
React.js는 퍼블리싱할 때 가장 깔끔하게 재사용할 수 있고, 모든 것을 체계적으로 구성할 수 있게 해 주는 제가 가장 좋아하는 부분입니다.
Design PORTFoLIO
제 디자인 포트폴리오는 별도로 구분되어 있으며, 별도의 링크를 통해 따로 확인하실 수 있습니다. 이 페이지에서는 제가 주로 사용하는 주요 툴뿐만 아니라, 작업 과정에서 활용하는 다양한 보조 툴들도 함께 소개하고 있습니다. 또한, 저는 개발 포트폴리오와 디자인 포트폴리오를 따로 운영하고 있으며, 현재 보고 계신 포트폴리오는 제 개발·퍼블리싱 포트폴리오입니다. 디자인 포트폴리오는 아래 버튼을 눌러 별도로 확인하실 수 있습니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
Hi
Hi
Hi
Let's work together
브랜드, 웹사이트, 또는 새로운 아이디어까지—함께 의미 있고 임팩트 있는 결과물을 만들어가요.
기여할 수 있는 역량
웹디자인부터 광고 소재 제작, 다양한 배너 디자인 및 HTML/CSS를 활용한 웹사이트 퍼블리싱까지 가능합니다. 나아가 React 기반의 퍼블리싱과 프론트엔드 개발, REST API 연동 및 컴포넌트 구현 등 전문적인 수준에서 수행할 수 있습니다.
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
나의 디자인 여정을 소개합니다
호기심 많은 크리에이터에서 풀타임 디자이너로 성장하기까지, 저의 길은 의미 있고 사용자 중심적인 디지털 경험을 만들어가는 열정으로 채워져 왔습니다. 모든 프로젝트마다 스토리텔링과 구조, 디자인을 조화롭게 담아내고 있습니다.
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
기술 스택
저는 디자인과 퍼블리싱을 함께 하기 때문에 가장 많이 사용하는 툴들을 소개하고 있습니다. 이 외에도 제가 자주 활용하는 툴들이 많습니다. 예를 들어 ChatGPT, Nano Banana, Swiper.js 등 다양한 툴들을 일상적으로 함께 사용하고 있습니다.
Figma
인터랙티브하고 반응형 웹사이트를 만드는 저만의 크리에이티브 놀이터입니다. 빠르고 유연합니다
Figma
인터랙티브하고 반응형 웹사이트를 만드는 저만의 크리에이티브 놀이터입니다. 빠르고 유연합니다
Photoshop
이미지를 제작할 때 가장 많이 사용하는 핵심 도구입니다.
Photoshop
이미지를 제작할 때 가장 많이 사용하는 핵심 도구입니다.
Illustrator
SVG와 일러스트 이미지를 제작할 때 가장 중요한 도구입니다. 사진이 없을 때 가장 유연하게 활용할 수 있는 조건을 제공합니다.
Illustrator
SVG와 일러스트 이미지를 제작할 때 가장 중요한 도구입니다. 사진이 없을 때 가장 유연하게 활용할 수 있는 조건을 제공합니다.
After Effect
작은 크기의 GIF 움직이는 이미지를 제작할 때 가장 적합한 도구이며, 간단한 애니메이션을 깔끔하게 만들 수 있습니다.
After Effect
작은 크기의 GIF 움직이는 이미지를 제작할 때 가장 적합한 도구이며, 간단한 애니메이션을 깔끔하게 만들 수 있습니다.
Lottie animation
전문적인 수준의 인사이트 GIF를 제작할 때, 코드 작성이 가장 간편하고 멋진 결과를 낼 수 있는 제가 가장 좋아하는 툴입니다.
Lottie animation
전문적인 수준의 인사이트 GIF를 제작할 때, 코드 작성이 가장 간편하고 멋진 결과를 낼 수 있는 제가 가장 좋아하는 툴입니다.
Tailwind css
코딩을 더 쉽고 빠르게 해 주는 제가 제일 자주 쓰는 툴이에요.
Tailwind css
코딩을 더 쉽고 빠르게 해 주는 제가 제일 자주 쓰는 툴이에요.
React js
React.js는 퍼블리싱할 때 가장 깔끔하게 재사용할 수 있고, 모든 것을 체계적으로 구성할 수 있게 해 주는 제가 가장 좋아하는 부분입니다.
React js
React.js는 퍼블리싱할 때 가장 깔끔하게 재사용할 수 있고, 모든 것을 체계적으로 구성할 수 있게 해 주는 제가 가장 좋아하는 부분입니다.
Design PORTFoLIO
제 디자인 포트폴리오는 별도로 구분되어 있으며, 별도의 링크를 통해 따로 확인하실 수 있습니다. 이 페이지에서는 제가 주로 사용하는 주요 툴뿐만 아니라, 작업 과정에서 활용하는 다양한 보조 툴들도 함께 소개하고 있습니다. 또한, 저는 개발 포트폴리오와 디자인 포트폴리오를 따로 운영하고 있으며, 현재 보고 계신 포트폴리오는 제 개발·퍼블리싱 포트폴리오입니다. 디자인 포트폴리오는 아래 버튼을 눌러 별도로 확인하실 수 있습니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
Hi
Hi
Hi
Let's work together
브랜드, 웹사이트, 또는 새로운 아이디어까지—함께 의미 있고 임팩트 있는 결과물을 만들어가요.
기여할 수 있는 역량
웹디자인부터 광고 소재 제작, 다양한 배너 디자인 및 HTML/CSS를 활용한 웹사이트 퍼블리싱까지 가능합니다. 나아가 React 기반의 퍼블리싱과 프론트엔드 개발, REST API 연동 및 컴포넌트 구현 등 전문적인 수준에서 수행할 수 있습니다.
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
1. ui/ux design
웹 프레이밍 및 프로토타이핑
모바일 앱 및 웹사이트 UI 디자인
한국어와 영어로 원활한 피그마 디자인 리뷰
마이크로 애니메이션 기반 인터랙션 디자인 구현
2. 광고 디자인 역량
광고 소재 제작 – 전달받은 텍스트 및 이미지를 기반으로 광고 배너 기획
제공된 가이드라인에 따라 1개 이상의 시안을 제작 및 제안
Adobe Photoshop, Illustrator 활용 모든 종류의 커스터마이징 가능
배너 광고 소재 다수 제작 경험 보유 – 상세 디자인 포트폴리오 참조 가능
3. 웹 퍼블리싱
시멘틱 마크업 원칙에 따른 HTML/CSS 반응형 코딩 수행
TailwindCSS·SCSS·Bootstrap 등 스타일 프레임워크를 활용한 확장 가능한 UI 구축
Framer Motion·AOS·Swiper.js 기반 마이크로 인터랙션/스크롤 애니메이션 구현
Lottie·GIF 애니메이션 적용 및 반응형 이미지/테이블 설계로 가독성과 성능 동시 확보
4. React 개발
프로젝트 셋업 & 구조화: React + Vite 기반 초기 세팅(레이아웃/라우팅/환경변수/빌드 최적화)
컴포넌트 아키텍처: 재사용 가능한 UI 컴포넌트 설계, 코드 모듈화 및 유지보수성 향상
데이터 연동 설계: REST API 연동, 상태관리(Redux / RTK Query 등), 에러/로딩 상태 처리
분석 & SEO 연동: Google Analytics(ga4/gtag), Google Search Console 연동, 메타태그/사이트맵/robots 설정
나의 디자인 여정을 소개합니다
호기심 많은 크리에이터에서 풀타임 디자이너로 성장하기까지, 저의 길은 의미 있고 사용자 중심적인 디지털 경험을 만들어가는 열정으로 채워져 왔습니다. 모든 프로젝트마다 스토리텔링과 구조, 디자인을 조화롭게 담아내고 있습니다.
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX design react 프론트 개발자
제이와아베스트
2025.06 - 2025.09
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
현대건설 스마트 안전교육 프로젝트
2024.11 - 2025.02
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
UI/UX designer
테크월드 뉴스
2023.01 - 2024.11
기술 스택
저는 디자인과 퍼블리싱을 함께 하기 때문에 가장 많이 사용하는 툴들을 소개하고 있습니다. 이 외에도 제가 자주 활용하는 툴들이 많습니다. 예를 들어 ChatGPT, Nano Banana, Swiper.js 등 다양한 툴들을 일상적으로 함께 사용하고 있습니다.
Figma
인터랙티브하고 반응형 웹사이트를 만드는 저만의 크리에이티브 놀이터입니다. 빠르고 유연합니다
Figma
인터랙티브하고 반응형 웹사이트를 만드는 저만의 크리에이티브 놀이터입니다. 빠르고 유연합니다
Photoshop
이미지를 제작할 때 가장 많이 사용하는 핵심 도구입니다.
Photoshop
이미지를 제작할 때 가장 많이 사용하는 핵심 도구입니다.
Illustrator
SVG와 일러스트 이미지를 제작할 때 가장 중요한 도구입니다. 사진이 없을 때 가장 유연하게 활용할 수 있는 조건을 제공합니다.
Illustrator
SVG와 일러스트 이미지를 제작할 때 가장 중요한 도구입니다. 사진이 없을 때 가장 유연하게 활용할 수 있는 조건을 제공합니다.
After Effect
작은 크기의 GIF 움직이는 이미지를 제작할 때 가장 적합한 도구이며, 간단한 애니메이션을 깔끔하게 만들 수 있습니다.
After Effect
작은 크기의 GIF 움직이는 이미지를 제작할 때 가장 적합한 도구이며, 간단한 애니메이션을 깔끔하게 만들 수 있습니다.
Lottie animation
전문적인 수준의 인사이트 GIF를 제작할 때, 코드 작성이 가장 간편하고 멋진 결과를 낼 수 있는 제가 가장 좋아하는 툴입니다.
Lottie animation
전문적인 수준의 인사이트 GIF를 제작할 때, 코드 작성이 가장 간편하고 멋진 결과를 낼 수 있는 제가 가장 좋아하는 툴입니다.
Tailwind css
코딩을 더 쉽고 빠르게 해 주는 제가 제일 자주 쓰는 툴이에요.
Tailwind css
코딩을 더 쉽고 빠르게 해 주는 제가 제일 자주 쓰는 툴이에요.
React js
React.js는 퍼블리싱할 때 가장 깔끔하게 재사용할 수 있고, 모든 것을 체계적으로 구성할 수 있게 해 주는 제가 가장 좋아하는 부분입니다.
React js
React.js는 퍼블리싱할 때 가장 깔끔하게 재사용할 수 있고, 모든 것을 체계적으로 구성할 수 있게 해 주는 제가 가장 좋아하는 부분입니다.
Design PORTFoLIO
제 디자인 포트폴리오는 별도로 구분되어 있으며, 별도의 링크를 통해 따로 확인하실 수 있습니다. 이 페이지에서는 제가 주로 사용하는 주요 툴뿐만 아니라, 작업 과정에서 활용하는 다양한 보조 툴들도 함께 소개하고 있습니다. 또한, 저는 개발 포트폴리오와 디자인 포트폴리오를 따로 운영하고 있으며, 현재 보고 계신 포트폴리오는 제 개발·퍼블리싱 포트폴리오입니다. 디자인 포트폴리오는 아래 버튼을 눌러 별도로 확인하실 수 있습니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
01.
Research & Strategy
이 단계에서는 의뢰인의 비즈니스, 타겟 고객, 그리고 프로젝트 목표를 깊이 이해하는 데 집중합니다. 철저한 리서치와 전략적 기획을 통해 전체 디자인 프로세스를 이끌어 갈 명확한 로드맵을 만들어 갑니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
02.
Concept & Ideation
의뢰인의 비전에 맞는 창의적인 콘셉트를 구상하고 발전시킵니다. 초기 스케치와 아이디어를 구체적인 와이어프레임으로 다듬어 디자인과 기능의 방향을 설정합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
03.
Feedback & Refinement
협업이 핵심입니다. 저는 디자인을 함께 검토하며 피드백을 수집하고, 이를 바탕으로 작업을 다듬어 의뢰인의 기대와 목표에 맞추어 나갑니다. 이를 통해 디자인이 의뢰인의 비전을 충실히 반영하도록 합니다.
Hi
Hi
Hi
Let's work together
브랜드, 웹사이트, 또는 새로운 아이디어까지—함께 의미 있고 임팩트 있는 결과물을 만들어가요.