연구기간: 2026.03.10 – 2026.06.19
국민대학교 테크노디자인전문대학원
융합디자인학과 그래픽디자인랩 석사3학기 나선
지도교수: 박재완 교수님
Projects — 나선
Projects
eralooper는 노스탤지어 미학을 핵심으로 한 인터랙티브 음악 재생 웹페이지입니다. KiiiKiii의 곡 Dancing Alone 공식 발매 네 가지 버전을 매개체로 삼아, 90s·00s·10s·20s 네 시대의 클래식 플레이어를 선보입니다.각 기기는 고도로 사실적인 비주얼 스타일로 구현되며, 인터랙션 애니메이션과 음악 재생 기능을 갖추고 있습니다.서로 다른 시대의 청각과 시각을 통해 음악과 기억 사이의 연결을 보여줍니다.
클래식 Boombox / 카세트 테이프 / 테이프 삽입 / 테이프 릴 / 좌우 스피커 / 리듬 그래픽
투명 Discman / CD / 트레이 / 브리지 LED / 휴대용 CD 플레이어 / 2000년대 재생 경험
iPod Classic / 세로형 외형 / Click Wheel / MP3 스펙트럼 / 이퀄라이저 바 / 디지털 음악의 질감
휴대용 블루투스 스피커 / 듀얼 채널 디자인 / 노브형 스위치 / LED 표시등 / 현대 음악 재생 기기
카세트와 CD는 재생 페이지 진입 시 기기 외부에 위치하다가 클릭 후 슬라이드 애니메이션으로 삽입되어 실제 조작의 의식감을 연출합니다.
네 가지 플레이어 모두 정교한 CSS 스큐어모픽 디자인을 적용하여 빛과 그림자, 버튼 깊이감, 소재 질감 등의 세부 요소를 구현했습니다.
재생 페이지 우측에 스크롤 가사가 실시간 표시되며 현재 라인이 하이라이트되고, 가사 타임라인 교정 모드를 지원합니다.
Figma에서 메인 페이지 디자인을 완성한 후, 요소의 스타일 파라미터(색상값·간격·폰트 규격 등)를 Claude에 직접 전달하여 디자인을 코드로 구현했습니다. 버튼 스타일, 레이아웃 조정, 타이포그래피, 여백 세부 조정 등의 수정을 완료했습니다.
Playwright MCP를 통해 브라우저 화면을 불러와 Claude가 현재 렌더링 상태를 파악하기 위해 스크린샷을 직접 캡처합니다. 이를 바탕으로 플레이어 색상 및 구조를 수정하고, 인터랙션 애니메이션과 버튼 기능을 실시간으로 테스트하며 결과를 검증했습니다.
AIR CLAY는 제스처 인식과 실시간 3D 조형 기술을 결합한 웹 기반 디지털 도예 시뮬레이터입니다. 카메라로 손동작을 인식해 웹에서 바로 도자기를 빚고, 장식하고, 전시할 수 있습니다.도예에 관심 있는 유저나 디자인 전공 학생, 그리고 디지털 아트 애호가분들을 위한 크리에이티브 체험 툴입니다.
| Hero | 핸드라이팅 폰트 + 플로팅 도자기 + 패럴랙스 애니메이션 |
| 기능 소개 | Introduction — 브랜드 스토리 및 콘셉트 소개 |
| 사용 방법 | How It Works — 4단계 프로세스 안내 |
| CTA | Start 버튼 |
| Footer | 크레딧 + 연락처 + 개인정보처리방침 |
MediaPipe 기반 손 키포인트 인식 | 실시간 양손 위치 추적
손동작을 흙 형태에 매핑 | 실제 물레질 과정 시뮬레이션
로우 (Raw) — 구워지지 않은 생흙 고유의 입자감과 텍스처
매트 (Matte) — 빛이 부드럽게 퍼지는 차분한 무광 표면
글로시 (Glossy) — 반사율이 높고 유약 질감이 느껴지는 효과
드로잉 시스템 | 마커 및 스프레이 툴 내장, 자유로운 패턴 드로잉
커스텀 옵션 | 브러시 색상 · 크기 · 불투명도(Opacity) 실시간 조절
회전 갤러리 | 작품 완성 후 회전 전시 모드 자동 전환
멀티 포맷 출력 | JPG / PNG 이미지 및 3D 프린팅용 STL 포맷 지원
자유 배치 캔버스 | 드래그 앤 드롭 방식의 나만의 컬렉션 구성
이미지 편집 | 개별 이미지 이동 · 스케일 조절 및 전체 화면 익스포트
공용 피드 공유 | 로그인 후 글로벌 커뮤니티에 작품 실시간 업로드
소셜 인터랙션 | 좋아요 · 댓글 기능을 통한 크리에이터 간 소통
웹 기반 도예 시뮬레이터 사이트입니다. 흙의 크기와 높이를 선택한 후, 카메라 제스처 인식으로 도자기 형태를 빚습니다. 이어 색상·패턴 드로잉과 유약 선택을 거치며 실제 도예 과정을 재현합니다.
제스처 로직/애니메이션/기능/디자인 디테일 N번 반복 디버깅
dottypo는 브라우저에서 바로 실행되는 폰트 디자인 툴입니다.그리드 기반의 픽셀 폰트 제작에 특화되어 있습니다.소프트웨어 설치 없이 온라인에서 제작 · 관리 · 내보내기까지 전체 워크플로우를 완결할 수 있습니다.폰트 디자이너, 인디 크리에이터, 게임 개발자, 픽셀 아트 애호가를 대상으로 합니다.
전체 딥그린 배경 + 반투명 점 텍스처
6종 픽셀 폰트 로고 루프 애니메이션
우상단 Sign Up / Log In 입구
하단 「starting」 진입 버튼
각 카드에 번호 · 제목 · 설명 · 데모 이미지 포함
상단 헤더 (Header)
Design / Preview 뷰 전환 / 파일 관리 / 폰트 익스포트 / 유저 정보
좌측 패널 (panel)
그리드 / 픽셀 파라미터 (parameter) 설정 영역
중앙 캔버스 (canvas)
좌클릭 드로잉, 우클릭 지우기, 0.1×–4.0× 줌 지원
우측 문자
라틴 문자 94자 + 한글 자모 51자, 문자 썸네일 표시
하단 툴바 (toolbar)
줌 / 그리드 투명도 / 가이드라인 / 라이트·다크 테마 / Tutorial / Help
멀티 레이어 시스템
레이어별 독립 컬러 · 가시성 · 불투명도 설정
복사 · 이동 · 삭제 · 이름 변경
8종 픽셀 형태
사각형 / 원형 / 다이아몬드 / 십자 / 사각별 / 팔각별 / 링 / 하트
조절 파라미터
픽셀 크기 · 간격 · 기울기 · 행열 어긋남 · 스무딩
Rectangular (사각형) — 행·열 수, Gutter X/Y, 종횡비
Polar (극좌표) — 행·열 수, Inner Radius, Angle
Triangular (삼각형) — 행·열 수 + 사선 스타일
Organic (유기형) — 행·열 수 + 형태
대형 캔버스 (최대 100×100) 레터링과 패턴 제작에 적합합니다.
텍스트를 입력하면 현재 디자인한 폰트로 즉시 타이포그래피 효과가 렌더링
폰트 크기 / 행간 / 자간 / 정렬
SVG — 현재 문자 벡터 이미지
PNG — 현재 문자 4× 고화질 비트맵
OTF / TTF — Pro 사용자 전용
문자 범위:Designed only / Latin / Korean / All
익스포트 전 문자 통계 표시 (전체 / 디자인 완료 / 빈 문자)
free:
온라인 문서 최대 5개
SVG / PNG 익스포트
Pro:
문서 무제한, OTF / TTF 익스포트
월 ₩5,000 / 연 ₩50,000
TossPayments 연동, 신용카드 · 카카오페이 등 다양한 수단
결제 완료 후 서버에서 주문 검증, 멤버십 상태 자동 업데이트
결제 키는 프론트엔드에 노출되지 않아 보안 처리
만료일 · 남은 일수 확인 가능
수동 갱신 (「Renew Now」)
만료 후 EXPIRED 상태 표시로 갱신 유도
이메일 회원가입
이메일 또는 유저명 로그인
메뉴에 유저명 · 이메일 · 구독 상태 (FREE / PRO) 표시
Supabase Auth 기반으로 회원가입 · 로그인 · 세션 관리 구현
구독 상태는 클라우드에 저장
무료 / Pro 기능 권한을 동적으로 제어
디자인 파일을 Supabase 클라우드 데이터베이스에 저장
편집 중단 후 2.5초 자동 저장
새 파일 생성 · 수동 저장 · 이름 변경 · 삭제 지원
문자별 픽셀 데이터를 독립 기록해 설계 내용 완전 보존

