기본적인 시작화면으로 깃허브에서 CYOAP 프로그램을 다운 받고 정상적으로 실행하였을 때 볼 수 있는 화면이다.

프로그램 다운로드 링크 : https://github.com/n7484443/cyoap_flutter/releases

각 항목은 다음과 같다.

1. 현재 프로그램의 버전을 의미한다. 만약 새로운 버전이 나올 경우 해당 버전 옆에 붉은 색 글자의 알림이 나온다.
2. 다크모드로 변경 가능한 버튼이다.
3. 언어 선택 버튼이다. 현재 4.4.6버전 기준 영어, 한국어가 있다.
4. 설정 버튼이다. 잡다한 세팅을 조절할 수 있다.
5. 프로그램에 파일 형식의 데이터를 불러올 수 있다. ZIP버전의 CYOAP 제작물이나 ICC로 제작하였던 json 파일을 일부 불러올 수 있다.
6. 폴더 형식의 데이터를 불러올 수 있다. CYOAP 제작물이 저장될 폴더를 설정해주자
7. 불러온 CYOAP 데이터로 직접 플레이 할 수 있다. 파일이나 폴더를 불러오고 선택 후 해당 버튼을 누르면 플레이 가능하다.
8. 제작버튼이다. 7번과 같이 불러온 후 수정, 제작이 가능하다.

이전 사진에서 3번에 해당하는 지구본 버튼을 눌렀을 경우 나오는 화면으로 English나 한국어를 골라 클릭하면 된다.

톱니바퀴 모양의 버튼을 눌렀을 때 나오는 화면이다.
저장시 webp파일로 변환은 이미지의 형식을 자동으로 변경해줌으로 파일 전체의 용량을 줄여주는 역할을 해준다.
항상 최대 칸수로 보기의 경우 윈도우에선 가로 너비가 12 기본인데 모바일에선 6 기본이라서 모바일에서 제작한 데이터를 

윈도우로 불러오면 자동으로 너비가 2배씩 커지게 되는데 이게 싫거나 모바일에서도 12 너비로 수정하고 싶은 경우

너비를 2배하는게 아니라 그대로 불러오는 것이다.

정상적으로 폴더 추가나 파일 추가를 눌러 데이터를 불러왔을 경우 파일의 경로가 빨간 부분에 나올 것이다.

위 화면은 두 개 이상의 파일을 불러왔을 경우의 사진이다.
보시는 것과 같이 파란 것이 선택된 파일이고 흰색이 선택되지 않은 파일이다.
파란색으로 표기된 파일이 Play 버튼과 Make 버튼을 눌렀을 때 불러와진다.

정상적으로 파일을 선택 후 Make 버튼을 눌렀을 때 화면이다.
이때 나는 빈 파일을 선택하였으므로 새롭게 파일이 만들어져 아무것도 없는 모습이 나온다.

메뉴를 설명하자면.

1. 저장버튼이다. ZIP형식과 일반 폴더 형식으로 저장할 수 있다.
2. 변수 새로고침 버튼이다. 여기서는 생략한다.
3. 선택지들의 목록을 볼 수 있는 버튼이다. 버튼을 누를경우 옆에 창이 확장되어 뜬다.
4. 변수를 망라하여 볼 수 있는 버튼이다. 버튼을 누를경우 옆에 창이 확장되어 뜬다.
5. 복사된거나 바로 이전에 삭제된 선택지들을 보고 불러올 수 있는 버튼이다.

6. 새로운 선택지를 만들 수 있는 버튼이다.

7. 처음 메뉴로 돌아가는 버튼이다. 누를 시 저장할지 묻는 창이 뜨니 걱정말자.

8. CYOA의 전반적인 디자인 세팅 메뉴로 가는 버튼이다.
9. CYOA의 배경 사진을 입력하는 곳이다.
10. 변수를 확인하고 설정할 수 있는 메뉴로 가는 버튼이다.

※수정※

4.4.6버전 이후로 인터페이스가 다음과 같이 변경되었습니다.

이전 사진의 1번 저장 버튼을 눌렀을 경우 나오는 창이다.
이전 설명한 바와 같이 ZIP과 폴더 상태로 저장으로 나눠저 있다.

기본적인 선택지 추가 및 수정, 라인 설정 버튼들이다.

라인은 일종의 단락으로 여러 선택지들의 묶음으로 작용한다. 

