Project Overview

Project Title

Knitting UI Portfolio

A personal design portfolio built with a knitting-inspired UI system.

Knitting UI Portfolio는 뜨개질의 구조와 제작 방식을 웹 인터페이스로 가져온 개인 디자인 포트폴리오 프로젝트이다.

이 프로젝트는 단순히 뜨개질의 외형을 장식적으로 차용하는 것이 아니라, 하나의 코가 반복되어 편물을 만들고, 실이 교차하고, 단이 쌓이며, 때로는 실수와 우연이 발생하는 뜨개질의 과정을 UI 시스템으로 구현하는 것을 목표로 한다.

본 프로젝트는 두 가지 결과물로 구성된다.

사용자는 일반적인 UI 컴포넌트를 단순히 배치하는 것이 아니라, 실제 뜨개질 도안을 계획하듯이 시작 코 수, 전체 단 수, 단별 코 배열, 배색, 편물 연결 방식 등을 정의하여 인터페이스를 구성할 수 있다.

일반적인 포트폴리오 웹사이트는 카드형 레이아웃, 그리드 시스템, 스크롤 애니메이션 등 익숙한 웹 문법을 반복하는 경우가 많다.

이 프로젝트는 개인의 디자인적 관심과 프론트엔드 구현 능력을 동시에 보여주기 위해, 나만의 시각 언어를 가진 UI 시스템을 직접 설계하고 구현하고자 한다.

뜨개질은 작은 단위가 반복되어 하나의 큰 구조를 만들고, 실이 서로 연결되며, 제작 과정에서 규칙성과 우연성이 함께 나타난다. 이는 컴포넌트가 조합되어 하나의 인터페이스를 이루는 프론트엔드 구조와도 닮아 있다.

따라서 이 프로젝트는 뜨개질을 단순한 시각적 레퍼런스가 아니라, UI를 생성하는 구조적 원리로 사용한다.

이 프로젝트의 핵심 컨셉은 UI as Knitting이다.

웹사이트의 각 요소는 뜨개질의 구성 요소처럼 작동한다. 실은 선과 SVG path가 되고, 코는 작은 UI 단위가 되며, 단은 레이아웃의 행이 된다.

여러 코와 단이 쌓여 편물이 만들어지듯, 여러 컴포넌트와 인터랙션이 결합되어 하나의 포트폴리오 사이트를 구성한다.

Knitting Element	UI Translation
실	SVG stroke, line, border, connector
코	basic unit, node, stitch component
단	row, layout section, scroll step
편물	completed interface, page structure
배색	color palette, category system
뜨개질 도안	component API, pattern data
코 빠뜨림	visual error, accidental state
실 엉킴	tangled interaction, complex transition

이 프로젝트의 최종 결과물은 다음과 같다.

뜨개질 기법과 편물 구조를 기반으로 한 재사용 가능한 UI 컴포넌트 라이브러리.

해당 UI 라이브러리를 실제로 적용한 개인 디자인 포트폴리오 웹사이트.

프로젝트 개요, 시각 레퍼런스, 디자인 시스템, 컬러 팔레트, 시각 자산, 컴포넌트 API, 인터랙션 규칙, 개발 회고를 정리한 문서.