
《Open World》 캠 기반 인터랙션
2026 산업디자인전공 소모임 연합 전시 《Open World》 를 위한 캠 기반 인터랙션을 제작하였습니다.
- 작업일
- 2026.07.26–2026.08.09
- 디자인 분야
- 용도
- 사용 도구
- 작성자
- 임수미
작업 배경
짧은 준비 기간 내에 《Open World》 기조에 맞는 인터랙션 경험을 제공하고자 하였다. 그러나 떠오르는 모션과 그래픽 등을 직접 구현하기에는 경험이 부족하였고, 따라서 쉽게 접근할 수 있는 바이브 코딩을 통해 인터랙션을 제작하였다.
작업 단계
시안 제작
Figma
전시 기조에 맞는 시안 제작을 위해 피그마에서 1차 디자인을 하였다.

바이브코딩을 통한 프로토타입 제작
Claude
생각해 둔 인터랙션을 클로드에게 설명한 후, 시안을 첨부하여 구현을 요청하였다.
세 번째 이미지가 시작 화면이야. 다른 디자인은 건들지 말되, 지구는 도트로 전환해 줘. 타자를 치면 회색 바에 내용이 입력되고, 엔터를 누르면 내용이 전송돼. 그럼 지구 위에 #B6FEC6 색의 점이 찍히게 되고, 이 점이 내용이 전송될 때마다 랜덤으로 지도 위에 쌓이게 돼. 해당 점은 지구 화면에서 일정한 모션으로 맥동하도록 해 줘. 첫 화면에서 스페이스바를 두 번 누르면, 지구가 펼쳐지면서, 도트 형태의 지도가 펼쳐지고, 그 위에서 여태 쓴 내용들을 확인할 수 있게 돼. 지도 화면에서는 노트북 터치패드를 움직여서 이동하며 적힌 내용들을 확인할 수 있어. 엔터를 누르면 첫 지구 화면으로 돌아오게 돼. 이 플로우를 html로 구현해 줘.
인터랙션 테스트 및 수정
Claude
구현된 프로토타입을 기반으로, 키보드 기반 인터랙션이 아닌 핸드 모션 인터랙션으로 수정하고자 각 행동에 맞는 핸드 모션을 입력한 후, 구현을 요청하였다.
첫 번째 시스템에서, 지구를 펼쳐서 확인하는 모션을 스페이스바 두 번이 아니라 손을 펼쳐서 확인할 수 있도록 해 줘. 펼쳤을 때 화면을 이동하는 것도 손을 상하좌우로 움직임에 따라 화면이 이동하고, 양 손을 벌렸을 때 확대, 반대로 하면 축소가 되도록 해 줘.인터랙션 테스트 및 수정
Claude
전시 방명록 작성을 위한 인터랙션이기에, 이를 위해 필요한 추가적 기능이 무엇인지 물어보았고, 이를 포함한 웹을 제작해 달라고 요청하였다.
전시 관람자의 방명록을 적는 용으로 이 웹을 사용할 건데, 이를 위해 더 필요한 기능 제시해.
자신의 방명록을 찾을 수 있도록 하려면 어떤 방법이 있는지 제시해.
첫 번째 화면에서 타자 치고 방명록 올리면, 자동적으로 펼쳤을 때의 올라간 위치로 확대되면서, 텍스트박스 사이즈도 유지해.
가이드라인 제작
FigmaClaude
관람자에게 인터랙션을 이해시키기 위한 가이드가 필요했고, 제작 전 클로드에게 해당 웹의 사용 프로세스를 받았다. 프로세스를 기반으로 피그마에서 인터랙션 가이드라인을 제작하였다.

회고
성과와 한계
방명록인 만큼 사이트에 아카이빙되기를 원했지만 나는 방법을 몰랐다...................
아쉽다 ㅜㅜ 다음에는 DB 구현까지 해보아요
인터랙션만큼은 초.고.퀄이었다는 점