구현 화면 — 최종 산출물

본선 개발이 끝난 시점의 실제 동작 화면이다. 시연 순서 그대로 진입 → 메인게임 → 보조게임 → 실전 가드 → 상담 준비 리포트로 이어진다.

모든 화면은 로컬 실서버(프론트 3100 / 백엔드 8100)에서 실제로 플레이하며 촬영했다. 목업이나 디자인 시안이 아니다. 화면에 보이는 법령 문장은 전부 DB에 적재된 원문을 조문 ID로 불러온 것이고, 수치는 실제 판정·계산 결과다.


1. 진입과 허브

타이틀

타이틀 화면

상단 HUD에 신용점수 · 멘탈 · 법률지식 세 스탯과 진행 일차, 누적 「지켜낸 돈」이 표시된다. 이 화면의 ₩485,040은 아래 주휴수당 계산 던전을 실제로 완주해서 쌓인 값이다.

좌하단의 가드 · 상담리포트 버튼이 게임 밖 실사용 도구로 들어가는 입구다. 게임을 하다가 “내 계약서도 이런가?” 싶을 때 바로 넘어갈 수 있게 두 도구를 항상 노출해 두었다.

허브맵

허브맵

Phaser로 그린 도트 허브다. 캐릭터를 움직여 퀘스트 노드로 이동한다. 신호등·횡단보도가 실제로 동작하며, 퀘스트 진행 상태는 zustand가 단일 진실 원천으로 들고 있고 씬은 그것을 받아 그리기만 한다.

조작 방법 안내

첫 진입 시 조작 방법을 안내한다.

퀘스트 진입

편의점 실내와 NPC

편의점 안으로 들어가면 점주 NPC「나사장」이 있다. 말을 걸면 대화 방어전이 시작된다.


2. 메인게임 — 대화 방어전

핵심 메커닉이다. 정해진 보기를 고르는 게 아니라 자유 텍스트로 직접 반박해서 회피 → 지연 → 회유 3단 방어선을 뚫는다.

1단 — 회피

방어전 1단계

계약서? 아이고, 우리 같은 작은 가게는 원래 그런 거 안 써. 다들 그냥 일하는 거지, 뭘 그런 걸 따져~

우측 상단이 NPC 체력 3칸, 좌측 하단이 플레이어 스탯이다. 하단 입력창에 하고 싶은 말을 그대로 쓰면 된다. 막히면 힌트를 쓸 수 있고, 힌트 사용 횟수는 결과 화면에 기록된다.

판정이 통과하는 순간

반박 성공

판정이 CLEAR로 나오면 「반박 성공」과 함께 NPC 체력이 한 칸 깎이고, 점주가 물러서는 대사를 낸다.

한 부까지 챙겨 달라고…? 아니 요즘 애들 야무지네…

입력부터 화면 반영까지 1턴 왕복이 약 1초대다. 판정은 애매하면 절대 통과시키지 않는다 — 방향은 맞아도 사실관계가 틀린 발화(예: 벌금을 내는 쪽을 근로자로 잘못 아는 경우)는 정답 처리하지 않고 힌트로 내린다.

근거 조문 — 이 서비스의 핵심

법령 원문 카드

단계를 통과하면 판정 근거가 된 법령을 원문 그대로 펼쳐 보여준다. 카드 하단의 「법령 DB 원문」 라벨이 그 표시다.

화면에 뜨는 법령 문장은 요약하지도, 생성하지도 않는다. DB에 적재된 원문을 조문 ID로 불러와 그대로 렌더링한다. LLM이 법 조문을 만들어내는 경로 자체가 없다. 법이 개정되면 모델을 다시 학습시킬 필요 없이 원문 데이터만 교체하면 된다.

2단 — 지연

방어전 2단계

에이, 그건 나중에 하면 되지~ 지금 양식도 없고 바쁜데. 일단 한 달만 일해보고, 그때 쓰자, 응?

“쓰긴 쓸 건데 나중에”로 미루는 단계다. 여기서는 시기(근무 시작 전)나 강도(미루면 안 되는 이유)를 짚어야 통과한다.

