---
title: 비주얼노블 뷰 예제
view: visualnovel
tags: [예제, 비주얼노블, 보기모드, 창작, 연출]
---

# 비주얼노블 뷰 예제 — 마크다운 에디터에 게임뷰?!

> 이 노트는 프론트매터에 `view: visualnovel`이 들어 있어요. 상단 도구바의 **비주얼노블 ▶** 버튼을 눌러 재생해 보세요!

<<사무실:사무실_낮.png>>
![[일상.mp3]]
햇살이 잘 드는 어느 오후의 사무실. 모니터 앞에 그녀가 앉아 있다.
<<옵시코코:옵시코코.png-->> 안녕하세요! 지금 당신이 보고 있는 이 화면이 바로 **비주얼노블 뷰**에요.
<<옵시코코:옵시코코.png!끄덕-->> 배경이 쫙 깔리고, 제가 이렇게 무대에 서서 대사를 말하고 있죠?
<<옵시코코:옵시코코.png-->> 프론트매터에 `view: visualnovel` 한 줄만 넣으면, 평범한 노트가 통째로 게임 화면이 된답니다.
<<옵시코코:옵시코코.png-->> 클릭이나 Space를 누르면 한 대사씩 넘어가고, ← 키로는 되감을 수 있어요.

그때, 사무실 문 쪽에서 짜잔— 하는 소리가 났다.
<<오브리스:오브리스_홀로그램.png--|>>  누나! 대체 누구랑 말하고 있는거야?
%%flash%%
![[개그.mp3]]
<<옵시코코:옵시코코_오른쪽.png!흔들|-->> [휘익](assets/휘익.wav) 으악, 오브리스! **홀로그램**으로 튀어나와서 깜짝 놀랐잖아! 새로운 손님에게 뷰어 사용법을 가르쳐 드리고 있어.
<<오브리스:오브리스.png--|>> 오, 나도 할래! 헤헤, 이게 포트레이트 교체 연출이야. 같은 캐릭터라도 이미지를 바꾸면 **크로스페이드**로 슥 바뀌지.
<<옵시코코:옵시코코_오른쪽.png|-->> 말하는 사람은 또렷해지고, 말 없는 캐릭터는 살짝 물러나며 어두워진답니다. 
<<옵시코코:assets/옵시코코_오른쪽.png|-->> 지금 내가 말할 땐 오브리스가 뒤로 빠지죠?
<<오브리스:오브리스_흐리게.png--|>> …어? 나 흐려졌어.😳
<<옵시코코:assets/옵시코코_오른쪽.png|-->>대체 왜 그렇게 된거야?
<<오브리스:assets/오브리스_흐리게.png--|>>옵시코에선 간단한 이미지 편집도 가능하니까 다양한 효과도 쉽게 넣을 수 있어.
<<오브리스:assets/오브리스_그림자.png--|>>짠! 그림자!
<<오브리스:assets/오브리스_색수차.png--|>>짜잔! 색수차!
<<오브리스:assets/오브리스_색반전.png--|>>짜자잔! 색반전!
<<오브리스:assets/오브리스_흑백.png--|>>흑백! 이런 이미지 효과가 클릭한번에 만들어진단 말씀!
<<옵시코코:assets/옵시코코_오른쪽.png|-->> 그래. 그런 것도 있었지. 
<<옵시코코:assets/옵시코코_오른쪽.png|-->> 이 예제는 음악과 효과음 외의 AI이미지 제작부터 이미지 편집과 대본작성까지 모두 옵시코에서 만들었답니다!
<<오브리스:assets/오브리스.png--|>>미친거 아냐?
<<옵시코코:assets/옵시코코_오른쪽.png|-->>심지어 무료! 물론 AI는 외부 서비스의 로그인이나 API연결(토큰사용)이 필요하지만요.
<<오브리스:assets/오브리스.png--|>>잉, 그럼 버는 돈이 없잖아? 우리 먹여 살려야지!
<<옵시코코:assets/옵시코코_오른쪽.png|-->>뭐...대표님이 알아서 하시겠지. 

> 크흠, 돈은 다른 걸로 벌 예정.
> 옵시코코는 무료입니다. 마음껏 쓰세요.

---

# 어느새 밤이 되고...

