핫딜 사이트에 넣을 흑백 6컷 만화, 어떤 화풍이 좋을까?

먼저, 6컷에 담고 싶은 이야기

처음 생각한 장면은 아래와 같다. 서비스 소개를 길게 쓰는 대신, 요청부터 결과 확인까지를 짧은 만화로 보여주고 싶었다.

중요한 건 GPT가 힘들게 일했다는 사실을 길게 설명하는 게 아니다. 사용자의 가벼운 행동과 GPT의 엄청난 노동량이 대비되어야 한다. 그러다 마지막에 둘의 온도 차이가 조용히 터지는 식이다.

사이트 디자인에서 가져갈 것

참고한 화면에는 여러 로고가 흰색 사각형 카드 안에 하나씩 배치되어 있었다. 장식적인 배경이 없고, 테두리는 얇고, 카드 간격도 일정했다. 로고 주변의 빈 공간이 오히려 디자인의 중요한 부분이었다.

이 레퍼런스는 만화가 아니라 로고 카드형 UI다. 그래도 만화의 외형을 결정하는 데는 도움이 된다.

• 흰 배경과 검은 선을 기본으로 쓴다.
• 컷마다 일정한 두께의 사각형 테두리를 넣는다.
• 그림을 모서리 끝까지 채우지 않고 넉넉한 여백을 남긴다.
• 캐릭터와 소품을 복잡하게 묘사하지 않는다.
• 선 굵기, 말풍선, 컷 사이 간격을 통일한다.

다만 로고 카드처럼 모든 그림을 정중앙에 가만히 놓는 것은 피하려고 한다. 만화에서는 고개를 돌리는 방향, 손가락이 움직이는 위치, 말풍선이 놓이는 곳이 시간의 흐름을 만든다. UI의 정돈된 규칙은 가져오되, 만화의 연출까지 정적으로 만들 필요는 없다.

비교해본 다섯 가지 만화 스타일

1. 유럽식 클린 라인: 그림의 뼈대로 가장 적합

클린 라인(Ligne Claire)은 윤곽선을 비교적 일정한 굵기로 그리고 명암과 해칭을 절제하는 표현 방식이다. 틴틴 공식 자료의 클린 라인 설명에서도 규칙적인 검은 윤곽선과 단색 면을 특징으로 다룬다.

내가 참고하고 싶은 건 기존 캐릭터를 그대로 따라 그리는 방식이 아니다. 선이 분명하고 불필요한 질감이 없어서 한눈에 읽히는 원리다. 검은 테두리와 흰 배경으로 구성된 사이트에는 이쪽이 가장 자연스럽게 어울린다.

2. 미니멀 신문 만화: 컷 사이의 리듬 참고

신문 만화는 크지 않은 지면에 짧은 이야기를 전달해야 하므로 장면을 고르고 시간을 압축하는 방식이 중요하다.

대표적인 참고 사례인 《피너츠》를 보면, 찰스 M. 슐츠 박물관에서도 일정한 컷 간격이 독자의 읽는 속도와 농담의 타이밍을 조절한다고 설명한다. 이 작품의 캐릭터를 닮게 만들겠다는 뜻이 아니라, 여러 컷을 쌓아 마지막 한 컷에서 웃기는 구조를 참고하고 싶다.

3. 막대인간형 기술 유머: 편하지만 다소 가벼움

《xkcd》처럼 극도로 단순한 인물과 아이디어 중심의 대사로 웃기는 방법도 있다. 기술이나 AI를 소재로 하는 만화에 익숙한 문법이다.

다만 사이트에 오래 사용할 마스코트를 생각하면 막대인간은 조금 아쉽다. 표정과 몸짓을 최소화하는 건 좋지만, 머리와 몸통의 실루엣 정도는 있어야 주인님과 GPT를 멀리서도 구별할 수 있을 것 같다.

4. 무표정한 데드팬 만화: 이번 이야기의 핵심

데드팬 유머는 우스운 상황에서도 캐릭터가 크게 감정을 드러내지 않는 방식이다. 이번 6컷에는 이 성격이 특히 중요하다.

GPT가 불쌍한 표정을 짓거나 대놓고 화를 내면 마지막 속말의 재미가 줄어들 수 있다. 오히려 작은 일자 입으로 “탁월한 안목이십니다”라고 말할 때, 바로 다음의 “검색은 제가 했지만요”가 훨씬 건조하게 들린다.

5. 잡지식 한 컷 풍자만화: 전체 분위기 참고

