앞면·뒷면이 안 나뉠 때 구분선 두껍게 만들기

결론부터 말하면, 구분선 두께를 3~5px로 올리고 색을 넣으면 내용이 긴 카드에서도 앞면과 뒷면이 한눈에 나뉩니다. Anki 기본 구분선은 1px짜리 옅은 회색이라 글이 몇 줄만 넘어가도 문단 사이에 묻혀 버립니다. 두께를 올리는 것만으로 "여기부터 답"이라는 신호가 분명해집니다.

왜 기본 구분선은 긴 카드에서 무력해지나

카드 뒷면은 보통 앞면 내용({{FrontSide}}) 아래에 답이 이어지는 구조입니다. 앞면이 한 줄짜리 단어 카드라면 1px 선으로도 충분합니다. 눈이 화면 전체를 한 번에 훑을 수 있으니까요.

문제는 서술형 카드입니다. 앞면에 두세 문장짜리 질문이 들어가고 뒷면에 설명이 몇 줄 붙으면, 화면에 문단이 여러 개 쌓입니다. 이때 1px 회색 선은 그냥 문단과 문단 사이의 여백처럼 보입니다. 결국 복습할 때마다 "어디까지가 질문이었지?" 하고 위로 되짚어 읽게 되고, 이 되짚기는 카드 한 장당 1~2초씩 쌓여 수백 장 복습에서 꽤 큰 피로가 됩니다.

두꺼운 선은 여백과 혼동될 수 없는 신호라는 점이 핵심입니다. 색까지 들어가면 카드를 넘긴 직후 눈이 자동으로 선 아래부터 읽기 시작합니다.

두께는 몇 px이 적당할까

카드 내용의 길이에 맞춰 정하면 됩니다. 실제로 써 보면 아래 정도가 무난합니다.

• 1~2px — 단어·용어 카드처럼 앞뒤가 각각 한 줄인 경우. 기본값에 가깝고 조용합니다.
• 3px — 앞면이나 뒷면이 두세 줄인 대부분의 카드. 가장 무난한 기본값입니다.
• 4~6px — 앞면에 지문이 있거나 뒷면에 해설이 붙는 서술형 카드. 문단이 여러 개일 때 확실히 갈라 줍니다.
• 7px 이상 — 선이라기보다 색 띠에 가까워집니다. 카드를 넘길 때마다 시선을 뺏길 수 있어 권하지 않습니다.

두께를 올릴수록 선이 무거워지므로, 줄 폭을 60~80%로 함께 줄이는 조합이 보기 좋습니다. 굵지만 화면을 가로지르지 않아서 답답하지 않습니다.

ankieditor에서 설정하는 방법

1. 미리보기 위에서 뒷면을 선택합니다.
2. 미리보기에 있는 구분선을 클릭합니다. 구분선이 없다면 답 바로 위 요소를 선택한 뒤 "요소 추가"의 [➕ 구분선]을 누릅니다.
3. 왼쪽 패널에 나타나는 선 두께를 3~5px로 올립니다.
4. 바로 아래 선 색상에서 색을 고릅니다.
5. 필요하면 줄 폭을 70% 정도로 줄입니다.

미리보기에 즉시 반영되므로, 실제로 쓰는 카드 길이의 샘플 값을 넣어 두고 조절하면 감을 잡기 쉽습니다.

실제로 만들어지는 CSS

ankieditor는 아래와 같은 규칙을 카드 서식의 스타일 영역에 써 넣습니다. Anki에 직접 붙여 넣고 싶다면 이 코드를 그대로 써도 됩니다.

#answer { border: none; height: 4px; background-color: #2e86de; width: 70%; }

여기서 border: none이 빠지면 안 됩니다. hr 태그는 브라우저 기본 스타일이 입체 테두리(inset)라서, 테두리를 지우지 않고 색만 지정하면 위아래 명암이 달라 흐릿한 이중선으로 보입니다. 테두리를 없앤 뒤 height와 background-color로 칠해야 지정한 두께와 색이 그대로 나옵니다. Anki 데스크톱·AnkiDroid·AnkiMobile 모두 카드를 웹뷰로 그리기 때문에 이 CSS는 어느 환경에서나 똑같이 적용됩니다.

주의할 점

야간 모드에서도 같은 색이 쓰입니다. Anki의 야간 모드는 사용자가 지정한 색을 자동으로 뒤집지 않습니다. 밝은 배경에서만 보고 아주 연한 회색을 고르면 어두운 배경에서는 거의 보이지 않습니다. 낮과 밤을 오가며 쓴다면 중간 톤 (예: 파랑 #2e86de, 회색 #888888)이 안전합니다.

선이 본문보다 튀면 역효과입니다. 구분선은 읽는 흐름을 도와주는 장치이지 강조 요소가 아닙니다. 카드에서 이미 강조색을 쓰고 있다면 구분선은 그보다 한 톤 낮은 색으로 두는 편이 낫습니다.

노트 유형마다 따로 정해야 합니다. 서식은 노트 유형 단위로 저장되므로, 여러 노트 유형을 쓴다면 각각에 적용해야 합니다. 반대로 이 성질을 이용해 노트 유형별로 구분선 색을 다르게 주면, 복습 중에 지금 어떤 종류의 카드인지도 함께 알 수 있습니다.

자주 묻는 질문

Anki에서 구분선 색과 두께를 바꿔도 되나요?

됩니다. Anki는 카드를 웹뷰로 렌더링하기 때문에 hr 태그에 일반 CSS가 그대로 적용됩니다. Anki 쪽에 별도의 제한은 없습니다.

두께를 올렸는데 선이 사라졌어요.

border: none만 넣고 배경색을 지정하지 않으면 투명한 빈 칸이 되어 선이 보이지 않습니다. 두께와 색은 항상 함께 지정해야 합니다. ankieditor에서는 둘 중 하나만 건드려도 두 값이 같이 기록됩니다.

앞면에도 구분선을 넣을 수 있나요?

넣을 수 있습니다. 다만 앞면은 질문 하나만 보이는 게 좋으므로, 앞면에는 구분선 대신 여백을 주는 편이 집중에 유리합니다.

구분선을 처음 넣는 방법부터 보고 싶다면 구분선 만들어서 한 눈에 답 찾기를 먼저 읽어 보세요. 카드가 가로로 너무 넓어 읽기 힘들다면 카드 최대 폭 수정하기도 함께 보면 좋습니다.