법률정보 화면에 출처와 기준일을 남기는 프론트엔드 원칙

법령이나 판례를 보여주는 화면은 내용보다 먼저 두 가지에 답해야 해요. 이 글은 어디서 왔고, 언제 기준인가. 국가법령정보센터와 대법원 데이터를 쓰는 플랜엘을 만들면서 이 둘을 화면에서 떼어내지 않는 규칙을 세웠는데, 백엔드가 아니라 프론트엔드에서 강제해야 지켜지더라고요.

출처와 기준일은 옵션 prop이 아니에요

처음엔 source?: string처럼 선택 필드로 두고, 있으면 보여주는 식으로 짰어요. 직접 만들어 보니 이게 문제였어요. 데이터가 한 번이라도 빠지면 화면은 조용히 출처 없는 법령 본문을 내보내요. 에러도 없고 테스트도 통과하는데, 독자는 근거 없는 문장을 읽게 되는 거죠.

그래서 타입부터 바꿨어요. 필드는 딱 3개, 전부 필수예요.

type LegalSource = {
  authority: string;   // 예: 국가법령정보센터
  originalUrl: string; // 원문 링크
  asOf: string;        // "YYYY-MM-DD", 10자 고정
};

본문을 그리는 컴포넌트는 이 객체를 받지 않으면 타입 검사에서 걸려요. 적용해 봤더니 API 응답을 파싱하는 단계에서 누락이 바로 드러나서, 화면까지 내려오기 전에 잡혔어요.

없으면 숨기지 말고 '확인 중'을 그려요

필수로 만들어도 외부 데이터는 비어 올 수 있어요. 이때 배지를 아예 안 그리는 쪽이 깔끔해 보이지만, 그러면 출처가 있는 글과 빠진 글이 화면에서 구분되지 않아요. 저는 세 번째 상태를 따로 뒀어요. 정상·확인 중·불러오기 실패, 이렇게 3가지예요. 확인 중 상태는 회색 배지에 "출처 확인 중"이라고 그대로 적고, 원문 링크 버튼은 비활성으로 둬요. 테스트해 보면 이 상태가 눈에 제일 잘 띄어서, 데이터 쪽 문제를 프론트에서 먼저 발견하게 돼요.

기준일은 Date 객체를 거치지 않아요

기준일 표시에서 하루가 밀리는 버그가 있었어요. "2026-10-14"처럼 날짜만 있는 문자열을 new Date()에 넣으면 UTC 자정으로 해석돼요. 그 값을 브라우저 로컬 시간으로 다시 꺼내면, UTC보다 뒤에 있는 시간대에선 13일로 찍혀요. 돌려 보니 한국에선 멀쩡해서 더 늦게 알아챘고요.

해결은 단순해요. 기준일은 끝까지 문자열로 다뤄요. 10자짜리 YYYY-MM-DD를 받아 2026년 10월 14일로 바꿀 때도 split("-")으로 자르기만 해요. 시간 계산이 필요한 값이 아니라 표시용 라벨이니까요.

복사하고 공유해도 따라가게

마지막으로, 본문을 복사하거나 공유 링크를 만들 때 출처와 기준일이 같이 가야 해요. 화면엔 있는데 클립보드엔 본문만 담기면 결국 떨어져 나가요. 복사 버튼은 본문 뒤에 출처 한 줄과 기준일을 붙여 넣고, 공유 URL엔 asOf 파라미터를 남겨서 나중에 열어도 같은 기준일이 보이게 했어요.

플랜엘은 월 3건까지 무료로 쓸 수 있는데, 한 건을 보더라도 언제 기준인지가 같이 보이는 게 법률정보 화면의 최소선이라고 생각해요. 컴포넌트 1개와 필수 타입 3개면 충분하고, 나머지는 그걸 우회하지 않는 습관이에요.