2. width Aspect는 1, Height Aspect는 1.2
CHANGE ASPECT 누르기
그리고 아무것도 건들지 말고 바로 CROP INAGE 누르기
3. ROW 이미지를 말하는 것이라면 그것은 당연한 것.
왜냐면 로우는 크기 자체가 초이스보다 크니까!
크로퍼로 자른 건 크기를 정한 게 아니라 비율로 자른 거라, 킹쩔 수 없음......
이럴 때는 Modify design -> MANAGE ROW IMAGE DESIGN ->
좌상단의 Width of the image inside of a choice를 낮추면 작아진다.
근데 사실 로우랑 초이스는 디자인상 구분해두는 게 이쁘긴 함.........템플레이트로 돌려둬도 되고.
4. 조건문 애드온 포인트쪽
선택하면 개방하고 싶은 선택지를 B, 선택해야 하는 선택지를 A라 가정해보자.
1. A 아이디를 정해. ID라 나와있는 부분에 님 넣고 싶은 태그 넣음 됨.
2. 딴거 하지 말고 B에 열쇠랑 밑에 + 되어있는 모양에 들어가.
3. 셀렉티드 초이스 조건문을 가져와.
4. A 아이디를 해당 조건문에 넣어.
5. 선택지를 골랐을 때 숨겨진 설명문이 개방되게 하는 방법
선택지에 고유 오브젝트 id를 부여 - 짤 예시 A 여기서 이것만 설정-다른 거 만지지 마
그리고 바로 아래에 행 추가해서 설명문 추가
해당 설명문에서 열쇠+ 표시 누르고 add selected choice requlrement 한 번만 클릭
그럼 Requirements가 추가되는데 그거 클릭 한 번 하고 해당 선택지 id(A) 조건 입력
완전투명 방법
1. 선택지 상단의 버튼 3개 중에서 2번째 톱날 모양 버튼 클릭
2. Use private design 클릭
3. Manage filter design 클릭
4. 좌측 상단의 Filter 체크
5. Filter on Choice that is missing its required의 Opacity를 0으로 만들기
ㄴ5번 대신 Hide the choice completely 켜면 됨
여담으로 한 선택지 안에서 내용이 바뀌는건 애드온을 이용한거임
1. 기본으로 드러나게 할 내용을 "A" 애드온에 넣고 선택지 1을 누르지 않았을 때 드러나도록 한다
2. 특정 선택을 눌러 전환될 내용을 "B" 애드온에 넣고 선택지 1을 눌렀을 때 드러나도록 한다
이렇게 하면 1을 누르지 않았을 때 A가, 누르면 B가 나오게 할 수 있음
6. 애드온에 관하여 기록 남김
제목에 '받아들인다를 고를 경우' 입력하고 내용에 '나는 도무지 지금 상황을~' 적으면 됨
조금 거추장스러우면 제목은 그냥 빈칸으로 놔둬도 무방하고 아무 조건도 없이
그렇게 하면 선택지 밑에 애드온 내용이 바로 붙어서 보이고, 조건을 넣으면 그 조건이 충족됐을때만 드러남
1. 선택지에 고유 id 설정
2. +말풍선 눌러서 애드온 설정 (제목 타이틀 굳이 안 적어도 됨)
3. 애드온 누르면 위에 나오는 열쇠+ 표시 눌러 그거 누르면 add 셀렉 초이스 이거 눌러 3번째에 있어
거기다가 해당 선택지의 id를 입력해 (예시-왼쪽 A, 오른쪽 B)
4. 그럼 애드온 설명문 안 보이고 투명이야
그럼 이제 눌러
조건 못맞춘 선택지가 아예 안뜨는 걸 원한다면 디자인 창 오른쪽에 Hide The Choice Completely를 눌러봐
7. https://icc-up-2.vercel.app/ <- 용량압축할 수 있는 사이트
(https://arca.live/b/cyoa/137030871?category=utility&p=1 <-원글)
난 기존에 네오시티를 로그인 할 때 이메일이 들어간 아이디를 사용했었는데,
ICC UP에서 동일하게 로그인되기에 그리 했었다.
하지만 알고 보니 네오시티는 로그인이 닉네임으로도 가능했고 유저 네임인 [ ]를 아이디에 입력하니
그동안 엑박 이미지로 압축되던 것들이 정상적으로 이미지 파일들이 보이기 시작했다.
즉, 유저 네임으로 로그인하면 되는 아주 간단하고 사소한 문제였던 것이다.
8. 2개의 선택지를 2row로 할 때 일러스트가 열화되고, 크기가 커지는 문제가 발생
이를 해결하기 위해서는
1. design (modifty design) 누르기
4번째 선택지인 초이스 이미지 디자인 누르기
3번째 칸에 있는 Width of the image inside of the row를 100%에서 50%로 줄이기
2. use private styling? 체크
3. 초이스 이미지 디자인 네모박스 체크 후 3번째 숫자 100에서 50으로 줄이기
특정 행이나 선택지에만 적용하고 싶으면 톱니바퀴 누르고 Use private styling? 체크하면 됨
8. 이번엔 애드온 다는 방법.
솔직히 애드온 다는 방법 몰랐는데 혼자서 만지작 거리다 보니까 하는 방법을 알게 된 것 같다.
1. 선택지의 + 말풍선 클릭
그러면 이게 addons, 즉 애드온이 열린다. 2. 여기서 열쇠+ 표시를 누른다
3. 여기서 add 셀렉 초이스 누른다.
4. 해당 선택지의 id를 입력한다.
그러면 선택지 선택 시 애드온이 열린다.
1. 세 번째 칸 초이스 디자인 클릭
2. 상단의 If this is checked then every choice in a row will have identical height. 클릭 (길이 맞추는 것)
3. Border is turned on 클릭
4. 입문 가이드 글을 보니 space between the choice는 선택지 사이의 공백의 크기의 숫자는 아마도 32/10을 추천하는 것 같다. 반영
(잘 모르겠으면 네모박스에 V체크하면 된다고 생각하라)
5. 선택지 체크박스를 네모에서 둥글게 말아주는 것. 10이 가장 적당한 듯 보인다.
6. 저 6자리 숫자입력하는 것이 보이는가? 거기서 지우고 수정가능하다.
https://colorhunt.co/
여기서 원하는 색상 고르기
그 경우는 물론 가능하지. 쵸붕이가 만진 건 글로벌 설정이라는 것인데, 쵸아 전체에 기본적으로 설정되는 것들이야.
새로 만든 행과 특별히 특정 설정을 켜두지 않은 모든 행은 이 설정을 따른다!
하지만 행에서 private setting이라는 옵션을 키면, 글로벌 설정에서 벗어나 이 행/또는 선택지만 따로 설정을 할 수 있다는 거시야.
보면 알겠지만 private setting은 선택지에서도 킬 수 있으니 그냥 행 안에서도 다른 선택지들은 다 글로벌 디자인을 따르지만,
특정 선택지만 원하는 디자인을 띄게 하는 것도 가능하지.
근데 하나 알아야 할 게, 이 private setting은 용량을 조금씩 머금.....
뭐 심하진 않아서 남발해도 되긴 하는데, 똑같은 다른 디자인을 여러번 만들어야 한다면 이거 하나하나 하기도 귀찮을 수 있잖아?
그럴 때를 위해 있는 게 design group임.....
여기서 디자인 묶음을 만들 수 있는데, 행 디자인 묶음, 선택지 디자인 묶음을 만들 수 있어.
이 묶음을 원하는 행/선택지에 적용하면 이 묶음에 설정해둔 디자인으로 새로 적용되지.
private setting의 묶음 버전이라고 이해하면 된다는 거시야.
그러니까 정리하자면, 기본적으로는 글로벌 설정을 만들어서 이 테마를 기준으로 쵸아를 만들다가,
연출이나 디자인 등 다른 이유로 새로운 디자인이 필요하다?
한두개 정도만 간단하게 바꿀 거라면 private setting을 쓰고,
일괄적으로 여러번 써야 하는 디자인이 필요하다면 design group을 만들고 원하는 디자인을 설정해서 적용시키면 편하다는 거시야.....
개인적으로 추천은 웬만해선 design group이 나음.
얘는 한 번 만들어두면 계속 쓸 수 있고, 적용과 해제도 편리함!
정확히는 톱니바퀴를 누르면 나오는 Use private styling? 이라는 토글을 키면 적용된다!
9. 선택지 필터 디자인 클릭
색칠한 부분 체크
색깔을 골라야 된다 (백그라운드 컬러, 오버레이 컬러, 츄즈 어 컬러)
매니지 백그라운드 디자인 선택
중앙부분의 선택된 부분 체크
내가 선택한 초이스 배경으로 하되 투명도는 30(0.3)으로 한다
10. 한 화면에 두 개의 행으로 나누는 방법
화면 절반 스크린 클릭 (하프 더 스크린, 대충 맨 아래꺼임)
use private styling 클릭
매니지 로우 이미지 디자인 클릭
로우 이미지 디자인 네모 박스 클릭 borde is on 클릭
90
80
행 상단 이미지 5
제목과 이미지 5
볼더 is on 체크
이렇게 하면 되는 것 같다
하지만 난 이미지 왼쪽, 오른쪽 텍스트 적고 싶은데 서로 ROW행 비율 안 맞아서 답답하다..
ize of the row: Width of the row top 10px Space at the right and left of the rows 10%
Space Between Rows 50px Padding of the text inside of row: Text Left and Right Padding 5px Text Top and Bottom Padding 20px
난 이렇게 쓰고있기는 한데 디자인에 문외한이라... 직접 만져보면서 감 익히는 게 가장 좋긴 해
11.
1. 애드온 이미지가 정렬이 안되서 지저분함
2. Addons -> Addon Justify: end 설정
3. 그럼 하단에 깔끔하게 배열됨!
이번엔 이미지를 깔끔하게 만들어보자
1. 이대로 똑같이 설정
5/50/10/5
나머지 기본 대표 선택지이나 2개짜리 선택지들은 기본적으로 저것대로 설정하면 된다
4개짜리 선택지들은 어떻게 하냐고?
5/100/0/5
[그리고 중요한 테두리 폰트 색깔
#6600FF 보좌관
#00E0E0 외신
#FAFAD2 일반
#00FFFF 포인트바
#FF99CC NSFW]
12. 선택지 바가 Row로 보이는 밋밋한 현상 해결을 위해 적용
1. 매니지 초이스 디자인 클릭
2. 다음과 같이 설정
#00FFFF (왼쪽)
#00000080 (오른쪽)
그럼 기존보다 밋밋한 맛이 확실히 줄어든다
12.이번엔 백팩을 만드는 연습을 해볼 것이다
매니지 백 그라운드 앤 초이스 임포트 클릭
1. 그룹 생성 후 row id 클릭 > 정신적 장점에 해당하는 row를 선택해주면 된다!
이후 백팩 편집창에 있는 Selected Choices from Group Id에다가
아까 만든 그룹을 넣어주면 끝 이러면 정신적 장점만 보여주는 ROW가 완성됨
정신적 단점이나 신체적 장단점같은경우 따로 그룹이랑 ROW를 파서 만들어주면 된대
2. 그 기능은 ICC 2.0 업데이트와 동시에 Global Settings로 이동된거시야
이름도 Enable the Save/Load Build Feature로 바뀌었는데 근데 굳이 신경 안써도 된다 왜냐면 이미 디폴트값이 켜져있는거거든
그니까 각 Row선택지를 (예를 들면 장점, 단점, 직업 등) 각 선택지 바만큼의 그룹을 생성하라는 거 맞지???!
애초에 백팩이란게 오른쪽 밑에 체크표시 누르면 뜨는 그 창을 말하는거시다... 그 화면 전체가 백팩이라고 할 수 있지.
백팩이 생성되었느냐를 물으면 아무것도 안한 순정 CYOA도 백팩 자체는 있다고 볼 수 있지만
이게 비현현마냥 체계적으로 정리되었느냐라고 물으면 그건 아니라고 말할수 있다는거시야
13. 착한 쵸붕이가 선택지를 비활성하는 방법에 대해 알려줬으니 까먹지 않도록 메모하자
예시를 들자면 만약 쵸붕이가 1이라는 선택지를 선택했어
그러면 2번의 선택지가 선택되지 않도록 비활성화하는 방법은
1번 선택지의 choice id를 복사해
그리고 2번 선택지를 열어봐 그러면 Functions이 보일건데
펑션 누르고 Other Choices에서 Deactivate Other Choices를 눌러
그러면 id 입력하는 칸이 열리거든? 거기다가 1번의 선택지 id를 입력하면 돼
그리고 해당 1번 선택지를 골랐을 때 2번 선택지가 아예 보이지 않게 하고 싶으면
Requirements는 열쇠에 + 붙은 버튼 누른 뒤에 ADD NON-SELECTED CHOICE REQUIREMENT 누르면
id 입력하는 칸이 나오거든? 거기다가 동일하게 1번 선택지의 id를 입력하면 끝이야!!!
14. 다음 선택지를 누르면 기존 선택지가 비활성화되는 방법에 대해 알아보자
쵸붕이가 알려준대로 나도 차근차근 따라가볼게
1. 열쇠 클릭
어드 낫 셀렉 초이스 클릭
이곳에다가 무조건 다음 선택지의 초이스 id를 입력
그러면 기존 선택지가 접힌 게 확인가능하다
15. 개별 선택지에서 톱니바퀴 누르고 manage choice design에서 i
f this is checked then every choice in a row will have identical height 토글 해제하면 깔끔하게 변한다
16. 제목을 지워버리면 테두리가 아예 사라지더라고..
제목을 붙여야 다시 테두리가 생기고
이 문제를 어떻게 해결해야 해..?
Icc 자체가 그렇게 설정되어 있음.. 제목에 한번 공백문자를 복사해서 넣어보세요
제목에 스페이스만 한번 쳐도 태두리 생김
17. Row에 not selected조건문 선택하면 기존 선택지 안 나온다고 해서 찾아봤거든?
오른쪽 위의 열쇠버튼 눌러봐
ADD NON-SELECTED CHOICE REQUIREMENT << 이것임... 이런 NON인데 NOT으로 설명해줬구나
좀더 직접적인건 non-selected인거심
여기는 choice-id를 집어넣으면 되는데,
쵸붕이가 대충 A 선택지를 눌렀을때 이 ROW가 안보이게 하고싶다고 하자.
그러면 이 A 선택지의 choice id를 복사해서 여기에 집어넣으면 되는것
18. 아 이전 선택지 안 보이게 하려면 어떻게 해??
기존 Row에 NOT SELECTED 조건을 걸어놓으면 됨 그러면 거기 넣어놓은 선택지를 누르는순간 자동으로 접혀들어갈거야
19. 지금 보면 조건문은 D나 E 중에 하나만 고르면 열리게끔 되어있어
하지만 내가 원하는 건
choice-c6j1 <- 이 선택지도 골라야 열리게끔 하고 싶다는 거야
즉 D+choice-c6j1 이거나 E+choice-c6j1 여야지만
조건문이 열리게 하고 싶은데
ㄴ ADD SELECTED CHOICE REQUIREMENT에서 choice-c6j1만 추가하면 될 듯? 그럼 조건이 D or E + choice-c6j1이니까
20. 에드온 선택지는 이미지 정렬 어떻게 해?
텍스트 줄이 끝나는 지점에서 사진 이미지가 고정되어버리는 것 같은데
이렇게 들쭉날쭉하면 보기에 별로 안 이뻐보여
ㅡㅡ ㅡㅡ ㅡㅡ
이거를
어떻게 애드온에 삽입한 이미지를 정렬할 수 있어??
ㄴAddons -> Addon Justify: end
21. 폰트 적용방법
폰트 파일 다운로드 해서 그 쵸아가 있는 파일에 집어넣은 다음에
CUSTOM CSS를 @font-face { font-family: 'Galmuri11-Condensed'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/Galmuri11-Condensed.woff2';;;) format('woff2'); font-weight: normal; font-style: normal; } 에서 @font-face { font-family: 'Galmuri11-Condensed'; src: url('Galmuri11-Condensed.woff2') format('woff2'); font-weight: normal; font-style: normal; }
처럼 url 앞부분 죄다 날려주면 됩니다.
근데 이러면 작업중 폰트 적용이 안되니까 쵸작 끝나고 하는걸 추천 물론 지금은 테스트용이니까 바로한번적용해봐
22. 선택지 디자인 색깔 바꾸는 법
그리고 1번 질문인 배경 박리는 필터가 아니라 background design이란다.
여기서 choice 배경을 색으로 하고, 대략 흰색-투명도 30 정도로 하면 꽤나 예쁘게 변할 것 겉은데......
뭐 눈 어림이니까 직접 조정하면 된다. 그리고 이건 올인원 인터 가이드에 나와 있으니까 그걸 참조해라.....
그리고 2번은 1번이랑 같은 말이니까 그냥 위의 두 가지만 보면 된다는 거시야
대략 이 정도만 백업해놓음..
이미지 쭉 긁어와서 복붙하려고 했는데
이미지 모두 여기다 넣으면 먹통되서
개별 다운로드밖에 답이 없는 것 같네..
가독성 어쩔 수 없다..