3단 — 회유

방어전 3단계

학생, 세상 그렇게 깐깐하게 살면 피곤해~ 그런 거 따지는 애는 우리도 부담스럽고. 딴 애 쓰지 뭐. 어떻게, 그냥 편하게 일할래?

가장 현실적인 압박이다. 여기서는 마음가짐이 아니라 실행 수단(표준근로계약서 양식, 고용노동부·노동청 같은 기관)을 꺼내야 한다.

승리

최종 반박 성공

…알았다, 알았어. 졌다 졌어. 양식 갖고 와, 지금 쓰자. 요즘 애들 무서워서 원…

결과

방어전 결과

클리어하면 법률지식과 멘탈 스탯이 오른다. 총 턴 수, 힌트 사용 횟수, 소요 시간이 함께 기록된다. 점수는 최초 클리어에만 반영되고, 다시 플레이하면 「연습 클리어」로 표시된다.


3. 보조게임 — 주휴수당 계산 던전

법을 아는 것과 내 돈을 계산할 줄 아는 것은 다르다. 직접 계산해서 입력하는 미니게임이다.

계산법 안내

들어가기 전에 계산식과 전제 조건을 알려준다. 1주 소정근로시간이 15시간 이상인지 먼저 확인하라는 문장이 뒤에 나올 함정의 복선이다. 적용 시급은 2026년 최저임금 고시 기준 ₩10,320이다.

문제와 계산기

도트 배경 위에 계산기 키패드를 DOM으로 올렸다. 게임 화면이지만 입력 UI는 캔버스가 아니라 DOM인데, 한글 입력이 필요한 곳에서 캔버스 위 입력이 IME 조합을 깨뜨리기 때문이다.

함정 문항

Q4 TRAP

Q4 · TRAP — 시급 10,320원, 주 14시간 개근. 주휴수당은?

정답은 0원이다. 주 15시간 미만이면 개근해도 주휴수당이 발생하지 않는다. 앞의 세 문항을 공식대로 풀어온 사람일수록 여기서 계산기를 두드리게 된다. 공식을 외우게 하는 게 아니라 적용 요건을 먼저 확인하는 습관을 심는 것이 이 던전의 목적이다.

클리어

다섯 문항을 모두 맞히면 이번 판에서 지켜낸 금액이 집계된다. 이 값이 허브 HUD의 누적 「지켜낸 돈」으로 올라간다.


4. 실전 가드 — 근로계약서 진단

여기서부터는 게임이 아니라 실사용 도구다. 실제 근로계약서를 촬영해 올리면 위험 신호를 진단한다.

업로드 화면

이미지와 Word(.docx)를 받는다. 하단에 업로드 전 이미지 메타데이터(EXIF)를 제거한다고 명시했다. 계약서 사진에는 촬영 위치가 붙어 있는 경우가 많다.

개인정보 게이트

개인정보 마스킹 확인

파일을 고르면 바로 점검하지 않는다. 미리보기를 띄우고 주민등록번호·계좌번호 같은 긴 숫자가 가려졌는지 사용자가 직접 확인하게 한다. 체크하기 전까지 점검 시작 버튼은 눌리지 않고, 왜 막혔는지도 화면에 적어 준다.

가리지 않은 개인정보를 서버로 보내지 않게 하는 것이 목적이다. 자동 마스킹에 맡기지 않고 사람의 확인을 한 단계 두었다.

진단 결과

진단 리포트

발견된 항목을 중대 · 주의로 나눠 보여준다. 각 항목에는 어떤 판정 규칙이 몇 번 버전으로 걸렸는지가 그대로 찍힌다(gr-contract-min-wage-below-v1 · 버전 1). 결과가 왜 나왔는지 추적할 수 있어야 한다고 봤다.

중대 항목이 나오면 무료 상담기관 연결을 상단에 띄운다. 하단에는 「본 결과는 법적 자문이 아닌 1차 스크리닝입니다」를 항상 붙인다.

근거 조문

