김미소의 포트폴리오

Motion Gallery

Thu, 09 Oct 2025 00:00:00 +0000

UI/UX에서 애니메이션이 사용자 경험에 얼마나 큰 영향을 주는지 직접 확인해보고 싶어, Framer Motion 라이브러리와 TailwindCSS를 활용해 인터랙션 실험들을 모아보았습니다.

컴포넌트들이 화면에 나타나거나 사라질 때, 혹은 마우스 오버 시 어떤 방식으로 반응하는 것이 가장 자연스럽고 즐거운 경험을 줄지 다양하게 시도해 보았습니다. whileHover, whileTap 같은 속성들을 조합하여 카드들이 마치 살아있는 것처럼 리듬감 있게 움직이도록 만들었고, variants를 활용해 컴포넌트 간 전환 시 부드러운 페이드, 슬라이드, 스케일 효과가 적용되는 과정을 탐구했습니다.

이 실험들을 통해 애니메이션이 단순히 시각적인 요소에 그치지 않고, 사용자의 시선 흐름을 유도하고 콘텐츠에 대한 몰입도를 높이는 중요한 도구임을 직접 경험할 수 있었습니다. TailwindCSS로 빠르게 스타일을 입히면서 Framer Motion으로 동적인 요소를 더하는 과정 자체가 즐거운 학습이었습니다.

Glassmorphism Test

Wed, 08 Oct 2025 00:00:00 +0000

최신 UI 트렌드인 Glassmorphism이 어떻게 구현되는지 궁금해서 TailwindCSS만으로 직접 실험해 보았습니다.

별도의 CSS 코드를 작성하는 대신, backdrop-filter와 blur 같은 TailwindCSS의 유틸리티 클래스들을 조합하며 실시간으로 변하는 모습을 관찰했습니다. 반투명 배경과 얇은 테두리 값을 조금씩 바꿔보면서, 유리가 배경 위에 떠 있는 듯한 가장 자연스러운 깊이감을 찾아가는 과정이 흥미로웠습니다.

간단한 호버 애니메이션도 추가하여 인터랙션이 더해졌을 때 어떤 느낌인지 가볍게 테스트해 보았습니다. 이 작은 실험을 통해 복잡해 보이는 UI도 유틸리티 조합만으로 빠르고 직관적으로 구현할 수 있다는 점을 다시 한번 확인할 수 있었습니다.

Parallax Scroll Experiment

Tue, 07 Oct 2025 00:00:00 +0000

스크롤만으로 어떻게 웹사이트에 깊이감과 생동감을 줄 수 있는지 궁금해서, 바닐라 자바스크립트(Vanilla JS)와 CSS만으로 직접 Parallax 효과를 실험해 보았습니다.

가장 먼저 스크롤 위치(scrollY) 값을 받아와, 배경, 중간, 전경에 해당하는 각 이미지 레이어의 transform: translateY() 값을 다르게 조절하는 방식으로 접근했습니다. 각 레이어의 이동 속도에 차이를 두면서 입체감이 어떻게 변하는지 관찰하는 과정 자체가 재미있었습니다.

단순히 스크롤 이벤트에만 의존하면 애니메이션이 끊겨 보일 수 있다는 걸 알게 됐고, 이를 해결하기 위해 requestAnimationFrame을 사용해 브라우저 렌더링 주기에 맞춰 부드럽게 움직이도록 개선했습니다. 또한, 화면에 보일 때만 애니메이션이 동작하도록 IntersectionObserver를 적용해보거나 translateZ(0) 트릭으로 GPU 가속을 활성화하는 등, 성능 최적화 방법들도 함께 탐구해 보았습니다.

이번 실험을 통해 스크롤 기반 애니메이션의 기본 원리와 성능 최적화의 중요성을 직접 체감할 수 있었습니다.

Responsive Grid Layout

Mon, 06 Oct 2025 00:00:00 +0000