이 프로젝트는 꽃꽂이 입문자를 위한 3D 웹 플랫폼입니다. 꽃꽂이를 처음 시작하는 사람들은 꽃 선택과 조합에 어려움을 느끼기 때문에, 보다 쉽게 꽃꽂이를 체험할 수 있는 서비스를 제작하였습니다. 사용자는 다양한 꽃과 화병을 선택하고 위치와 크기, 각도를 자유롭게 조절할 수 있습니다. 또한 조명과 배경을 변경하고 결과물을 저장할 수 있습니다. 이 프로젝트를 통해 초보자도 쉽고 재미있게 꽃꽂이를 경험할 수 있기를 기대합니다.

왼쪽은 일정표입니다. 오늘 할 일을 적으면 섬에 씨앗을 하나 심을 수 있고, 전부 체크하여 완료하면 씨앗이 꽃으로 피어납니다. 우측 하단은 플로팅 섬입니다. 웹페이지를 닫아도 바탕화면의 플로팅 섬에서 직접 할 일을 계속 기록하거나 체크할 수 있습니다.

이 웹사이트는 '여권'을 콘셉트로 한 여행 계획 플랫폼으로, 도시 여행을 기록하고 설계할 수 있습니다. 여행을 완료하면 여권에 도시 스탬프를 찍어 특별한 추억으로 남길 수 있습니다.

