AI 비서 앱의 답변을 읽기 쉽게: 글 위계, 복사 버튼, AAA 색 대비

오픈소스 맥 비서 앱 시사(shisa-agent)를 개인 버전으로 가져와 고쳐 쓰고 있다. 개발자가 아니라서 코드는 Claude Code에게 맡기고, 무엇이 불편한지 정하고 결과를 확인하는 역할을 했다. 오늘은 채팅 답변 화면을 집중해서 다듬었다.

문제: 답변이 다 비슷해 보인다

시사에게 무언가를 물어보면 표, 번호 목록, 「팁·참고·중요」 콜아웃, 터미널 명령어가 담긴 코드 블록이 섞인 긴 답이 온다. 그런데 써 보니 세 가지가 걸렸다.

1. 글자 크기가 다 비슷하다. 제목(16px)과 본문(13px)의 차이가 작아서, 어디서 새 이야기가 시작되는지 눈에 잘 들어오지 않았다.
2. 「1. ○○ 설치하기」 같은 소제목이 본문과 똑같다. AI가 소제목을 굵은 글씨 한 줄로 쓰는 경우가 많은데, 크기가 같아서 단계가 구분되지 않았다.
3. 터미널 명령어를 복사하기 번거롭다. 긴 명령어를 마우스로 끝까지 드래그해야 했다.

결정 1: 타입 스케일의 단계 차이를 키운다

제목 단계마다 크기 차이를 2~3px씩 더 둬서 위계가 한눈에 구분되게 했다.

단계	전	후
큰 제목 (h1)	16px	20px
중간 제목 (h2)	15px	17px
작은 제목 (h3)	14px	15px
본문	13px	13px

여백도 4px 그리드에 맞췄다. 문단 사이 12px, 표·콜아웃·코드 블록 같은 블록 요소 앞뒤 16px, 제목 위 24px / 아래 8px이다. 제목은 위를 넓게, 아래를 좁게 둬서 근접성 원칙에 따라 다음 내용과 한 그룹으로 보이게 했다.

결정 2: 굵은 한 줄은 소제목으로 읽는다

AI 답변에서 **1. Homebrew 설치하기**처럼 굵은 글씨만 있는 짧은 줄이 나오면, 그 줄을 소제목으로 보고 15px로 키우도록 규칙을 만들었다. 다만 「굵은 문장이에요.」처럼 마침표로 끝나는 문장이나, 문장 중간의 굵은 글씨는 그대로 둔다. 강조와 제목을 헷갈리지 않게 하기 위해서다.

「팁·참고·중요」 콜아웃의 소제목도 12px에서 15px로 키웠다. 콜아웃의 둥근 모서리(border-radius)는 없앴다. 왼쪽 색 보더와 옅은 배경색만으로도 충분히 구분되고, 둥근 모서리에 배경색까지 더해지니 장식이 과해 보였기 때문이다.

결정 3: 코드 블록에 「복사」 버튼

코드 블록 오른쪽 위에 항상 보이는 「복사」 버튼을 달았다. 호버해야 나타나는 방식도 있지만 이 앱을 쓰는 사람도 개발이 낯설 수 있다고 생각했다. 그래서 찾을 필요가 없게 늘 보이도록 했다. 누르면 「복사됨」으로 1.5초 동안 바뀌어서 눌렸다는 걸 알 수 있다.

결정 4: 색 대비는 AAA를 목표로

이왕 손대는 김에 앱 전체 색을 WCAG 대비 기준으로 점검했다. 텍스트와 배경의 밝기 차이를 숫자로 재는 기준인데 AA는 4.5:1, 더 엄격한 AAA는 7:1 이상이다.

• 밝은·어두운 테마의 주요 텍스트·배경 조합 83개를 계산했다. 75개는 AAA, 나머지 8개는 AA다.
• AA로 남긴 8개는 일부러 남겼다. 모두 가장 흐린 보조 텍스트(시각, 경로 같은 정보)다. 이것까지 AAA로 올리면 보조 텍스트와 일반 회색 텍스트의 차이가 사라져서 위계가 무너진다. 접근성과 위계 사이에서 고른 절충이다.
• 어두운 테마에서는 액센트 색 버튼의 레이블을 흰색에서 검정으로 바꿨다. 밝은 보라 배경 위의 흰 텍스트는 대비가 3:1 정도밖에 안 나왔다.
• 「팁·참고·중요」 콜아웃의 배경색 농도를 10%에서 6%로 낮췄다. 그래야 색이 들어간 소제목이 7:1을 넘었다.

배운 점

• 위계는 크기 차이로 만든다. 굵기만 다르고 크기가 비슷하면 눈이 단계를 따라가지 못한다.
• AI가 쓰는 글의 습관을 디자인에 반영할 수 있다. 굵은 한 줄을 소제목으로 읽는 규칙 하나로, 모든 답변의 구조가 또렷해졌다.
• 접근성 기준은 무조건 최대치가 답이 아니다. 숫자를 확인한 뒤 위계를 지키기 위해 의도적으로 남기는 곳도 있다. 그 이유를 설명할 수 있으면 된다.