Projects | 김미소의 포트폴리오

순수 웹 언어로 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 흐름 및 정보 구조 설계에 중점을 두었습니다.