Anki에서 카드의 앞면과 뒷면이 비슷한 형태이고 내용이 길 때, 정답을 확인하면 어디까지 앞면이고 어디부터 뒷면인지 구분하기 쉽지 않습니다. 이를 해결하기 위해서는 앞면과 뒷면을 구분하고 있는 구분선의 두께를 굵게 만들어주거나 구분선의 색을 변경해주면 앞면과 뒷면의 구분을 명확하게 할 수 있습니다. ankieditor에서는 간단하게 클릭 한 번으로 이를 Anki에 적용할 수 있습니다.
구분선을 변경하면 좋은 경우
카드 뒷면은 보통 앞면 내용({{FrontSide}}) 아래에 답이 이어지는 구조입니다.
카드의 앞면과 뒷면 내용 사이에는 얇은 구분선이 있습니다. 이 구분선은 카드의 내용이 짧을 때는
문제가 되지 않습니다. 문제는 긴 서술형 문장이 적힌 카드를 사용할 때 입니다. 앞면과
뒷면의 내용이 둘 다 긴 서술형 문장이라면 정답을 확인할 때 얇은 구분선으로는 어디까지가
앞면의 내용이고 어디부터 뒷면의 내용인지 구분하기 쉽지 않습니다. 또한 카드 앞면과 뒷면
내용이 유사한 경우에도 문제가 될 수 있습니다. 앞면과 뒷면이 내용과 구조가 비슷하고 일부
차이만 있는 카드 유형의 경우에는 얇은 구분선으로 부족할 수 있습니다. 이러한 경우에는
구분선의 두께를 두껍게 하거나 구분선의 색을 변경함으로써 명확하게 구분할 수 있게 하는 것이
좋습니다.
각 상황별 추천 구분선 두께
제일 좋은 것은 실제로 변경해보면서 읽기 편한 두께를 찾는 것입니다. 상황별로 추천하는 구분선 두께를 알려드리겠습니다.
- 1~2px - 단어·용어 카드처럼 앞뒤가 각각 한 줄인 경우에 적당합니다.
- 3px - 앞면이나 뒷면이 두세 줄인 대부분의 카드에 좋습니다. 가장 무난한 기본값입니다.
- 4~6px - 앞면에 지문이 있거나 뒷면에 해설이 붙는 서술형 카드에 좋습니다. 문단이 여러 개일 때 명확하게 구분지어 줍니다.
- 7px 이상 - 선이라기보다 색 띠에 가까워집니다. 디자인적으로 거슬릴 수 있습니다.
구분선을 추가하는 방법
이미 구분선이 있다는 전제에서는 구분선의 두께를 조절하거나 색을 변경하면 됩니다. 그런데 서식을 직접 만들다 보면 구분선 자체가 빠져 있는 경우가 있거나 혹은 원하는 곳에 구분선을 넣고 싶은 경우가 생깁니다. 이런 경우에는 ankieditor를 활용하여 구분선을 직접 만들어주면 됩니다.
만드는 순서는 이렇습니다. 미리보기 위에서 뒷면을 고른 다음, 구분선이 올 자리 바로 위의 요소(보통 질문 부분)를 클릭해 선택하고 "요소 추가"의 [➕ 구분선]을 누르면 그 아래에 선이 생깁니다. 아무것도 선택하지 않고 누르면 맨 아래에 붙습니다. 위치가 마음에 안 들면 [↑ 위로]·[↓ 아래로]로 옮기고, [🗑 삭제]로 지울 수 있습니다.
새로 만든 구분선은 줄 폭이 100%라서 화면의 양 끝까지 이어집니다. 너무 길다고 생각되면 60~80%로 줄여 보세요. 선이 한눈에 들어오면서도 너무 길지 않아 적당해 보입니다. 이렇게 적절한 곳에 구분선을 만든 후에는 두께와 색을 자유롭게 조절하면 됩니다.
ankieditor에서 설정하는 방법
- 미리보기 위에서 뒷면을 선택합니다.
- 미리보기에 있는 구분선을 클릭합니다. 구분선이 없다면 답 바로 위 요소를 선택한 뒤 "요소 추가"의 [➕ 구분선]을 누릅니다.
- 왼쪽 패널에 나타나는 선 두께를 3~5px로 올립니다.
- 바로 아래 선 색상에서 색을 고릅니다.
- 필요하면 줄 폭을 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에서는 둘 중 하나만 건드려도 두 값이 같이 기록됩니다.
앞면에도 구분선을 넣을 수 있나요?
넣을 수 있습니다. 다만 앞면은 질문 하나만 보이는 게 좋으므로, 앞면에는 구분선 대신 공백을 넣는 것이 조금 더 좋습니다.
카드가 가로로 너무 넓어 읽기 힘들다면 Anki 카드 폭 조절하는 방법도 함께 보면 좋습니다.