생성형 AI 제품을 프로토타이핑 해보자!
프로토파이(Protopie)를 활용하여 Gemini 만들어보기
요즘 핫 한 Google 생성형 AI 제품인 Gemini를 Hi-Fi 프로토타이핑 해볼게요.
디자인 툴은 피그마(Figma), 프로토파이(Protopie) 2가지 사용할 테니, 두 가지 툴에 계정이 없다면 미리 가입해 주세요. 무료로 이용 가능합니다.
모든 작업은 본인이 직접 해야 하며, 별도 파일은 제공되지 않습니다. 이 기회에 프로토타이핑 역량을 늘려보세요!
�프로토타이핑(Prototyping)에 대해 궁금하다면 아래 링크를 먼저 확인해 보세요!
이번 글에서 같이 만들어볼 Gemini 프로토타이핑이에요.1. 피그마로 Gemini를 똑같이 만들어 주세요.
Gemini 화면 2가지를 캡처하여 피그마로 모든 요소들을 직접 만들어 주세요.
프롬프트 입력 전 화면, 프롬프트 입력 후 화면 2가지 페이지가 필요해요.
2. 피그마 Protopie 플러그인을 활용하여 Figma에서 export 해주세요.
2가지 페이지 프레임을 모두 선택하고, 마우스 우클릭하거나 상단 플러그인 메뉴 클릭하여 Protopie로 export 해 주세요.
3. 프로토파이에서 2가지 페이지를 확인한 뒤 첫 번째 페이지에 프로토파이 Text > input 기능을 활용하여 프롬프트 입력이 가능하도록 세팅해 주세요.
Protopie는 프토토타입 시 자체 input 기능을 제공하고 있어 추후 프롬프트를 실제로 입력해 볼 수 있습니다.
input UI는 우측 패널을 통해 Gemini처럼 변경해 주시고 레이어 이름은 prompt-input로 변경해 주세요.
4. Variables(변수)를 하나 추가하고 이름을 promptText로 변경해 주세요.
promptText 변수는 입력 값에 따른 답변을 관리할 거예요. 이번 과제에서는 고정된 답변으로 질문에 따라 답변이 다르게 제공되진 않지만, 고급 기능을 활용하면 질문에 따라 다른 답변이 나올 수 있어요.
promptText 우측 패널에서 Text 탭을 활성화하고, 그곳에 프롬프트 입력 후 나오게 될 답변을 작성해 주세요.
5. 프롬프트 입력 후 키보드 엔터를 입력하면 프롬프트 입력 후 화면으로 이동되게 세팅해 볼게요.
예시로 보여준 프로토타입에서는 입력창이 활성화/비활성화되었을 때 보내기 아이콘이 나왔다가 사라지는 인터렉션이 있었는데, 해당 인터렉션 요소는 이번 글에서 생략하도록 하겠습니다.
궁금하신 분이 있다면 댓글 달아주세요!
6. timer 변수를 활용하여 답변이 한 글자씩 나올 수 있도록 만들어 볼게요.
protopie의 text 기능을 활용하여 프롬프트 답변이 나올 영역을 잡아주세요.
레이어 이름은 text-interaction으로 변경해 주시고, 우측 패널에서 입력 후 나오게 될 스타일 요소까지 완료해 주세요.
Variables(변수)를 하나 추가하고 이름을 timer로 변경해 주세요.
Start 트리거를 만들고 timer 변수가 +1씩 증가할 수 있도록 해 주세요.
7. (마지막) 미리 준비해 둔 promptText 변수에 text 내용이 한 글자씩 나오도록 해볼게요.
timer 변수를 detect 하는 트리거를 만들고 text-interaction의 텍스트가 promptText 변숫값으로 채워질 수 있도록 합니다. 이때 left 함수를 사용하여 왼쪽부터 순서대로 쌓일 수 있도록 해주세요.
마지막으로
피그마와 프로토파이를 활용하여 Google 생성형 AI 제품인 Gemini를 Hi-Fi 프로토타이핑 해보았는데요.
잘 따라오셨나요? 무작정 따라 만드는 것이 아니라 혼자서 고민할 수 있도록 일부러 예제 파일과 같은 준비물은 제공해드리지 않았습니다.
고도화된 프로토타이핑, 노코드, 로우코드 툴을 활용하여 디자이너가 개발자 없이도 제품을 쉽게 만들 수 있는 환경이 되어 무척 설레는 요즈음입니다.
물론 매일 새로운 툴들을 학습해야 해서 머리가 아프지만요...