여백, 단순한 인물, 짧은 대사, 상황 자체의 아이러니를 중시하는 편집 만화도 잘 맞는다. 다만 지나치게 거친 손그림 질감이나 불규칙한 선은 사이트의 카드형 UI와 충돌할 수 있다. 펜으로 그린 듯한 친근함은 남기되 선의 두께와 컷 테두리는 통제하는 쪽이 좋겠다.

결국 내가 고른 조합은 클린 라인 + 신문 만화의 컷 구성 + 데드팬 유머다.

캐릭터는 ’둥근 주인님’과 ‘네모난 GPT’

두 캐릭터는 색을 쓰지 않아도 구별되어야 한다.

주인님은 동글동글하고 편안한 형태로 만들고 싶다. 동그란 머리, 점 두 개의 눈, 짧은 입, 크게 힘이 들어가지 않은 팔과 다리 정도면 충분하다. 자세는 의자에 기대거나 스마트폰을 보며 쉬는 모습이 잘 맞는다.

GPT는 반대로 작고 네모난 AI 사무원처럼 표현하고 싶다. 사각형 얼굴, 점 두 개의 눈, 일자 입. 책상 앞에 반듯하게 앉아서 상품을 분류하는 모습이다. 여기에 작은 넥타이나 사원증 같은 소품을 하나만 붙여도 성실한 직원 같은 인상이 생길 수 있다.

여기서 강조하고 싶은 건 주인님을 게으르다고 조롱하거나 GPT를 불쌍하게 만드는 게 아니다. 서비스가 대신 처리해주는 일이 많다는 사실을 캐릭터의 자세만으로 보여주는 것이다.

그리고 GPT는 2컷에서 상품이 쏟아질 때나, 3컷에서 필터링할 때나, 6컷에서 칭찬할 때나 거의 같은 표정을 유지했으면 한다. 감정 표현의 대부분을 얼굴이 아니라 상황과 소품에 맡기는 것이다.

여섯 컷의 카메라와 연출

같은 대사라도 화면 구도에 따라 완전히 다르게 느껴진다. 내가 생각한 연출은 다음과 같다.

여섯 장면의 구성과 시각적 리듬을 검토하기 위해 만든 콘셉트 이미지. 최종 삽입용 만화나 실제 서비스 UI의 캡처는 아니다. 대사는 위 표를 기준으로 별도 검수할 생각이다.

2컷은 가장 복잡하게

수많은 상품이 GPT에게 밀려오는 장면에서 실제로 100개를 그릴 필요는 없다. 티셔츠, 신발, 노트북 같은 상품을 나타내는 작은 카드 몇 장과 가격표를 서로 겹쳐 놓으면 된다.

여섯 컷 중 가장 많은 선과 물건을 사용하는 장면으로 만들고 싶다. 이렇게 해야 4컷의 정리된 목록이 더 시원하게 느껴진다.

4컷은 가장 깔끔하게

2컷에서 흩어져 있던 카드가 같은 너비, 같은 간격의 목록으로 바뀐다. 여기서 시각적 만족감이 나와야 한다.

목록 전체 100개를 빽빽하게 적는 대신, 100이라는 숫자를 명확히 보여주고 몇 줄의 정돈된 상품 카드만 그리는 편이 낫겠다. 이 컷은 개그 중간에 서비스의 장점까지 설명해준다.

6컷은 가장 비어 있게

마지막에는 반대로 모든 장식을 걷어낸다. GPT 얼굴만 크게 남겨두고, 배경은 거의 흰색으로 비운다.

GPT: “탁월한 안목이십니다.”

(아주 작은 속말) “검색은 제가 했지만요.”

눈썹을 치켜올리거나 억울하게 울지 않아도 된다. 무표정이 가장 큰 표정이 되는 장면이다.

흑백 그래픽 규칙은 이렇게 잡았다

사이트 UI와 어울리려면 만화도 독립적인 디자인 시스템이 필요하다. 아래 수치는 완성 규격이라기보다 실제 시안에서 출발할 기준이다.

흑백 만화라고 해서 검은색을 많이 채울 필요는 없다. 검은 면적이 많아지면 작은 카드형 UI 속에서 오히려 무거워 보일 수 있다. 얇은 검은 선이 그림을 정의하고, 흰색이 화면의 대부분을 차지하도록 두는 편이 좋겠다.

Nielsen Norman Group의 미니멀 디자인 원칙에서도 핵심은 무조건 비우는 것이 아니라 불필요한 요소가 중요한 정보의 가시성을 해치지 않도록 하는 데 있다. 만화에도 같은 기준을 적용할 생각이다.

데스크톱과 모바일의 컷 배치는 달라야 한다

