《Open World》 온라인 초대장 발행 대표 이미지

《Open World》 온라인 초대장 발행

2026 산업디자인전공 소모임 연합 전시 《Open World》 온라인 초대장 발행을 위한 사이트를 제작했습니다.

작업일
2026.08.04–2026.08.08
디자인 분야
인터랙션·모션
용도
코드·프로토타입
사용 도구
IllustratorFigmaClaude · Sonnet 5
작성자
김세연

작업 배경

올해 진행하는 산업디자인전공 소모임 연합 전시 《Open World》 는 방학 중에 진행되는 전시인 만큼, 온라인으로 전시를 알리는 수단이 필요하다고 생각했다. 따라서 온라인 초대장(flyer) 발행을 떠올리게 되었고, 이에 따라 많은 사람들이 손쉽게 수신인 이름만 치고 이미지를 저장해 전달할 수 있는 발행 사이트를 제작했다. 이를 처음부터 코딩을 한다면 오랜 시간이 걸릴 것 같았으나, 빠른 시간 내에 제작해 퍼블리싱을 해야하는 입장에서 AI 사용이 필수적이었다.

작업 단계

초대장 시안 제작

Illustrator

전시 전체의 BI/BX와 톤을 유지하기 위해 처음부터 AI 바이브 코딩을 하기 보다 완성 작업물의 형태를 Illustrator로 제작했다.

초대장 시안 제작 단계 이미지

스테이지 구분 및 프로토타이핑

Figma

'랜딩 - 발행 - 저장' 의 3단계로 구분해 초대장 발행을 진행하기 위해 Figma 로 프로토타이핑을 진행했다.

스테이지 구분 및 프로토타이핑 단계 이미지

바이브 코딩

Claude

짧은 기간 내에 만들기 위하여 Claude code 를 활용해 Illustrator 와 Figma 로 구현한 내용을 Input 에 넣고 코드를 요청했다.

바이브 코딩 단계 이미지

회고

성과와 한계

카카오톡 api를 끌어오는 것에 계속 문제가 생김. 따라서 해당 웹에서 공유 기능까지 끌어내지 못한 상태로 이미지 저장 기능만 넣은 것이 아쉬웠다.

시행착오와 개선점

API 수정을 통해 공유 기능을 넣어보고자 한다.

댓글

0

작성자 정보를 확인하고 있습니다.