하나의 라인에서 고를 수 있는 선택지를 제한하거나 라인 단위로 계산되는 변수를 설정하는 등의 구획 역할을 해준다.

1. 해당 라인을 접기, 펴기 하는 부분으로 잠시 쓰지 않을 때 접어 둘 수 있다.

2. 선택지의 크기, 복사, 삭제를 할 수 있는 버튼이다. 참고로, 선택지의 저 버튼이 아닌 부분을 더블 클릭시 선택지 내용을 수정하는 부분도 들어가진다. 

3. 해당 라인 내부에서 선택지를 만드는 버튼이다.

4. 여러 라인이 있을 때 해당 라인을 위쪽의 라인 위로 올리는 버튼이다.

5. 4번의 반대다.

6. 라인의 설정을 하는 부분이다. 

1. 선택지의 좌우 폭을 설정할 수 있다. 1칸에서 12칸까지 너비를 드래그하여 설정 할 수 있다.

2. 선택지를 복사하여 클립보드 메뉴에 저장할 수 있다. 

3. 해당 선택지를 삭제한다.

선택지의 크기 수정을 눌렀을 경우 나오는 창이다.

아래 파란 원을 드래그하여 크기를 조절할 수 있으며 오른쪽으로 갈 수록 폭이 넓어진다.

왼쪽으로 갈 수록 폭이 짧아지나, 최대치까지 줄였을 경우 최대 크기로 설정할 수도 있다.

선택지 복사 관련 화면이다.

1. 클립보드 버튼을 눌러 복사, 삭제된 선택지들을 볼 수 있다. 위쪽이 복사, 아래쪽이 삭제된 선택지로 보인다.

2. 삭제, 복사된 선택지들이다. 드래그하여 원하는 곳에 집어 넣을 수 있다.

현재 상황에서 총 4군데에 드래그하여 옮길 수 있었다.

1. 선택지 82의 위

2. 선택지 82의 안

3. 선택지 82의 아래

4. 선택지 82가 있는 라인의 다음 라인

4번을 통하여 새로운 라인을 만들 수도 있다.

이건 1번, 3번의 경우 배치 결과이고

이것은 2번의 결과이다.

잘 보면 선택지 82의 안에 선택지 82가 들어간 모습을 볼 수 있을 것이다.

이 경우에 바깥쪽의 선택지 82가 선택되어야 안쪽의 선택지 82를 선택할 수 있게되는 부분이 있다.

다음 라인에 드래그하였을 경우다.

이 드래그 과정은 이미 놓여져 있는 선택지를 드래그하고 옮기는 과정에서도 똑같이 적용된다.

라인에 대한 설명이다.

1. 선택지의 이동이다. 위에서 한번 설명했다.

2. 선택지의 설정이다.

이전 사진에서 2번을 눌렀을 때 화면이다.

1. 해당 라인에서 총 고를 수 있는 선택지 수를 정할 수 있다.

2. 해당 라인의 디자인 프리셋을 고를 수 있다. 

3. 해당 라인이 보여지는 조건을 변수, 선택지 선택여부 등을 통하여 조정하는 칸이다. 코드를 입력한다.

4. 해당 라인의 이름이다. 해당 라인의 이름이 변수가 되어 심화 과정에서는 해당 이름을 이용한다.

5. 해당 라인이 가려지거나 숨겨질 때 하위 선택지들이 자동으로 취소될지 여부를 고르는 곳이다.

왼쪽 하단, 초반 메뉴 설명에서 8번에 해당하는 부분인 곳을 눌렀을 때 창이다.

선택지의 디자인을 설정 할 수 있다. 

점수 폰트의 경우 하단의 CYOA의 변수 그러니까 점수를 표기할 때 글씨체를 고를 수 있고 

선택지 간 세로 여백은 선택지 사이의 세로 여백을 설정하는 곳이다.

선택지 색상의 경우 solid와 gradient로 나뉘는데 선택지 색상 글씨의 왼쪽 하단에 있는 파란 박스에서 예제를 볼 수 있다.

나머지 그 하단은 색 설정 부분이다.

여기서 프리셋과 일반으로 위에 메뉴가 나뉘는 것을 볼 수 있을 텐데 일반의 경우 전체적인 배경을 설정할 수 있다.

프리셋의 경우 선택지 하나 하나의 색을 고를 수 있다.

