[gemini] Opal을 이용한 웹앱 자동화 - 카카오톡 대화웹앱

Opal을 활용한 웹앱 만들기

Opal은 현재(2026.1) 시험버전이다.
그러나 강력한 AI 자동화를 제공하고 있다.
HTML 템플릿을 제공하고 데이터를 입력하면
간단한 웹앱(HTML + Javascript)을 편리하게 생산할 수 있다.

1. 사용법

Opal의 장점은 노코드 툴과 같은 시각화 과정을 제어할 수 있다는 것이다.
사용자가 시각화를 무시하고 생각만으로 프롬프트를 만들어도 논리적 Node가 만들어진다.반면 시각화를 고려하여 Node를 구성하며 상세한 프롬프트를 만들 수도 있다. 2가지 방법 중 사용자에게 유리한 것을 선택하면 된다.

Node로 만들 시 유의점은, 진행의 흐름(연결)을 신경써야 한다는 것이다.

개인적으로는 Opal의 Node와 연동이 익숙하지 않다면 (1)의 프롬프트 영역에 간략히 정리하는 것을 추천한다.

그리고 @를 누르면 유틸리티와 Node를 선택하여 삽입할 수 있다. 매우 중요한 기능이니 반드시 숙지해야 한다.

우측 상단에 Preview, Console, Step, Theme의 탭이 존재한다.

• Preview는 프롬프트를 실행하는 자동화 과정
• Console은 각 Node가 실행되는 과정과 결과
• Step은 프롬프트를 코딩(?)하는 에디터
• Theme는 테마적용인데 아직까지 미흡하다.

2. 사용예제

여기서는 Node를 직접 생성하여 그 Node 안에서 프롬프트를 만들었다.

1. Add Assets를 사용하여 index-2.html를 추가한다. HTML 템플릿으로 사용할 html 파일이며 원래는 채팅의 기능을 시뮬레이션 하기위해 만든 것이다.

index -2.html

0.01MB

2. 상단메뉴에서 User Input을 누르고 다음과 같이 입력한다.

[카카오톡 대화 -> 채팅 UI로 만들기]
카카오톡 대화내보내기 기능을 이곳에 붙여넣기 하세요
중요한 정보는 삭제하시기 바랍니다. 

3. 상단메뉴에서 generate를 눌러 추가한다.

# Role
입력된 카카오톡 정보를 HTML 화면으로 보여주는 웹앱 제작기

# 할 일
@"Create Chat UI"된 정보를 다음과 같은 유형이다. 

남 님과 카카오톡 대화
저장한 날짜 : 2026-01-30 10:53:08

--------------- 2025년 12월 20일 금요일 ---------------
[나] [오후 7:22] 보내주신다는 기획서 보내주세요
[남] [오후 7:26] 조만간 보내겠습니다. 
--------------- 2026년 1월 9일 목요일 ---------------
[나] [오후 11:22] 보내주신다는 기획서 아직 안왔어요
[남] [오후 7:26] 조만간 보내겠습니다. 

남은 대화상대
저장한 날짜는 정보가 저장된 날짜
--------------- 2025년 12월 20일 금요일 ---------------
는 타임라인
[나] [오후 7:22] 보내주신다는 기획서 보내주세요
는 메시지 쓴 사람, 시각, 메시지 형식

위의 내용으로 @index-2.html에 내용을 적용한다. 
그리고 채팅입력창은 비활성화 한다. 

4. 상단메뉴에서 node를 눌러 Output을 생성한다.

HTML 출력규격:
@index-2.html 포멧을 벗어나지 않는다.  
@Generate Chat"의 내용을 적용한다.

3. 결과물

카카오톡Export.html

0.01MB