다중 출처 리서치 템플릿의 한 실행이 투자 상품에 관한 훌륭한 보고서를 만들어냈지만, 이를 형편없이 출력했습니다. [^1] 형태의 마커 95개가 본문 안에 있었고, [^1]: 형태의 줄 9개가 그 아래 쌓여 있었습니다. 웹에서도, 휴대폰에서도 마찬가지였습니다.
원인은 각주가 마크다운의 일부가 아니라는 데 있습니다. 이는 확장 기능이며, 우리가 제공하는 두 마크다운 엔진 — 하나는 웹용, 다른 하나는 모바일용 — 중 어느 것도 이를 구현하지 않았습니다. 우리는 모델에 정확히 이 형식을 요구한 뒤, 그것을 그대로 문자 그대로의 텍스트로 렌더링하고 있었던 것입니다.
하나의 재작성기, 두 개의 엔진
두 렌더러 모두에게 같은 확장 기능을 가르치는 대신, 어느 엔진이든 마커를 보기 전에 이를 다시 작성해 두 엔진 모두 이미 동일하게 렌더링할 수 있는 단순한 링크로 바꿉니다. 정의는 추출되어 별도로 반환되고, 그 뒤에 이어지던 내용은 문서의 꼬리 부분으로 남습니다. 대괄호는 링크 텍스트 안에 남아 있어, 쌓인 인용은 「12」가 아니라 「[1][2]」로 읽힙니다.
웹에서는 인용이 위 첨자로 그려지고, 정의는 실제 앵커가 있는 목록으로 렌더링되며, 하나를 클릭하면 그곳으로 스크롤되면서 해당 줄이 깜빡이고, 목록의 번호는 처음 인용된 위치로 다시 튀어 오릅니다. 마우스를 올리면 이동 없이 정의가 표시됩니다. 휴대폰에서는 같은 마커가 강조 색으로 그려지고, 하나를 탭하면 패널이 해당 줄로 스크롤됩니다. 인용이 아닌 링크는 이전처럼 브라우저에서 계속 열립니다.
보고서 아래의 출처 카드는 전혀 영향을 받지 않았습니다 — 이들은 다른 곳에서 오며 항상 정상이었습니다.
그리고 다운로드에서도
.docx, .pdf, .md로 다운로드하는 보고서는 다른 변환기를 거쳤는데, 이는 원본 마커를 문서에 그대로 인쇄했습니다. 문서 사양에는 위 첨자가 없어서, 인용은 「[3]」으로 인쇄되고, 각 정의는 「[3]」으로 시작하는 자신만의 줄을 엽니다. 들여쓴 연속 줄은 해당 정의에 이어 붙습니다. 파일 안의 번호는 화면의 번호와 같습니다.
첫 시도는 우리가 이미 대비책을 갖고 있던 방식으로 잘못되어 있었다
첫 번째 버전은 각주 번호를 평범한 프래그먼트 링크로 만들었습니다 — href="#fn-3". 단일 페이지 애플리케이션에 필요한 <base href="/"> 아래에서는 빈 프래그먼트가 사이트 루트를 기준으로 해석되어, 링크가 홈페이지를 가리키게 됩니다. 클릭 핸들러가 내비게이션을 취소했기 때문에 작동은 했습니다 — 그리고 누군가 그 핸들러를 건드리기 전까지는 계속 작동했을 것입니다.
바로 이 패턴을 위해 이미 갖고 있던 검사가 푸시 전 로컬 실행에서 빨간불이 켜졌습니다. 번호는 이제 버튼입니다. 스크롤하고, 포커스를 이동하며, 독자의 애니메이션 축소 설정을 존중합니다.