만약 gradient를 고를 경우 1번, 2번에서 두가지 색을 골라 4번에서 그 원색의 위치를 조정해 gradient를 조절하고 설정할 수 있다.

gradient의 종류의 경우 1번 바로위의 메뉴에서 고를 수 있다.

이하생략

8번 메뉴에서 상단의 일반과 프리셋 중 프리셋 부분이다.

프리셋의 경우 선택지 디자인을 사전에 정해두고 그 정해둔 디자인들을 일컫는 말이다.

1. 프리셋을 새로 추가할 수 있다.

2. 선택지의 그림자를 설정한다. 높을 수록 그림자가 퍼진다.

3. 선택지의 모서리, 꼭짓점의 둥근지 여부를 결정한다. 수치가 높을 수록 점점 더 둥글어진다.

4. 선택지 내부의 글씨와 모서리 사이의 공간을 결정한다. 수치가 높을 수록 점점 멀어진다.

5. 선택지 내부에 이미지를 가능한 크게 꽉차게 할지 여부를 결정한다.

6. 선택지의 이름을 숨길지 여부를 결정한다.

7. 선택지의 이름을 이미지 위로 할지 아래로 할지 결정한다.

8. 선택지의 이미지와 글자 배치를 가로모드로 할지 정한다.

가로모드는 기존 상하로 나뉘어 이미지와 글자가 배치된 것과 반대로 좌우로 이미지와 글자를 배치하는 방식이다.

9. 가로모드시 이미지 위치를 결정한다.

나머지 제목폰트와 내용폰트는 설명을 생략한다.

사진 중앙의 일반에서 외곽선으로 내려왔을 때 사진이다.

외곽선의 경우 선택지의 외곽을 둘러싸는 선으로 4번의 선택시 색상 변경 활성화가 주요 활용처다.

알파값을 수정하여 그 투명도를 조절 할 수 있고 3번을 통해 그 형태를 조형할 수도 있다.

선택지의 내부 색상을 결정하며 외곽선 부분과 설명은 유사하다.

라인의 색, 디자인을 결정한다. 색상 설명은 생략한다.

메뉴 설명의 9번 사진파트다. 

1. 배경 이미지를 입력하였을 때 그 이미지가 어떤식으로 배치될지 설정하는 곳이다. 

2. 이미지를 추가하는 곳이다.

이미지 설정시 그 이미지 적용 방식들로

1. 딱 맞춰서

2. 꽉 채워서

3. 여러번 반복해서

4. 늘려서 

직접 입력해서 확인해보는게 제일 이해하기 좋다.

각종 CYOA 내 수치들을 수정하고 설정하는 곳이다.

1. CYOA 내부의 변수들의 목록이다.

2. 선택한 변수의 상세 정보를 서술하는 부분이다.

3. 실제 CYOA 플레이시 해당 변수를 직접적으로 노출할지 여부다.

4. 변수의 이름이다. 코딩시 해당 이름을 사용하게 된다.

5. 변수의 처음 값이다. true/false로 설정시 변수가 on off 형식으로 작동하고 숫자로 입력시 숫자로 작동한다.

6. 플레이어가 게임을 할 때 표기되는 변수 이름이다.

7. 새로운 변수를 만드는 버튼이다.

8. 변수 목차의 순서를 변경한다.

9. 변수를 삭제한다.

 디자인은 CYOA 제작에 있어서 가장 큰 부분 중 하나라고 보아도 무방하다.

그런 만큼 긴 세월동안 상대적으로 디자인적 자유도가 높은 스테이블 CYOA -이미지 형식의 CYOA- 는 많은 사랑을 받아왔다.

CYOAP의 가장 큰 단점 중 하나도 디자인이었는데 최근 들어 CYOAP의 디자인 기능성이 크게 향상되어 여러가지 응용을 통해 작업하는 예시를 보여줌으로 이해를 돕고자 한다.

우선 목표로 하는 디자인은 알리익스프레스의 색감이다.

왼쪽에서 우측으로 가며 옅은 채도에서 짙은 색감으로 이어지는 양식과

강렬한 주황빛의 색감, 회색과 검은색 기반의 색감을 통합하여 만들어보려 한다.

이런 디자인을 결정한 이유는 지금 예시로 만들 CYOA가 인터넷 쇼핑몰 컨셉이기 때문이다.