웹사이트에서 가장 기본적이면서도 까다로운 반응형 그리드 레이아웃을 어떻게 하면 더 효율적으로 만들 수 있을지 고민하며 시작한 실험입니다.

처음에는 TailwindCSS의 grid-cols-2, md:grid-cols-3처럼 분기점마다 직접 컬럼 수를 지정하는 방식으로 접근했습니다. 하지만 더 유연한 방법을 찾아보다가, 순수 CSS Grid의 repeat(auto-fit, minmax()) 속성을 알게 되었습니다.

이 속성을 적용하니, 화면 너비에 맞춰 아이템의 최소 크기를 보장하면서 자동으로 컬럼 수가 바뀌는 것을 확인할 수 있었습니다. 굳이 분기점을 일일이 설정할 필요가 없어 코드가 훨씬 간결해졌고, 모바일과 데스크탑 사이의 다양한 화면 크기에서도 자연스럽게 정렬되는 점이 인상적이었습니다. 여기에 Tailwind의 gap 유틸리티를 더해 아이템 간의 간격을 일정하게 유지하는 방법도 함께 테스트했습니다.

이번 실험은 Tailwind의 편리함과 순수 CSS Grid의 강력함을 함께 사용했을 때 얼마나 유연하고 효율적인 레이아웃을 만들 수 있는지 깨닫게 된 좋은 경험이었습니다.

Button Variants

Sun, 05 Oct 2025 00:00:00 +0000

프로젝트를 진행하다 보면 버튼 스타일이 조금씩 달라져 전체적인 통일성을 해치는 경우가 많았습니다. 이걸 해결해보고자, 재사용 가능한 버튼 컴포넌트를 미리 만들어보는 실험을 시작했습니다.

TailwindCSS의 @apply를 활용해 기본 스타일, 크기, 상태 변화 등을 하나의 컴포넌트 클래스로 묶는 과정을 탐구했습니다. 이를 바탕으로 가장 자주 쓰이는 Primary (주요), Success (성공), Danger (위험) 등 여러 목적에 맞는 버튼 ‘Variants’를 만들어보았습니다.

특히 hover, focus, active 같은 여러 상태 변화에 일관된 시각적 피드백을 주는 것에 집중했습니다. 그림자나 모서리 둥글기(border-radius) 같은 디테일도 통일해서, 어떤 버튼을 가져다 써도 디자인 시스템 안에서 벗어나지 않도록 규칙을 만들어가는 과정이었습니다.

이번 실험은 단순한 스타일링을 넘어, 어떻게 하면 더 체계적으로 UI 컴포넌트를 관리하고 재사용성을 높일 수 있을지에 대한 고민을 담고 있습니다. 앞으로 진행할 프로젝트의 개발 속도를 높여줄 좋은 기반이 될 것 같습니다.

Modal Animation

Sat, 04 Oct 2025 00:00:00 +0000

웹사이트에서 흔히 쓰이는 모달 창이 너무 갑자기 나타나거나 사라지면 사용자 경험을 해친다고 생각했습니다. 어떻게 하면 더 부드럽고 자연스럽게 만들 수 있을지 Framer Motion을 이용해 직접 실험해봤습니다.

가장 먼저, 모달이 사라질 때의 애니메이션을 구현하기 위해 Framer Motion의 AnimatePresence 컴포넌트가 어떻게 동작하는지 알아보았습니다. 이를 바탕으로, 모달 창이 나타날 때는 배경이 어두워지면서(Fade) 창은 살짝 커지는(Scale) 효과를 동시에 적용해보며 가장 만족스러운 조합을 찾아나갔습니다.

애니메이션 외에도 사용 편의성을 높이기 위해 ESC 키를 누르거나 모달 창 바깥의 어두운 영역을 클릭했을 때 창이 닫히는 로직을 추가하는 과정도 함께 진행했습니다. 이번 실험을 통해 애니메이션이 단순히 꾸미기용이 아니라, 사용자의 행동을 방해하지 않고 자연스럽게 상호작용의 흐름을 만들어주는 중요한 UX 장치임을 다시 한번 느낄 수 있었습니다.