<<사무실:사무실_밤.png>>
![[심각.mp3]]
어느새 창밖이 어두워지고, 사무실엔 모니터 불빛만 남았다.
<<옵시코코:옵시코코_오른쪽.png|-->> 배경 참조 한 줄이면 이렇게 **장면 전환**이 된답니다. 배경음도 이전 곡과 새 곡이 부드럽게 겹치며 이어져요.
<<오브리스:오브리스_세피아.png--|>> 오… 낮이랑 밤이랑 완전 딴 세상 같아. BGM만 바꿔도 이렇게 분위기가 달라지네.
<<옵시코코:옵시코코_오른쪽.png|-->> 이제 뭘 더 보고 싶나요? 골라 보세요. 👇
어떤 연출을 먼저 볼까요? → [[#효과음과 화면 연출은 이렇게]] [[#선택지 다음엔, 퇴장]]

---

# 효과음과 화면 연출은 이렇게

<<거리:거리.png>>
![[급박.mp3]]
두 사람은 거리로 나섰다. 해질녘 노을이 길게 드리우고 있었다.
<<옵시코코:옵시코코_오른쪽.png!점프|-->> 자, 여기선 화면 연출을 보여줄게요. **흔들림**부터!
%%shake%%
<<오브리스:오브리스_색수차.png--|>> 우와아, 화면이 진짜 흔들려! 이건 `shake` 마법?
<<옵시코코:옵시코코_오른쪽.png|-->> 맞아. 앞뒤로 `%%`를 넣고  효과이름만 적으면 되요. `flash`는 번쩍, `fade`는 암전이에요. 한글로 `흔들림` `번쩍` `암전`이라 써도 알아들으니까 걱정 마세요!
<<오브리스:assets/오브리스.png--|>>누나! 에디터에 '%%'사이에 글자를 쓰면 주석으로 인식되어서 사라져 버려!
<<옵시코코:assets/옵시코코_오른쪽.png|-->>뿅 사라져도 너무 놀라지 마세요! 그럴때는 에디터 오른쪽 상단의 '<>'버튼을 눌러서 원문을 보면 그대로 남아 있답니다!
<<옵시코코:옵시코코_오른쪽.png!끄덕|-->> 그리고 이미지 뒤에 `!점프` `!흔들` `!끄덕`을 붙이면 캐릭터가 콩! 하고 움직여요. 방금 내가 뛴 것처럼요!
<<오브리스:오브리스.png!점프--|>> 나도! 점프! [휘익](assets/휘익.wav)
이제 마무리를 보러 갈까요? → [[#커튼콜]]  [[#선택지 다음엔, 퇴장]]

---

# 선택지 다음엔, 퇴장

<<거리:거리.png>>
![[긴장.mp3]]
<<옵시코코:옵시코코_오른쪽.png|-->> 방금 그 갈림길, 봤죠? 평소 마크다운 문서를 작성하던대로 내레이션 줄에 `[[위키링크]]`를 넣으면 **선택지 버튼**이 된답니다.
<<옵시코코:옵시코코_오른쪽.png|-->> `[[#소제목]]`은 문서 안에서 제목으로 점프하고, `[[다른문서]]`는 아예 다른 에피소드로 이어져요. 링크만 잘 이용해도 인터랙티브 스토리를 단숨에 완성 할 수 있죠!🌿
<<오브리스:assets/오브리스.png--|>>더 놀라운 건 모바일, 태블릿, 데스크탑, 브라우저 어디서든 편집하고 뷰어로 볼 수 있다는 사실!
<<옵시코코:assets/옵시코코_오른쪽.png|-->>물론이야. 그게 바로 옵시코의 자랑거리니까! 
<<오브리스:오브리스.png--|>> 흠- 슬슬 설명은 끝난 것 같고, 그럼 이제 나는 **퇴장**해 볼까?
<<옵시코코:assets/옵시코코_오른쪽.png|-->>가려고?
<<오브리스:오브리스.png!끄덕--|>> 가야지. `<<이름:->>` 이렇게 쓰면 무대에서 사라져. 잘 봐!
<<오브리스:->>
<<옵시코코:옵시코코_오른쪽.png-->> …이렇게 오브리스가 무대에서 빠졌어요. 메신저 뷰였다면 "오브리스님이 나갔습니다"라고 떴을 거에요.
마지막 인사를 하러 갈까요? → [[#커튼콜]]  [[#효과음과 화면 연출은 이렇게]]

---

# 커튼콜

<<사무실:사무실_밤.png>>
![[일상.mp3]]
다시 사무실. 옵시코코가 이쪽을 바라보며 미소 짓고 있다.
<<옵시코코:옵시코코.png-->> 여기까지가 **비주얼노블 뷰** 예시에요. 
<<옵시코코:assets/옵시코코.png>>배경·캐릭터·표정·BGM·효과음·화면 연출·선택지·퇴장까지 다 담아 봤는데 잘 전해졌을 지 모르겠네요.
<<옵시코코:옵시코코.png!끄덕-->> 놀라운 건 — 이 **똑같은 대본**을 웹소설 뷰로는 소설처럼, 메신저 뷰로는 채팅 드라마처럼도 볼 수 있다는 거죠! 
<<옵시코코:assets/옵시코코.png>>에디터 상단의 프론트메터에서 `view` 값만 바꾸면 된답니다.
<<옵시코코:assets/옵시코코.png>>반응이 좋은 쪽에 좀더 업데이트를 주력할 예정이니 앞으로도 기대해 주세요~
<<옵시코코:옵시코코.png-->> 자세한 문법은 도움말의 [[17-3 메신저·비주얼노블 뷰]]에서 확인해 보시길 추천드립니다. 
<<옵시코코:assets/옵시코코.png>>물론 몰라도 상관 없어요! 에셋폴더에 그림과 음악을 넣어 준비하고 스마트한 옵시코 AI에이전트에게 비주얼노블뷰로 볼수 있게 만들어 달라고 하면 다 해주니까요.
<<옵시코코:assets/옵시코코.png>>그럼, 즐거운 창작 시간 되시길 바랍니다! 🎬
%%fade%%

---

📚 함께 보기: [[17-3 메신저·비주얼노블 뷰]] · [[17-2 캐릭터 도감과 캐릭터 참조]] · [[17-1 이북·웹소설 뷰어]]
