[태그:] 웹툰 회차 구성

작성자: 컴맹 집사

대표 이미지: 회차를 목록으로 정리한 웹툰 화면 (출처: 왕립 개집사협회 앱 2026년 9월 19일 버전 화면, 직접 캡처)

첫 화를 올리고 두 번째, 세 번째 이야기를 만들었다. 2화는 《폐하의 산책 명령》, 3화는 《왕실 목욕 대작전》. 산책을 나가자는 폐하에게 끌려다니는 지우, 목욕을 단호히 거부하는 두부의 이야기다. 3화에는 옆집 강아지 복실이와 그 집사도 새로 등장한다.

2화를 앱에 넣으려다 멈췄다. 1화 아래에 이어 붙이면 되나? 그럼 4화, 5화는? 10화쯤 되면 한 화면이 끝없이 길어질 텐데? 웹툰을 연재하려면 회차를 나누는 구조가 필요했다.

평소 보던 웹툰 앱은 어떻게 되어 있지?

AI에게 묻기 전에 평소 보던 웹툰 앱을 떠올려 봤다.

• 작품 첫 화면: 회차 목록이 쭉 있다. 썸네일과 제목이 보인다.
• 회차 화면: 한 화의 그림이 세로로 이어진다.
• 회차 끝: “이전 화”, “목록”, “다음 화” 버튼이 있다.
• 읽은 표시: 이미 본 회차는 표시가 된다.

이 구조를 그대로 따라 하기로 했다. 익숙한 구조는 사용자가 설명 없이도 쓸 수 있다.

회차를 목록으로 관리하기

질문 7개를 목록(배열)으로 관리했던 것처럼, 웹툰 회차도 목록으로 모았다. 한 회차마다 번호, 제목, 썸네일, 그림이 있는 폴더, 컷 수를 적는다. 컷마다 들어갈 대사는 따로 모아 둔다.

이렇게 해 두니 새 회차를 올리는 일이 간단해졌다.

1. 그림 파일을 회차 폴더(webtoon/ep02/ 같은)에 넣는다.
2. 목록에 한 덩어리를 추가하고, 대사를 적는다.
3. 커밋하고 푸시한다.

회차 목록 화면, 이전·다음 버튼은 이 목록을 보고 자동으로 만들어진다. 코드를 건드리지 않고 목록만 늘리면 된다.

그림이 아직 준비되지 않은 회차를 위해 공개 여부 표시도 넣었다. 공개하지 않은 회차는 일반 사용자에게 보이지 않고, 주소 뒤에 미리 보기 표시를 붙였을 때만 나를 위해 보이게 했다. 그림을 다 넣고 확인한 뒤 “공개”로 바꾸기만 하면 된다.

홈에는 버튼 하나만

2화와 3화를 공개하고 나서 문제가 보였다. 첫 화면에 “웹툰 1화 보기” 버튼만 있어서, 2화와 3화로 들어가는 길을 찾기 어려웠다. 그렇다고 회차가 늘 때마다 첫 화면에 버튼을 추가할 수는 없었다.

그래서 첫 화면에는 “📖 웹툰 보기” 버튼 하나만 두고, 회차 고르기는 웹툰 안에서 하도록 바꿨다. 버튼을 누르면 회차 목록이 나오고, 각 회차는 썸네일, 번호, 제목, 컷 수와 대략 읽는 시간으로 보여 준다. 썸네일은 회차마다 전용 그림을 따로 만들어 붙였다.

각 회차 끝에는 버튼을 여러 개 두었다.

• 나도 왕실 집사 되기: 웹툰을 보고 나서 바로 진단으로
• 다음 화 / 이전 화
• 웹툰 목록
• 처음으로

시리즈로 한 번 더 나눴다

회차가 늘어나니 또 다른 고민이 생겼다. 앞으로 두부와 지우 말고도 다른 주인공의 이야기를 여러 개 올릴 계획이었다. 모든 회차를 한 줄로 늘어놓으면 100편이 되는 순간 100개가 한 화면에 쭉 나온다.

그래서 시리즈 목록 → 시리즈 상세 → 회차 보기 세 단계로 구조를 바꿨다. 첫 시리즈의 이름은 《두부 폐하와 수습집사》로 정했다. 이때 함께 넣은 기능은 다음과 같다.

• 이어 보기: 마지막으로 보던 회차로 바로 돌아가는 띠
• 봤어요 표시: 이미 본 회차에 작은 표시
• NEW 표시: 새 시리즈가 추가되고 2주 동안
• 다음·이전 화는 같은 시리즈 안에서만: 다른 시리즈로 튀지 않게
• 마지막 화에 다른 시리즈 추천

시리즈마다 대사 파일도 따로 나눴다. 시리즈를 열 때만 그 시리즈의 대사를 불러오니, 편수가 늘어도 첫 화면이 느려지지 않는다.

읽은 회차 기억하기

“어디까지 봤더라?”를 해결하는 데 LocalStorage가 다시 등장했다. 회차를 보면 그 회차 번호와 마지막으로 본 회차를 공책에 적어 둔다. 목록을 그릴 때 공책을 보고, 본 회차에는 “봤어요” 표시를 붙이고, 이어 보기 띠에는 마지막 회차를 보여 준다. (출처: MDN 웹 문서, Window.localStorage)

LocalStorage를 한 번 이해해 두니, 이런 기능은 AI에게 한 문장으로 요청할 수 있었다.

웹툰 회차를 보면 그 회차 번호를 LocalStorage에 저장해 줘.
목록에서 본 회차에는 "봤어요" 표시, 목록 위에는 마지막으로 본 회차 이어 보기.

연재하면서 정한 규칙

• 세계관은 이야기로: 폐하를 모시는 집사의 일상을 보여 주되, 톤은 “귀엽고 따뜻하게, 위트는 살짝”
• 회차마다 한 가지 사건: 산책, 목욕, 간식, 미용처럼 반려인이라면 누구나 겪는 일
• 마지막 컷 아래에 진단 입구: “나도 왕실 집사 되기”

마지막 규칙이 중요했다. 웹툰만 보러 온 사람이 진단으로 넘어오고, 진단을 한 사람이 웹툰으로 넘어온다. 앱 안에서 서로 이어지는 길을 만든 것이다. 이 블로그의 글들이 서로 링크로 이어지는 것과 같은 원리다.

---

이전 글: 그림 못 그려도 웹툰 연재? 앱 안에 만화 넣은 방법
다음 글: 앱에 미니게임 넣기, 화면이 움직이는 비밀(게임 루프) 쉽게 풀기