블로그를 다시 운영하면서 트리클로 본문에 넣을 인포그래픽을 직접 만들고 있어요. 작업 순서나 점검 항목을 설명할 때, 실제 회사 자료와 포트폴리오 화면을 공개하지 않고도 내용을 전달할 수 있었습니다.
하지만 처음 만든 이미지를 그대로 사용하기는 어려웠어요. 하단 여백이 부족하거나 문구가 추상적이었고, 단계별 카드가 어디로 이어지는지 불분명한 경우도 있었습니다.
이 글에서는 실제로 수정한 다섯 가지인 하단 여백, 제목 아래 설명, 구체적인 문구, 단계 배치, 본문에서의 글자 크기를 정리합니다. 마지막에는 같은 문제를 점검할 수 있는 확인 순서도 담았습니다.
1. 하단 여백을 따로 지정했어요
처음 만든 이미지 중에는 마지막 카드나 설명 문구가 화면 아래쪽에 너무 가깝게 배치된 경우가 있었어요.
내용이 잘린 것은 아니었지만 하단 여백이 거의 없어서 이미지 전체가 답답해 보였습니다. 블로그 본문에 삽입하면 이미지가 화면 끝에서 끊긴 것처럼 느껴지기도 했어요.
처음 요청할 때는 단순히 ‘여백을 넉넉하게 해달라’고 작성했습니다. 하지만 이 표현만으로는 제가 원하는 정도가 정확하게 전달되지 않았어요.
이후에는 다음처럼 수정 조건을 구체적으로 정했습니다.
- 상하좌우에 일정한 안전 여백 확보
- 마지막 요소 아래에 최소 70px의 여백 유지
- 하단 배너가 화면 끝에 붙지 않도록 위로 이동
- 모든 내용이 한 화면에 들어오도록 구성
- 스크롤이 생기지 않도록 높이 조정
여백을 숫자로 지정하니 수정할 기준이 훨씬 분명해졌어요.
여기서 70px은 당시 제작한 이미지에 적용한 수정 요청값입니다. 모든 인포그래픽에 동일하게 적용하는 기준은 아니에요. 이미지 크기와 글자 크기가 달라지면 필요한 여백도 다시 확인해야 합니다.
‘스크롤이 생기지 않도록’이라는 조건도 트리클 제작 화면에서 전체 구성을 한 번에 확인하기 위한 요청이었습니다. 블로그 게시용 이미지에서는 내용이 잘리지 않고, 본문에 삽입했을 때 글자가 읽히는지를 함께 확인해야 해요.
2. 제목 아래에 설명을 추가했어요
제목만 크게 넣으면 이미지의 주제는 알 수 있지만, 어떤 관점에서 봐야 하는지는 바로 이해하기 어려웠어요.
예를 들어 ‘포트폴리오 문구 최종 검수 체크리스트’라는 제목만 있을 때보다 다음과 같은 설명이 함께 있을 때 이미지의 목적이 더 분명했습니다.
AI가 다듬은 문장도 마지막 확인은 직접 해야 해요.
제목은 이미지가 무엇에 관한 것인지 알려주고, 그 아래 설명은 왜 확인해야 하는지를 전달하는 역할을 했어요.
지금은 인포그래픽을 만들 때 다음 순서로 문구를 구성하고 있습니다.
- 이미지의 주제를 보여주는 제목
- 내용을 이해할 수 있는 한 줄 설명
- 세부 항목
- 마지막에 기억할 핵심 문구
본문을 읽지 않고 이미지만 보더라도 어떤 내용을 전달하려는지 알 수 있도록 구성하려고 해요.
3. 추상적인 단어를 구체적인 설명으로 바꿨어요
처음 만든 이미지에는 ‘반복되는 결론’, ‘보고서식 말투’, ‘추상어 남용’과 같은 표현이 들어갔습니다.
문제의 유형을 짧게 보여주기에는 좋았지만, 해당 표현이 왜 문제인지까지 바로 이해하기는 어려웠어요.
그래서 제목 아래에 구체적인 예시나 설명을 추가했습니다.
- 반복되는 결론
프로젝트가 달라도 비슷한 결론이 반복됨 - 보고서식 말투
실제로 설명할 때 사용하지 않는 딱딱한 문장 - 추상어 남용
구체적인 근거 없이 그럴듯한 단어가 반복됨 - 행동이 안 보임
결과는 있지만 무엇을 했는지 알기 어려움
카드의 제목은 짧게 유지하되, 아래 설명에서는 실제로 어떤 문제가 있는지 알 수 있도록 바꿨어요.
인포그래픽은 문장을 많이 넣는 것이 목적은 아니지만, 단어만 보고 의미를 추측해야 하는 상태도 피하는 것이 좋았습니다.
4. 작업 순서가 이어져 보이도록 배치를 바꿨어요
포트폴리오 수정 순서를 설명하는 이미지에는 다섯 단계가 들어갔어요.
처음에는 상단에 세 개, 하단에 두 개의 카드를 배치했습니다. 각 카드에는 번호가 있었지만 03에서 04로 어떻게 이어지는지 화살표가 없었고, 오른쪽 아래에는 빈 공간이 남았습니다.
내용 자체는 모두 들어 있었지만 작업 순서를 설명하는 이미지로는 흐름이 바로 보이지 않았어요.
수정할 때는 다섯 개의 카드를 한 줄로 배치하고 각 카드 사이에 화살표를 넣었습니다.
구성 확인 → 디자인 수정 → 문구 수정 → 모바일 확인 → 최종 검수
이 작업에서는 다섯 단계를 한 줄로 연결하니 03 다음에 04를 읽어야 한다는 점이 더 분명해졌어요. 다만 카드의 폭이 줄어드는 만큼 설명 문구의 길이와 글자 크기는 함께 확인해야 했습니다.
다섯 단계를 반드시 가로 한 줄로 배치해야 하는 것은 아니에요. 블로그 본문이나 모바일 화면에서 글자가 작아진다면 세로 배치로 바꾸거나 이미지를 나누는 방법도 고려할 수 있습니다. 두 줄 배치를 유지하더라도 다음 줄의 시작점으로 연결되는 표시를 넣으면 흐름을 보완할 수 있어요.
중요한 것은 카드의 배치 모양보다 읽는 순서가 분명하고, 실제 게시 크기에서도 설명을 읽을 수 있는지였습니다.
5. 실제 블로그 크기에서 글자를 확인했어요
인포그래픽을 크게 띄워서 볼 때는 작은 설명도 잘 읽혔어요. 하지만 티스토리 본문에 삽입하면 이미지가 글 영역의 너비에 맞춰 줄어듭니다.
원본 이미지에서는 충분히 커 보였던 글자도 블로그 본문에서는 작게 느껴질 수 있었어요.
그래서 최종 이미지는 제작 화면에서만 확인하지 않고 블로그 본문에 들어가는 크기를 기준으로 봤습니다.
- 제목이 본문에서도 바로 읽히는지
- 카드 제목과 설명의 크기 차이가 보이는지
- 한 카드에 문장이 너무 많이 들어가지 않았는지
- 설명이 세 줄 이상으로 길어지지 않는지
- 모바일 화면에서도 핵심 문구를 읽을 수 있는지
작은 글자가 많다면 이미지 크기를 키우는 것보다 카드 안의 문장을 줄이는 편이 더 효과적이었어요.
인포그래픽을 만들기 전에 정하는 항목
여러 번 수정한 뒤에는 제작 요청 전에 아래 내용을 먼저 정리하고 있습니다.
- 이미지의 목적
- 제목과 한 줄 설명
- 반드시 들어가야 하는 항목
- 항목이 비교인지 순서인지
- 카드의 개수와 배치
- 주요 색상
- 하단 핵심 문구
- 상하좌우 안전 여백
- 최종 이미지 비율
비교 이미지라면 왼쪽과 오른쪽 영역의 차이가 명확해야 하고, 순서 이미지라면 번호와 화살표가 필요해요. 체크리스트라면 각 항목을 빠르게 훑어볼 수 있도록 문장을 짧게 구성하는 편이 좋았습니다.
포트폴리오를 수정하면서 디자인 톤을 정하지 않아 여러 번 수정했던 경험은 트리클 포트폴리오 수정 후기에 정리해 두었어요.
블로그에 넣기 전 확인할 순서
앞에서 다룬 수정 경험을 바탕으로, 독자가 자신의 인포그래픽을 점검할 수 있는 순서를 정리했습니다.
| 순서 | 확인할 내용 | 문제가 있을 때 수정할 부분 |
| 1. 내용 | 제목·본문·이미지가 같은 내용을 설명하는지 | 본문과 다른 문구, 빠진 항목, 오탈자 수정 |
| 2. 흐름 | 시작점과 읽는 순서가 분명한지 | 카드 위치, 번호, 연결 표시 조정 |
| 3. 글자 | 실제 블로그 크기에서 설명이 읽히는지 | 문장 축약, 글자 크기 조정, 배치 변경 |
| 4. 여백 | 마지막 요소가 화면 끝에 붙거나 내용이 잘리는지 | 요소 위치와 이미지 높이 조정 |
| 5. 게시 | 파일명과 캡션이 이미지 내용을 설명하는지 | 내용을 구분할 수 있는 파일명과 캡션 작성 |
이미지를 확대해야만 설명이 읽힌다면 문구를 줄이거나 배치를 바꿔보세요. 여백을 늘리기 위해 글자를 지나치게 작게 만드는 것도 피해야 합니다. 한 부분을 수정한 뒤에는 전체 이미지와 모바일 화면을 다시 확인하는 것이 좋습니다.
본문과 이미지의 역할도 나눠두면 같은 설명이 반복되는 것을 줄일 수 있어요. 본문에서는 문제가 생긴 이유와 수정 판단을 설명하고, 이미지에서는 변경 전후 차이나 핵심 순서를 보여주는 방식입니다.
원하는 부분만 수정하도록 트리클에 요청한 방법은 아래 글에서 확인할 수 있습니다.
인포그래픽을 만들 때는 정보의 순서와 문구를 먼저 정리하고, 마지막에 실제 블로그 크기에서 확인하려고 해요. 제작 화면에서 보기 좋은 것만큼 독자가 별도로 확대하지 않아도 내용을 이해할 수 있는지가 중요했습니다.
