마음기록 앱 AI 대화에 'AI입니다' 고지를 어디에 넣을까

마음을 기록하는 앱에 AI 대화 상대를 붙이면 꼭 따라오는 질문이 있어요. 지금 대화하는 상대가 AI라는 걸 어디서 알려 주느냐는 거예요. EU AI Act 50조는 사람이 AI와 상호작용한다는 사실이 명백하지 않으면 알려 주라고 요구하고, 2026년 8월 2일부터 적용돼요. 한국 사용자만 있어도 기본으로 깔아 두는 편이 마음 편하더라고요.

문제는 조문이 아니라 화면이에요. 어디에, 어떤 형태로, 몇 번 보여 줄지는 프론트엔드가 정해야 하거든요. 플랜티 대화 화면 프로토타입에 직접 넣어 보니 답은 한 곳이 아니라 세 곳이었어요.

모달 한 번으로는 부족했어요

처음엔 온보딩 모달 1개에 문장을 넣고 끝내려 했어요. 테스트해 보면 사용자는 모달을 닫는 순간 내용을 잊어요. 며칠 뒤 다시 열면 화면 어디에도 AI라는 단어가 없거든요. 고지는 "한 번 봤음"이 아니라 "지금 보임" 상태여야 한다는 게 여기서 분명해졌어요.

온보딩은 설명용이라 문장이 길어도 괜찮아요. 상단 라벨은 항상 보이는 대신 12자 안쪽으로 짧게 잡았어요. 말풍선 배지는 스크롤 중간에 들어와도 누가 말했는지 바로 구분되게 하는 용도예요.

컴포넌트는 하나, variant만 달라요

세 곳에 문구를 따로 적으면 나중에 3군데를 고쳐야 해요. 직접 만들어 보니 컴포넌트 1개에 prop 하나면 충분했어요.

type Variant = "onboarding" | "banner" | "badge";
 
export function AiDisclosure({ variant }: { variant: Variant }) {
  const text = {
    onboarding: "이 대화 상대는 사람이 아니라 AI예요.",
    banner: "AI와 대화 중",
    badge: "AI",
  }[variant];
  return <span data-variant={variant}>{text}</span>;
}

문구가 한 파일에 모이니 검토 의견이 와도 수정은 1곳이에요. 아이콘이나 색만으로 AI를 표현하지 않고 텍스트를 항상 남긴 건 스크린리더 때문이에요. 배지를 아이콘으로 바꾸고 싶다면 aria-label에 같은 문구를 넣어야 해요.

놓치기 쉬운 상태 3가지

적용해 봤더니 정상 화면보다 예외 화면에서 고지가 빠져요. 메시지가 0개인 빈 화면, 새로고침 직후 로딩 화면, AI 응답을 기다리는 타이핑 인디케이터 화면이에요. 상단 라벨을 메시지 목록 안에 두면 목록이 비었을 때 같이 사라지더라고요. 라벨은 목록 밖, 화면 레이아웃 레벨로 올려야 했어요.

테스트는 이 세 상태에 1개씩, 3개만 남겼어요. 렌더 후 AI 텍스트가 화면에 있는지 확인하는 단순한 검사인데, 돌려 보니 레이아웃을 손댈 때마다 한 번씩은 걸리더라고요.

정리

고지는 법 문구를 붙이는 일이 아니라, 어느 시점에 화면을 열어도 지금 AI와 얘기하고 있다는 걸 알 수 있게 하는 레이아웃 문제예요. 라이프케어로그의 플랜티는 아직 개발 중이라 구조가 바뀔 수 있지만, 컴포넌트 1개와 테스트 3개로 시작하는 방식은 다른 채팅 UI에도 그대로 쓸 수 있을 거예요.