생성형 디자인을 통해 이미지를 새롭게 해석하고, 일상의 시각 이미지를 독창적인 그래픽 구성으로 변환합니다. 매번의 변환 과정에서 이미지 속에 숨겨진 새로운 구조와 질감, 그리고 디자인적 가능성을 발견할 수 있습니다.

Stitch & Soul은 뜨개질 애호가를 위한 몰입형 수공예 공간으로, 프로젝트 진행 상황, 완성한 줄 수, 뜨개 시간을 기록하고 실시간 뜨개 인터페이스에서 카메라 인터랙션, 음성 줄 세기, 따라 하기 영상 작은 창을 사용할 수 있습니다. 커뮤니티 공간에서는 영감이 되는 작품을 둘러보고, 뜨개 경험을 공유하며, 도안을 저장하고 동료 제작자들과 소통할 수 있어 개인 창작과 수공예 네트워크가 자연스럽게 연결됩니다.

날씨 변화와 낮밤의 흐름 속에서 낚시를 하며, 다양한 이벤트와 스토리를 경험할 수 있는 분위기형 낚시 게임입니다. 플레이어의 선택에 따라 버프, 디버프, 숨겨진 이벤트, 그리고 서로 다른 엔딩이 달라지는 것이 이 게임의 가장 큰 특징입니다.
Lucky Clover Delivery는 벌새가 네잎클로버를 찾아 행운을 전달하는 여정을 담은 인터랙티브 운세 서비스입니다. 사주, 행운 뽑기, 손금 리딩을 통해 운세를 더 감성적이고 몰입감 있게 경험하도록 구성했습니다.
MONOLOGUE는 Gijs Bakker의 Gustbowl에서 영감을 받아 제작한 웹 프로젝트입니다. Gustbowl이 정보를 환경 속에 자연스럽게 녹여내듯, MONOLOGUE는 사용자가 남긴 기록과 행동의 흔적을 통해 정서적 연결을 경험하도록 설계되었습니다. 사용자가 기록을 작성하면 마우스 동선과 클릭 데이터가 실시간으로 수집되어 별도의 그래픽 공간에서 시각화되며, 이를 통해 사용자는 직접 대화하지 않아도 서로의 존재를 느낄 수 있는 웹사이트입니다.
귀여움을 만드는 즐거움, Kottati. '귀여움을 만드는 즐거움'을 찾는 사람들이 정보를 교류하는 커뮤니티로, 귀여운 걸 만드는 '손꾸락'(회원)들이 '코따띠'(커뮤니티)에서 관심사를 파고(digging) '조각'(글)을 남기거나 본다는 세계관을 가지고 있다. 회원이면 자유롭게 글을 작성할 수 있으며, 월 구독 시 AI 챗봇인 Mari(실-마리) 사용과 프리미엄 콘텐츠인 조각책을 볼 수 있다. 색 테마 설정, 인터랙션, 랜덤한 패턴 푸터 등 귀여움을 잔뜩 숨겨놓았다. 엔터테인먼트미디어3 수업에서 배운 모든 것을 담은 결정체!