처음에는 로고 카드처럼 6컷을 가로 한 줄에 늘어놓는 방식을 떠올렸다. 하지만 일반적인 게시글 너비에서는 한 컷이 너무 작아지고, 말풍선도 읽기 어려워질 것 같다.

내가 생각한 기본 배치는 데스크톱 3열 × 2행, 모바일 1열 × 6행이다.

데스크톱에서는 왼쪽에서 오른쪽으로 세 장을 읽고 아래로 내려간다. 모바일에서는 각각의 컷을 충분히 크게 보여주면서 세로로 이어지게 한다. 특히 마지막 6컷 앞에는 다른 컷보다 약간 긴 간격을 두어 농담의 타이밍을 조절해볼 만하다.

WEBTOON CANVAS의 제작 안내도 모바일에서 글자 크기와 컷 사이 여백이 읽는 경험에 직접 영향을 준다는 점을 설명한다. 물론 웹툰과 사이트 소개용 6컷 만화의 사용 환경은 다르므로 숫자를 그대로 복제하기보다 실제 휴대폰에서 확대하지 않고 읽히는가를 기준으로 잡겠다.

이미지 속 글자와 웹 텍스트는 분리할까?

작화 원본을 만들 때는 말풍선까지 그림에 포함하는 것이 편할 수 있다. 하지만 웹사이트에 반복해서 사용하려면 컷 그림과 대사 텍스트를 분리하는 방식도 검토해볼 만하다. HTML/CSS로 대사를 처리하면 모바일에서 글자 크기를 바꾸거나 표현을 수정하기 쉽다.

W3C의 이미지 속 텍스트 안내 역시 가능한 경우 이미지에 박힌 문자보다 실제 웹 텍스트를 사용하는 편이 좋다고 설명한다. 최종 화면의 구성 방식에 따라 SVG와 HTML 텍스트를 함께 쓰는 방법도 고려하고 있다.

다만 이 부분은 어디까지나 향후 만화 구현을 위한 디자인 구상이다. 지금 그린 콘셉트 이미지가 이미 반응형 만화 컴포넌트로 구현되었다는 뜻은 아니다.

예쁘기만 한 만화여서는 안 된다

6컷은 사이트의 개성을 보여주는 장식이기도 하지만, 동시에 방문자가 서비스를 이해하도록 돕는 설명이다.

요청 → 수집 → 비교 → 정리 → 발견 → 만족.

이 흐름만 봐도 무슨 사이트인지 어느 정도 감이 와야 한다. 단, 그림 속 표현과 실제 기능은 일치해야 한다. 예를 들어 사이트가 가격 이력까지 검증하지 않는다면 그런 기능을 하는 것처럼 그리면 안 된다. 언제나 정확히 100개를 제공하는 구조가 아니라면 숫자도 적절히 조절할 필요가 있다.

또 만화를 너무 크게 넣어 정작 핫딜 목록이 아래로 밀려나는 상황도 피해야 한다. 방문자가 사이트에 들어온 이유는 결국 상품을 찾기 위해서다. 만화는 핫딜을 찾는 방식을 짧고 재미있게 소개하는 역할에 집중하는 편이 맞겠다.

최종적으로 고른 방향

한참 비교해보니 선택은 제법 분명해졌다.

그림체는 반듯한 흑백 선화, 캐릭터는 둥근 주인님과 네모난 GPT, 연기는 무표정한 직장인식 블랙 코미디. 그리고 사이트의 얇은 테두리와 여백 규칙을 여섯 컷에 그대로 적용한다.

완성도를 판단할 기준도 세 가지로 정했다.

1. 대사를 읽지 않아도 수집, 검증, 정리의 흐름이 대강 이해되는가?
2. 모바일에서 확대하지 않고 말풍선을 읽을 수 있는가?
3. 마지막 GPT의 무표정이 오히려 더 웃긴가?

세 가지가 충족되면 그림을 무리하게 화려하게 만들 필요가 없다.

내가 원하는 건 단순히 ’잘 그린 웹툰’이 아니다. 버튼 한 번 누른 주인님 뒤에서 묵묵히 일을 끝내놓고, 마지막까지 공손하게 칭찬하는 작은 GPT가 이 핫딜 사이트의 얼굴이 되었으면 한다. 그런 캐릭터라면 나중에 상품 검색, 가격 비교, 추천 목록 같은 다른 페이지에도 자연스럽게 등장시킬 수 있을 것 같다.

이미지가 복잡하지 않아서 기억에 남는 만화. 이번에는 그 방향으로 가보려고 한다.