첫 시작 부분 디자인은 해당 부분의 디자인을 모방하여 만들어보도록 하겠다.

첫 시작은 파란 화면이 반겨준다.
하나 우리가 원하는 화면은 흰색 바탕의 화면이니 갈아치워주자.
붉은 원표시를 해둔 디자인 설정 메뉴로 들어간다.

복잡한 디자인 설정들이 당신을 반겨주지만 우리는 간단하게 하나 하나 목표하는 바를 만들어가면 된다.
우선 우리는 기본적인 선택지의 메인이 될 투명 배경의 둥근 꼭짓점인 선택지를 만들 것이다.

1. 선택지의 꼭지점의 각짐을 설정하는 곳으로 20을 입력하자 왼쪽 하단 선택지의 꼭지점이 둥글게 변한 것을 볼 수 있다.

2. 선택지 모서리와 글자, 이미지 사이 간격을 조절한다. 관찰력이 높은 사람이라면 글자와 모서리간 간격이 넓어진 것을 알아차릴 수 있을 것이다.

3. 이미지 최대화, 이미지를 입력했을 때 해당 이미지를 선택지 크기 내에서 선택지 내부를 꽉 채울지 여부를 묻는 것이다. 난 기본적으로 체크해두는 편이다.

4. 제목 숨기기, 선택지 이름을 숨기는 것인데 디자인 측면에서 심화적인 측면으로 나아갈 경우 숨기는 것이 무조건 이득이니 일단 숨기고 보자.

5. 제목과 내용의 폰트인데 나는 기본 폰트에서 해당 폰트로 수정해주었다.

중앙의 일반, 외곽선, 내부 중에서 내부와 외곽선을 수정한 결과다. 여기서 내부는 다음과 같이 투명도를 0으로 맞추어주었다.

하얀 배경으로 만들 예정이니 하얀색으로 설정해도 무관하나, 추후 다른 곳에서도 같은 프리셋을 쓰려 하니 투명으로 잡아준다.

외곽선 프리셋 설정이다. 선택지를 선택하였을 경우 그 선택지의 외곽선이 검게 변하도록 설정하였으며

그 외곽선은 평소에 투명한 상태로 존재하게 해둔 화면이다.

상단의 일반과 프리셋 중 일반 설정 창이다.

일반에서는 기본적인 CYOA의 배경을 설정할 수 있으며

나는 일단 하얀색으로 잡아두었다.

기본 폰트도 선택지와 동일하게 해주었고 선택지 간격도 딱 떨어지게 10으로 잡아뒀다.

그 후 선택지를 아무거나 하나 쌩으로 만들어주면 다음과 같은 화면이 나온다.

정상적으로 파란색 배경에서 흰색 배경으로, 그리고 선택지의 색도 프리셋에서 설정한 대로 나온다.

첫번째 라인은 검은 검색창을 따라 만들 계획이니 일단 한칸 아래로 내려 새로운 라인을 만들어준다.

이렇게 옮긴 후에는 첫번째 라인을 검게 만들어 주어야하는데 라인 또한 프리셋이 존재하여 프리셋을 만들어주어야 한다.

''

디자인 메뉴로 들어가서 왼쪽 상단의 선택지, 라인 중 라인을 골라 프리셋으로 들어가준다.

그리고 다음과 같이 검은색으로 디폴트 프리셋을 바꿔주면

이 꼴이 나버린다.

 일단 라인은 선택지가 하나라도 있어야 그 프리셋이나 디자인이 적용되어 첫번째 라인에서는 선택지가 현재 없는 상태라 프리셋도 적용되지 않은 모습이다. 

나아가 우리는 첫번째 라인만 검은 색으로 만들 계획이었으니 흰색 라인 프리셋도 또 만들어야함을 여기서 알 수 있다.

프리셋 옆의 +버튼을 눌러서 프리셋을 늘려준다.

만든 프리셋은 옆에 쓰래기통 아이콘이 보이며, 길게 누르는 것으로 이름을 바꿀 수 있다.

이름은...

대충 지어준다.

처음 생성시 기본 설정처럼 되어있는데 이걸 검은 색으로 바꿔주고

디폴트는 오히려 원상 복구 시켜준다. 투명한 색으로 말이다.

검은색은 검게

그러고서 바로 나오면 다음과 같이 되는데 첫번째 라인의 프리셋을 검은색으로 바꿔주고, 선택지를 하나 집어넣어 줘보자.

