Twine 첫번째 리뷰
개발자 찾기, 개발툴 찾기
2018년 7월 2일
우리는 개발자를 찾고 있습니다. 게임북은 하이퍼 링크 기반의 인터랙티브 스토리텔링 구조를 가지고 있고
기술적으로 복잡하거나 높은 난이도를 요구하는 것은 아니지만, 현재 우리팀에는 개발자 역할을 담당할 사람이 없습니다.
몇몇 팀과 접촉하며 적합한 개발자를 찾기 위해 노력하고 있지만, 뜻대로 되기 어렵다는 생각도 듭니다.
그래서, 플랜B를 가동하여 인터랙티브 스토리텔링 저작을 도와주는 SW들을 찬찬히 둘러보았습니다.
대표적으로 [Twine] . 매번 찔끔찔금 도입부만 사용해 보다가, 상세한 매뉴얼을 보면서 사용해 본 것은 처음인데 나쁘지 않은 것 같아요. 개발자를 구하지 못한다면 아쉬운대로, 이 툴을 사용할 수 있을 것 같다는 생각을 합니다.
Twine은 Chris Klimas가 2009년 하이퍼픽션 인터랙티브 스토리텔링 저작을 위해 고안한 오픈소스 기반 SW 입니다. 스토리텔러들은 Twine을 이용해 프로그램 랭귀지를 알지 못해도 다양한 하이퍼텍스트 픽션을 창작할 수 있습니다. 또 약간의 HTML을 이해한다면, 글에 적합한 이미지, 음악, 영상 삽입이 가능합니다.
Twine은 클라이언트 버전과 웹 버전 서비스를 모두 제공합니다.
Twine의 작동법은 매우 심플합니다.
자세한 사용방법은 예제와 함께 Twine 가이드에 잘 나와 있죠.
http://twinery.org/wiki/twine2:guide
아래 안내 동영상의 도움도 많이 받았습니다.
https://www.youtube.com/watch?v=HZzChB75DFs
우선, 우리팀에 꼭 필요한 기능 몇가지를 점검했습니다.
# 한글지원
예쁜폰트를 지원하는 것은 아니지만, 한글 자체를 인식 못하는 여하의 SW와 비교하면 한글 입력이 가능하다는 장점은 정말 매력적입니다.
3가지 형태의 스토리 포맷을 선택할 수 있는데, Harlowe 2.1.0 을 선택했습니다.
#글상자 만들기
첫번째 상자를 만들어 제목과 페이지, 내용을 간략히 입력해 봅니다.
첫번째 상자에는 녹색 로켓 표시가 생기는데, 출발 상자라는 점을 알려줍니다.
박스에 커서를 가져가면 연필 모양 편집 버튼이 표시됩니다.
원하는 제목과 내용을 입력하세요.
입력화면
디스플레이 화면디스플레이 버튼을 누르면 플레이어가 보는 화면을 확인할 수 있습니다.
폰트, 배경색, 링크색상도 변경할 수 있습니다.
프로그램을 몰라도, 각 포맷별로 어떤 소스를 사용해야 하는지 깨알같이 나와 있습니다.
http://twinery.org/wiki/twine2:change_the_font_colors_or_appearance
이것도 어렵다 싶으면, 동영상을 참고하시면 좋아요.
https://www.youtube.com/watch?v=H_Zp2s0wgg8
그래서, 저도 글자 색상을 바꾸어 보았습니다. 연두색으로.
나는 친절하기 때문에, 색상 코드도 여기에 올려두겠습니다. ^^
https://www.computerhope.com/htmcolor.htm
#서사 분기_박스 연결하기
인터랙티브 스토리텔링북은 서사 분기 구조를 기초로 작동합니다.
첫번째 박스 이후에 이야기를 이어나갈 두번째, 세번째 박스를 추가합니다.
+passge 버튼을 누르면 되요.
출발 박스와 두번째 박스를 연결해 보겠습니다. 링크연결 방법은 총 3가지 입니다.
가장 쉬워 보이는 코드를 선택했습니다.
연결을 위한 코드는 [[링크를 걸 문장 --> 연결될 박스 번호 또는 박스 제목]]을 사용합니다.
'모험을 떠날 준비가 되었다면 선택해' 라는 문장을 2번 박스와 연결하겠습니다.
확인을 해보죠.
내친김에 3, 4번 박스와 2번 박스를 연결 시켰습니다.
코드는 동일합니다. 이제 선수가 되었네요.
감을 잡았습니다.
그러나 이것으로 만족할 수가 없습니다.
아직 이미지도, 영상도, 음악도 삽입하지 못했으니까요.
처음엔 한글로 텍스트만 입력해도 다행이다 생각했습니다.
그런데 지금은 아닙니다. 욕심이 생겼어요. 혼자서도 다 할 수 있을 것 같습니다.
#이미지 넣기
이미지를 넣는 방법은 로컬 PC에 이미지를 업로드 하거나, 웹 링크를 삽입하는 방법 두가지 입니다.
먼저 웹링크를 삽입하는 방법을 연습했습니다.
이미지 삽입을 원하는 박스에 html 코드를 입력하면 끝.
<img src="file명"> 이게 끝입니다. 그러고 컴파일링(publish)하면 이미지가 보입니다.
자세한 안내 영상도 찾아두었어요.
https://www.youtube.com/watch?v=rkWkTJtK2dI
https://www.youtube.com/watch?v=T2xl9JaGqpM
먼저, 전체적인 배경 이미지를 삽입해 보았습니다.
이미지에는 tag를 걸어 둡니다. 나중에 페이지별 배경 이미지를 변경하고 싶을때는 tag를 수정하면 됩니다.
tw-story[tags~="snow"] { background-image:url("ENTER YOUR URL HERE"); background-size:cover; }
https://www.youtube.com/watch?v=_smM0vuoJs8
CSS와 HTML을 할 줄 아는 초급 개발자만 있다면, 작업 시간은 아주 짧게 이미지와 영상을 자유롭게 사용하면서 게임북을 만들 수 있겠습니다. 모바일이 아니라 웹 용으로 만들어 진다는 것이 좀 아쉽겠지만 모바일 최적화를 고려하지 않는다면 자체 제작이 가능해 보이네요.
오늘은 밤이 늦었으니, 여기까지.
#프로젝트다이어리
#플레이시리아
#Twine
Core reference: http://www.adamhammond.com/twineguide/