Dashboard Card

Fri, 03 Oct 2025 00:00:00 +0000

데이터를 한눈에 보여주는 대시보드를 만들 때 가장 핵심적인 요소는 ‘카드’ 컴포넌트라고 생각했습니다. 그래서 어떤 상황에나 잘 어울릴만한 깔끔한 카드 UI를 직접 만들어보는 작은 실험을 진행했습니다.

단순한 테두리만으로는 입체감을 표현하기 어려워, Tailwind의 shadow (그림자)와 ring (테두리 링) 유틸리티를 어떻게 조합해야 가장 깔끔해 보일지 여러 가지로 시도해봤습니다. 또한, 사용자가 카드에 마우스를 올렸을 때 주목하고 있다는 느낌을 주기 위해 그림자와 테두리 색상이 은은하게 변하는 효과를 추가하는 과정도 탐구했습니다.

카드 안에서는 가장 중요한 지표(Metric)가 눈에 잘 띄도록 폰트 크기와 굵기를 조절하며 최적의 위계를 찾아보려 했습니다. 이번 실험을 통해 사용자의 시선을 자연스럽게 이끌고 데이터의 가독성을 높이는 UI 디자인의 작은 디테일들을 직접 고민해볼 수 있었습니다.

Dark Mode Toggle

Thu, 02 Oct 2025 00:00:00 +0000

요즘 웹사이트의 필수 기능이 된 다크모드를 직접 구현해보며 그 원리를 이해하고 싶었습니다.

가장 먼저 React의 useState를 이용해 ’light’와 ‘dark’ 상태를 관리하고, TailwindCSS의 dark: 클래스가 어떻게 동작하는지 알아보는 것부터 시작했습니다. 단순히 상태를 바꾸는 것에서 더 나아가, 사용자가 설정한 테마가 새로고침 후에도 유지되도록 localStorage에 값을 저장하고 불러오는 기능도 실험해 보았습니다.

기능 구현 후에는 시각적인 완성도를 높이는 데 집중했습니다. 테마가 바뀔 때 배경색이 부드럽게 전환되도록 transition-colors를 적용해보고, Framer Motion을 이용해 토글 스위치 자체가 조금 더 재미있게 움직이도록 만들어보았습니다.

단순해 보이는 토글 하나에도 상태 관리, 데이터 영속성, 사용자 경험을 위한 시각적 디테일까지 여러 요소를 고민해볼 수 있는 의미 있는 실험이었습니다.

순수 웹 언어로 TodoList 구현

Thu, 25 Sep 2025 00:00:00 +0000

순수 웹 언어인 html,css,javascript만을 사용해서 간단한 TodoList를 만들었습니다.

타임캡슐 앱 개발

Fri, 20 Dec 2024 00:00:00 +0000

전북대학교 모바일 프로그래밍 수업에서 3명이 함께 진행한 타임캡슐 앱 개발 프로젝트입니다.
사진·영상·메모를 미래의 나에게 보내는 디지털 타임캡슐 컨셉으로, 사용자가 추억을 저장하고 지정한 날짜에 다시 꺼내볼 수 있도록 구현했습니다.

정렬알고리즘 성능 비교

Tue, 03 Dec 2024 00:00:00 +0000

전북대학교 알고리즘 수업에서 2명이 함께 진행한 대용량 데이터를 정렬하여 정렬알고리즘의 성능을 비교하는 프로젝트입니다.
MovieLens 1M 데이터셋(평점 1,000,209건, 영화 3,883편)을 활용하여 데이터를 정렬·추천하고, 정렬 결과를 시각화하여 비교했습니다.

디자인 시스템 가이드북

Mon, 13 May 2024 00:00:00 +0000