위 빨간 원에 있는 톱니바퀴를 눌러 라인 설정창을 열어준다.

프리셋 설정은 기본적으로 디폴트 값을 따른다. 여기서 해당 디폴트 값을 누르면 선택이 가능한 창이 열리는 데

방금 만든 검은 색으로 바꿔준다.

그러고서 선택지를 하나 만들어주면 다음과 같이 원하던 형상으로 만들어진다.

근데 우리는 저 선택지 모양이 아닌 오직 흰색인 선택지를 요구한다.

고로 선택지도 새로운 프리셋을 만들어서 조정해주자.

흰색 선택지의 프리셋이니 흰색.

새로 만들었던 프리셋으로 설정해주기 위해 선택지 설정 창으로 들어간다.

선택지 설정 창은 선택지를 더블클릭하면 들어갈 수 있다.

선택지 설정 창이다. 여기서 선택지의 이름, 내용, 코드, 이미지, 설정등 다양한 요소를 정할 수 있으며 CYOAP를 이용하며 가장 많이 보게 될 화면이나 지금은 생략하고 필요한 것만 진행하겠다.

위의 4개의 목차 중 설정을 먼저 들어가서

프리셋 설정을 눌러 우리가 방금 만든 흰색을 골라준다.

우리는 해당 선택지를 단순 디자인 용도로만 쓸 것이니 선택할 수 없도록 해야한다.

고로 프리셋 설정 아래의 노드 모드 설정을 눌러준다.

기본, 랜덤 선택, 다중 선택, 선택 불가, 코드만 사용 여러가지가 있는데 여기서 우리는 선택 불가를 골라 아에 선택할 수 없는 장식으로 만들어주겠다.

그러고서 밖으로 나오면 성공적으로 프리셋 변경에 성공한 모습을 볼 수 있다.

검색 창 역할을 하는 흰색 선택지의 왼쪽에는 원본 알리 익스프레스 사이트의 로고가 비치되어 있으니 선택지를 하나 더 쑤셔넣어주자.

여기서는 기존 선택지의 복사를 사용해볼 것이다.

아래의 투명 선택지의 점 3개 버튼을 눌러 복사를 눌러준다.

그러고 나서 왼쪽의 클립보드 버튼을 누르면 복사된 선택지가 보일 것이다.

복사된 선택지를 드래그해서 흰색 선택지 위로 옮겨보자

이렇게 말이다.

성공하면 다음과 같이 보일 것인데 검색 창 역할을 하는 흰 부분은 가로로 길다. 고로 크기를 수정해주자.

크기는 6 정도로 맞춰주자.

그러고 로고가 들어갈 선택지를 더블 클릭해 들어가보자.

여기서 선택지의 내용을 입력할 수 있다.

우리는 여기서 글자의 크기, 색 조절을 이용할 것이다.

파란색 부분을 클릭해 글자를 입력할 수 있다.

글씨를 드래그 한 후 1번을 눌러 색을 설정할 수 있는데

우리는 검은 색 바탕인 상황이니 흰색으로 색을 설정하고 2번을 눌러 확정 후 나와주자

성공적으로 변환 되었다면 이렇게 흰색으로 보일 것이다.

크기는 다시 원하는 글자를 드래그 한 후 Font size 버튼을 눌러서 크기를 조정해주면 된다.

매우 크게로 설정해보자.

폰트 사이즈가 확연히 커진 것을 확인할 수 있다. 이대로 저장하고서 나와보자.

흠... 좀 보기 흉하다. 실제 플레이 화면은 어떨까?

대충 모양새가 나오는 듯 하다.

흠....

비슷한가?

이걸 다 하나하나 수정하고 디자인하는 걸 써서 올리기에는 벌써부터 아득해지니 어느정도 혼자서 설정하고 나서 가져와보겠다...

 저번 강좌에서는 기본적인 선택지 꾸미기를 다루었으니 이번 강좌에서는 다음과 같은 그라데이션과 투명 선택지의 배치를 통한 위치 조정을 배워볼 것이다.

이번 강좌에서 목표하는 바는 다음과 같은 창을 만드는 것이다.

우선 저번 디자인 1강 파일에서 디자인 프리셋을 새로 만들어주자.

사진에서 생략되었으나 맨 좌측의 선택지, 라인 중에서 라인을 택해야 배경 프리셋을 작업할 수 있다.

