법률 앱에 '자문 아님' 문구, 거슬리지 않게 심는 법

법령이나 판례를 보여주는 화면을 만들다 보면 꼭 한 번은 부딪히는 문제가 있어요. "이건 법률 자문이 아닙니다"라는 고지를 어디에, 어떻게 넣을까 하는 거예요.

너무 크게 넣으면 검색 결과보다 경고가 먼저 눈에 들어와서 답답하고, 너무 작게 숨기면 있으나 마나 한 장식이 돼요. 저도 플랜엘(plan-l)에서 법령 검색 화면을 만들면서 이 균형을 몇 번 다시 잡았어요.

한 곳이 아니라 세 곳으로 나눠요

한 자리에 크게 박는 대신, 무게를 나눠 세 곳에 두는 쪽이 훨씬 자연스러웠어요.

첫 진입 때 한 번만 뜨는 안내, 검색 결과 목록 위의 얇은 배너, 그리고 상세 화면 맨 아래 각주. 이렇게 나누면 각각은 작아도 흐름 곳곳에서 자연스럽게 눈에 닿아요.

첫 안내는 딱 한 번만

첫 방문 안내를 매번 띄우면 두 번째부터는 그냥 닫기 버튼만 찾게 돼요. 그래서 localStorage 플래그 하나로 재노출을 막았어요.

function useFirstVisitNotice(key) {
  const [show, setShow] = useState(false);
  useEffect(function checkFirstVisit() {
    if (!localStorage.getItem(key)) setShow(true);
  }, [key]);
  const dismiss = () => {
    localStorage.setItem(key, "1");
    setShow(false);
  };
  return { show, dismiss };
}

값 하나만 저장하면 되니까 상태 관리 라이브러리도 필요 없었어요. 붙이는 데 10분 정도 걸렸어요.

배너는 얇게, 각주는 조용하게

목록 위 배너는 본문보다 작은 13px 정도로 두고, 배경도 회색 계열로 살짝만 톤을 줬어요. 빨간 경고색을 쓰면 오류 메시지처럼 보여서, 오히려 정보를 의심하게 만들더라고요. 직접 두 버전을 나란히 놓고 보니 차이가 확실했어요.

간격도 신경 썼어요. 배너 안쪽 여백은 8px, 검색 결과와의 바깥 간격은 16px로 둬서 결과 카드에 붙어 보이지 않게 했어요.

스크린리더도 놓치지 않게

눈에만 보이게 하면 절반만 한 거예요. 고지 영역에 role="note"를 주고, 장식용 아이콘에는 aria-hidden을 붙여서 스크린리더가 문구 자체만 또박또박 읽도록 했어요. 실제로 보이스오버를 켜고 돌려 보니 아이콘 이름까지 읽어서 산만했는데, 그 한 줄로 정리됐어요.

법률 정보는 정확해도 맥락에 따라 다르게 읽혀요. 그래서 고지는 숨기지도, 겁주지도 않는 선을 찾는 게 결국 UX 문제더라고요. 작은 컴포넌트 하나에도 이렇게 고민이 들어간다는 걸, 직접 만들어 보고 나서야 알았어요.