버튼, 폼, 카드 등 공통 컴포넌트를 규격화한 내부 디자인 시스템 가이드북입니다.
컴포넌트 구조, 색상/그리드 규칙, 타이포그래피 스케일 등을 문서화했습니다.
스타일 일관성과 재사용성을 위한 Atomic Design 개념을 반영했습니다.

🛠️ Storybook · React · SCSS

※ 학습 및 포트폴리오 과제용 디자인 시스템 샘플 프로젝트로,
실제 서비스 적용보다는 UI 구성 원리와 시각 규칙 정리에 초점을 두었습니다.

Cloud Note — 클라우드 메모 앱 기획

Sun, 03 Dec 2023 00:00:00 +0000

사용자가 기기 간 실시간으로 메모를 동기화할 수 있는 웹 기반 클라우드 노트 서비스 기획안입니다.
Google Drive와 유사한 구조를 기반으로, 폴더 정리·태그·검색 기능을 UI 시나리오로 설계했습니다.
로그인 화면과 편집기 인터페이스는 Figma 프로토타입 형태로 구현했습니다.

🛠️ Figma · React (Prototype)

※ 학습용 샘플 프로젝트로, 실제 동기화 기능 구현보다는 UX 구조 설계와 인터페이스 구상에 초점을 두었습니다.

스마트 여행 대시보드

Sun, 03 Dec 2023 00:00:00 +0000

여행지 검색, 날씨, 숙소 정보 등을 한눈에 볼 수 있는 스마트 여행 대시보드 UI입니다.
카드형 인터페이스와 지도 기반 인터랙션을 활용해, 복합 정보를 직관적으로 표현했습니다.
반응형 레이아웃과 사용자 친화적인 컬러 토큰 시스템을 적용했습니다.

🛠️ React · TailwindCSS · OpenWeather API (Mock)

※ 본 프로젝트는 학습 및 포트폴리오 제작을 위한 샘플 예시로 구성되었으며,
실제 서비스 구현보다는 UI 설계 및 UX 시각화 아이디어에 초점을 두었습니다.

모션 랜딩 페이지

Thu, 03 Aug 2023 00:00:00 +0000

Framer Motion을 활용한 인터랙티브 랜딩페이지 기획 예시입니다.
Hero 섹션에 파라락스 스크롤과 섬세한 등장 애니메이션을 적용해
시각적 완성도를 높이는 웹 모션 디자인을 탐구했습니다.

🛠️ React · Framer Motion · TailwindCSS

※ 본 프로젝트는 학습을 위한 UI/모션 실험 샘플이며,
실제 서비스보다는 웹 인터랙션 디자인 학습 목적으로 구성되었습니다.

AWS 클라우드 포트폴리오 배포

Thu, 03 Nov 2022 00:00:00 +0000

AWS S3와 CloudFront를 이용해 정적 사이트를 배포하는 클라우드 배포 워크플로우 예시입니다.
GitHub Actions로 자동 빌드-배포 파이프라인을 구성하고,
커스텀 도메인과 SSL 인증서를 적용하는 과정을 문서화했습니다.

🛠️ AWS S3 · CloudFront · GitHub Actions

※ 본 프로젝트는 과제용 배포 파이프라인 샘플로,
실제 인프라 운영이 아닌 클라우드 배포 프로세스 이해 및 문서화 목적으로 제작되었습니다.

UI 접근성 진단 툴

Sun, 03 Jul 2022 00:00:00 +0000

웹 접근성 진단을 위한 프론트엔드 툴 기획안입니다.
색상 대비, 폰트 크기, 대체 텍스트 존재 여부 등을 자동 검출하는 UI를 설계했습니다.
WCAG 2.1 기준을 기반으로 접근성 점수를 시각화하는 대시보드 형태로 구성했습니다.

🛠️ React · TypeScript · Chart.js

※ 학습 및 포트폴리오 과제용 UI 접근성 툴 샘플이며,
실제 검출 알고리즘보다는 UI/UX 흐름 및 정보 구조 설계에 중점을 두었습니다.