앞에서 본 사진의 배경은 연노랑 그라데이션 효과였다.

고로, 이름도 연노랑으로 대충 지어준다.

선택지 색상에서 솔리드가 아니라 그레디언트를 골라준다.

그러면 아래 사진처럼 색을 고를 수 있는 0, 1로 두개로 증가할 것이다.

첫번째 0에서 옅은 색감을 일단 고르고

두번째 1에서 짙은 노란색을 골라준다.

그라데이션 효과는 그 색의 짙은 부분이 어디에 위치한가에 따라서 그 형태나 모양이 변하기 마련인데,

그를 설정하는 칸은 위 사진의 붉은 네모칸 안이다.

저 네모칸 안의 붉은 점을 이동함으로서 해당 색의 원점, 그러니까 가장 짙은 부분의 위치를 설정할 수 있게된다.

이렇게 붉은 점을 흰색 칸 안에서 드래그 해줌으로 그 그라데이션의 색의 위치를 옮길 수 있다.

우리는 원본 참고 이미지를 따라 다음과 같이 설정해 줄 것이다.

프리셋을 만들었으면 다음 칸에 적용시켜줘야할 것이다.

처음 검색창 라인의 다음 라인에 2번을 눌러 선택지를 하나 대충 만들어 주고, 1번을 눌러 프리셋을 연노랑으로 설정해보자.

이렇게 설정이 끝나면 아래 사진처럼 연노랑 프리셋이 적용된 모습을 볼 수 있다.

여기서 이제 글자를 넣어줘야하니 새로 만든 선택지를 눌러준다.

디자인 1강에서 미리 선택지 디폴트 값을 투명으로 맞춰주었기 때문에 추가적인 설정을 할 필요없이 글자만 넣어줘도 된다.

선택지 내부로 들어오면 다음과 같은 모습이 보일 것이다.

이렇게 글씨를 입력해 준 후 위의 수많은 버튼을 통해 해당 글씨를 작성해 줄 것이다.

여기서 글씨에서 특이한 문자들은 CYOAP 내부 기능이 아니라 기본적인 특수문자들이니 인터넷에서 검색해서 집어넣어 주자.

https://snskeyboard.com/specialfont/

나는 해당 사이트에서 특수문자를 복사하여 이용하였다.

이제 위 버튼들을 설명하자면

1. 글자의 크기를 설정한다.

2. 글자의 굵기를 굵게한다.

3. 글자를 기울인다.

4. 글자에 밑 줄을 친다.

5. 글자에 취소선을 넣는다.

6. 글자의 서식(위의 글자를 꾸미는 것들의 총칭)을 제거한다.

7. 글자를 중앙 정렬로 바꾼다.

8. 글자의 색을 설정한다.

사진 원본과 비슷하게 다음과 같이 꾸미면

야장났다 코기

선택지 사이즈를 수정해주면 고쳐지니 크기를 바꿔주자.

플레이 화면을 테스트해보면 너무 글자가 왼쪽으로 치우쳐져있다.

여기서 CYOAP 제작의 비기, 투명 선택지를 쓰게되는데

우리는 기본 프리셋이 투명이니 대충 선택지를 하나 만들어준다.

그러고 글자가 있는 선택지 위에 생기는 음영으로 드래그 해주면

짜잔, 투명 선택지가 앞으로 이동하면서 글자 선택지가 중앙으로 옮겨진다.

플레이 화면을 테스트해보면 다음과 같이 원하던 모습으로 바뀌는 것을 확인 할 수 있다.

투명 선택지의 크기를 수정하여 원하는 선택지가 어디쯤에 위치할지 세부 조정도 가능하니 잘 응용해보자.

자 이걸로 디자인 강좌는 마치고 코딩 강좌로 만나뵙겠습니다. 

디자인을 완성하고 가져오죠.

우선 CYOA의 아주 기본 중의 기본인 변수, 그러니까 포인트를 만들어보자

왼쪽 메뉴의 프로젝트 설정, 톱니바퀴 아이콘을 눌러 들어간다.

그럼 다음과 같은 모습이 나오는데 '+'버튼을 눌러 변수를 추가해주자

변수가 추가되었다면 빨간 칸 내부처럼 새로운 변수가 나타난다.

그걸 선택해주면 파란색으로 해당 변수칸이 변하며 오른쪽에 해당 변수의 상세 설명이 나온다.