여기서도 근거는 원문이다. 2026년 적용 최저임금 고시와 근로기준법 제17조를 그대로 싣고, 관련 퀘스트로 이어지는 링크를 붙였다. 진단으로 끝내지 않고 “그래서 어떻게 말해야 하는지”를 게임에서 연습하게 연결한 것이다.


5. 상담 준비 리포트

피해를 입은 사람이 자기가 정확히 뭘 당했는지 모르는 경우가 많다. 대화로 사실관계를 정리해서, 노무사·변호사에게 그대로 들고 갈 수 있는 문서를 만든다.

인터뷰 시작

헤더에 「법률 자문이 아닌 상담 준비 자료입니다」를 고정으로 붙였다.

인터뷰 진행

말한 내용에서 정리된 항목 수가 실시간으로 올라간다. 질문은 한 번에 하나씩, 일상 말투로 묻는다.

「잘 모르겠어요」 「그런 거 없어요」 버튼을 항상 띄워 둔다. 모르는 걸 모른다고 답할 길을 막으면 사용자가 아무 말이나 채우게 되고, 그 순간 리포트는 쓸모없어진다.

확인 — 지어내지 않는다

확인 화면

정리한 내용을 문서로 만들기 전에 사용자에게 먼저 확인받는다. 항목마다 「본인 진술: “…”」로 어느 발언에서 나왔는지 원문을 남긴다.

근무 시작일이 「3월경 (본인 진술 — 정확한 날짜 미확인)」으로 적힌 것을 보자. 사용자가 “3월부터”라고만 말했으므로 3월 2일로 확정하지 않는다. 그럴듯한 날짜를 채워 넣는 순간 그 문서는 상담에서 신뢰를 잃는다.

확인 화면 하단

금액도 마찬가지다. 「못 받은 돈(본인 추산) 100만원 (본인 진술 — 미확인)」 — 본인 추산임을 라벨로 못박는다. 마지막에 「위 내용은 본인이 진술하고 확인한 사실입니다」에 체크해야 리포트가 생성된다.

완성 리포트

리포트 상단

PDF로 저장해 인쇄해 갈 수 있다. 30일 뒤 자동 삭제되며, 필요하면 30일씩 최대 2회 연장할 수 있다. 사건 분류(임금 관련 LABOR)와 한 줄 요약이 맨 앞에 온다.

팩트 시트

당사자 정보와 수치를 표로 정리하되, 모든 행 우측에 「진술」 출처 라벨이 붙는다. 금액 항목에는 「금액 산정·검산은 전문가(노무사·변호사)의 몫입니다」를 명시했다.

미확인 사항과 조문

「7. 미확인 사항 — 상담 시 우선 확인 필요」로 빈칸을 숨기지 않고 따로 모아 보여준다. 상담에서 먼저 확인해야 할 것을 미리 알려주는 셈이다. 이어지는 8절에는 관련 법령 원문(근로기준법 제36조 등)을 그대로 싣는다.

다음 단계

마지막은 실제 행동으로 이어진다. 챙겨 갈 자료를 알려주고, 청소년·청년근로권익센터(1644-3119)와 법률구조공단(132) 등 무료 상담 창구로 연결한다.


설계에서 지킨 것

화면 전체를 관통하는 원칙 세 가지다.

법령은 원문만 보여준다. 방어전 조문 카드, 가드 근거 조문, 리포트 8절 모두 DB 원문을 그대로 렌더링한다. 요약·가공·생성 경로가 없다.

애매하면 정답 처리하지 않는다. 교육 서비스에서 최악은 틀린 발화를 통과시켜 잘못된 지식을 남기는 것이다. 판정이 불확실하면 클리어 대신 힌트로 내린다.

모르는 것은 모른다고 적는다. 리포트의 「미확인」 라벨과 「7. 미확인 사항」이 그것이다. 빈칸을 그럴듯하게 채우지 않는 것이 그 문서를 상담에서 쓸 수 있게 만든다.


팀 BeyondFacade — 2026 제8회 K-디지털 트레이닝 해커톤. 본 사이트는 발표 심사 참고용 자료입니다.

This site uses Just the Docs, a documentation theme for Jekyll.