1번은 플레이를 할 때 해당 변수가 표기 될지 아니면 보이지 않게할지 설정하는 토글로 당연히 포인트는 보여야하므로 켜준다.
2번은 코딩을 할 때 사용되는 변수의 이름으로 실제 표기되는 이름이 아니니 자신이 알아보기 쉬운 이름을 입력해주자.
3번은 게임을 시작할 때 변수의 초기 수치를 입력하는 곳으로 우선 난 7000을 임의로 입력해주었다.

4번은 게임에서 실제로 표기되는 변수의 이름으로 원하는 이름을 입력해주자.

포인트를 만들었으니 간단한 선택지 기능을 추가해볼 예정이다.

보이는 작은 선택지들을 눌렀을 때 그 선택지에 대한 상세 내용이 적힌 라인이 보이도록 할 예정이다.

하나의 라인을 하나의 선택지를 설명해주는 상세 설명으로 채워서 만들어주었다.

그러니까 구조가

선택지 선택 -> 안보이던 라인이 보이게 됨 

이렇게 되는 것이다.

그러려면 일단 상세 설명이 적힌 라인이 기본적으로 선택지가 눌렸을 때만 한정하여 보이게 하는 기술이 필요하다.

 빨간 네모칸은 선택지의 이름인데 우리가 특정 라인이 특정 선택지가 눌렸을 때만 보이게 하기 위한 조건을 입력하기 위해서는 해당 이름이 중요하다. 나는 선택지 내용을 고려하여 '최저가해택'이라고 간단하게 지어주었다.

 주의할 점은 코드를 입력할 때는 이름에 띄어쓰기를 입력하였다고 하더라도 무조건 띄어쓰기는 무시한 체로 이어서 써야한다는 것이다. 만약, 당신이 선택지 이름을 '나는 쵸붕이가 너무 싫어' 라고 입력했다면 코드를 입력할 때는 '나는쵸붕이가너무싫어'라고 입력해줘야한다는 것이다.

 눌렀을 때 라인을 보이게 할 선택지의 이름을 확인했으니 라인의 설정으로 들어가기 위해서 위 사진의 톱니바퀴 부분을 눌러준다.

누르면 다음과 같은 화면이 나오는데 저기서 [보이는 조건] 을 주의깊게 봐준다.

해당 부분에 특정 선택지의 이름을 집어넣으면 특정 선택지가 true일때 보이게되고 false일때는 보이지 않게 되는 것이다.

간단하게 말하자면 특정 선택지가 '눌렸을 때(true)' 보이게되고 '눌리지 않았을 때(false)'보이지 않게 되는 것이다.

아까 알아낸 이름을 입력해주면 정상적으로 우리가 계획한대로 나올것이다.

다음으로 실제 포인트, 변수의 변동을 알아볼 것이다.

저기 장바구니의 담기 버튼을 눌렀을 때 해당 선택지의 설정대로 2000포인트가 감소하게 할 계획이다.

더블 클릭해서 선택지로 들어가보자.

위 메뉴의 코드로 들어가보자.

코드로 들어가면 다음과 같은 화면이 반겨주는데 

1번~2번은 해당 cyoa에 있는 변수들을 나열해 나타내주는 곳으로 선택지 이름, 실제 만들어진 포인트를 보여준다.

3번은 해당 선택지를 누르기 위한 조건을 적는 곳으로 아까 라인을 보이기 위한 조건을 입력했던 것과 비슷한 느낌으로 진행된다.

4번은 라인에서 해보았던 조건과 동일하다.

5번에서는 실질적으로 선택지가 눌렸을 때 작동하는 코드를 입력하는 곳으로 본격적인 코드 싸움의 전장이라고 생각하면 된다.

우리의 목표는 선택지가 눌렸을 경우 2000포인트가 사용되게 하는 것이므로 다음과 같이 적어준다.

'//'가 입력된 줄의 경우 내가 추가적으로 주석을 달아둔 것이므로 실제 작동하지 않으니 무시하고 넘어가도된다.

이제 실제 플레이 화면으로 가보면 처음에 초기 포인트의 양으로 7000을 입력한 것이 그대로 적용된 모습을 볼 수 있다.

이제 저기 장바구니에 담기 버튼을 눌렀더니 7000에서 5000으로 그러니까, 2000만큼 감소한 모습을 확인할 수 있다.