다시, 대화 · v0.3.1

충남 관계회복지원단 교사가 가상 학생·보호자와 대화모임을 연습하는 웹앱입니다. 충남 관계회복 운영 자료를 참고했습니다. 자료와 적용 범위에 참고 링크를 정리했습니다. 학교급별 창작 사례 30개를 제공합니다.

웹 배포

공개 앱 열기 — PC와 휴대전화에서 설치 없이 사용할 수 있습니다.

GitHub Pages — main에 푸시하면 public/ 화면이 자동 배포됩니다. 정적 호스팅이라 AI 서버가 없으므로 시나리오 체험만 사용할 수 있습니다. AI 역할 대화는 Vercel 주소나 로컬 실행에서 이용하세요.

GitHub main에 푸시하면 같은 공개 주소가 자동 갱신됩니다. Vercel에서 저장소를 연결하면 vercel.json에 따라 public/ 화면과 Node.js API 함수가 함께 배포됩니다. Node.js 24를 사용하며 별도 빌드나 패키지 설치가 필요하지 않습니다. 사용자는 화면에서 자신의 API 키를 입력하므로 서버 환경 변수에 공용 AI 키를 등록하지 않습니다. 서버는 요청 본문이나 API 키를 로그로 남기지 않습니다.

HTTPS 주소에서 마이크 권한을 허용할 수 있습니다. 공개 주소·로컬 주소·다른 브라우저의 기록은 서로 공유되지 않습니다.

실행하기

Node.js 22 이상이 있으면 추가 패키지 설치 없이 실행됩니다. macOS·Windows·Linux에서 사용할 수 있습니다. Node.js 22·24의 자동 검사와 macOS Chrome의 화면 검사를 제공합니다.

1. 저장소를 내려받고 Cursor에서 파일 → 폴더 열기로 dasi-dialogue 폴더를 엽니다.

   git clone https://github.com/doguri25/dasi-dialogue.git
   cd dasi-dialogue
   

2. 터미널 → 새 터미널에서 실행합니다.

   npm start
   

3. Chrome에서 http://localhost:3210을 엽니다. 터미널은 켜 둡니다. 종료할 때는 터미널에서 Control+C를 누릅니다.

Finder에서 다시대화 실행.command를 더블클릭해 서버를 시작할 수도 있습니다. 같은 포트에서 이미 실행 중이라면 기존 브라우저 주소를 열면 됩니다. 파일을 file://로 직접 열지 마세요.

v0.3에서 달라진 점

• 사례를 입문 → 중급 → 심화 순서로 묶었습니다. 처음이라면 맨 위 입문 사례부터 고르세요.
• 갈등 주제마다 색이 정해져 있습니다. 위쪽 주제 색 칩을 누르면 그 주제만 봅니다.
• 사례 카드는 제목 중심으로 짧게 보여 주고 자세한 내용은 카드를 눌러 확인합니다.
• 팝업 창은 바깥 어두운 배경을 눌러도 닫힙니다. 고른 문장은 그대로 남습니다.

v0.2에서 달라진 점

• 첫 화면에서 진행 중이거나 저장한 연습을 바로 이어갑니다. 검색 조건도 한 번에 초기화합니다.
• 대화 상대·단계별 초안, 발문 방식, 선택한 질문이 수동 저장·재개에 포함됩니다. API 키는 저장하지 않습니다.
• 다음 모임에 필요한 확인 항목과 기록을 안내합니다. 모바일의 진행 확인 열기로 바로 이동할 수 있습니다.
• 대화 중 전체 대화에서 지난 단계까지 읽습니다. 교사용 기록 보기이며 학생 역할 AI의 사전면담 격리는 유지됩니다.
• 회고에서 실제 교사 질문을 참고 장면으로 살펴봅니다. 내려받는 Markdown에 현재 회고와 참고 장면도 포함됩니다.
• 시작·대화·회고 화면의 큰 색 면, 간격, 버튼, 글자와 모바일 배치를 다듬었습니다.

PRD 적용표 · 변경 기록 · 검증 기록

첫 연습

1. 사례와 대화 조건을 고릅니다. 협력적 대화 / 방어와 교착 / 중단이 필요한 순간 / 사후 약속 미이행 중 선택합니다.
2. 신청서 확인에서 배경·학생별 어려움·동의 서류·안전 우려를 읽고 사전모임 시작하기를 누릅니다. 체크리스트나 진행 방향 선택 없이 바로 이동합니다.
3. 사전모임은 대화모임 안내 → 무슨 일이 있었는지 듣기 순서입니다. 안내 고르기의 문장을 보내거나 직접 입력·마이크로 모임을 설명합니다. 답변을 받으면 이야기 듣기 질문이 나타납니다. 학생별·보호자별로 안내 순서를 따로 기억하며, 다른 사람의 사전 발언은 공유하지 않습니다.
4. 기본 화면의 질문 고르기에서 발문 4개 중 하나를 선택하고 선택한 질문 보내기를 누릅니다. 다른 질문 보기로 추가 4개를 볼 수 있습니다. 학생·보호자 답변이 오면 그 내용에 이어지는 선택지 4개로 바뀝니다. AI 모드에서는 같은 요청에서 다음 발문까지 생성하며, 선택지가 없거나 시나리오 체험이면 직전 발언을 참고한 질문 예시를 제공합니다. 다른 질문 보기에는 단계·상대·연습 조건에 맞는 기본 질문이 나옵니다. 문장 고쳐 쓰기로 선택한 문장을 수정할 수도 있습니다.
5. 직접 확인한 참여 의사·안전 항목을 표시하고 본모임으로 이동합니다. 대면 준비가 되지 않았다면 언제든 모임을 마치고 보류·중단을 회고할 수 있습니다.
6. 본모임에서 합의 또는 미합의 내용과 점검 계획을 적고 사후모임에서 실천·미이행·안전을 확인합니다.
7. 종료 후 회고합니다. 기록 저장을 누른 기록만 현재 브라우저에 남습니다. 기록 재개·삭제와 Markdown 내려받기를 지원합니다. 작성 중인 문장·발문 방식·선택한 질문도 함께 저장되며 첫 화면의 이어서 연습하기에서 복원됩니다. 초안은 학생·단계별로 분리됩니다.

사전면담 참여 의사를 확인했다는 체크 자체가 참여 동의를 뜻하지 않습니다. 학생이 거절한 상태라면 본모임으로 진행하지 말고 보류·개별 지원을 연습하세요. 결과는 진행자가 기록하며 앱이 실제 사안의 성공·실패를 판정하지 않습니다.

발문 방법은 언제든 질문 고르기 / 직접 입력·마이크 사이에서 바꿀 수 있습니다. 직접 쓰던 문장은 방법을 바꿨다가 돌아와도 유지됩니다. 마이크를 사용할 때는 인식이 끝난 문장을 확인·수정한 뒤 보내기를 누릅니다. 객관식 선택과 음성 인식만으로 자동 전송하지 않습니다. 객관식 발문은 정답을 채점하는 시험이 아니라 진행자가 질문의 방향을 고르는 연습입니다.

학생 이미지와 신청서 열람

학생 캐릭터 6명(초·중·고 각 2명)과 갈등 주제 삽화 7장을 생성해 포함했습니다. 사례 카드·상세 화면·신청서·대화 말풍선에서 볼 수 있습니다. 캐릭터와 삽화는 여러 사례에 공통으로 사용하며 실제 학생이나 사건을 묘사하지 않습니다. 이미지 원본 PNG와 화면용 WebP는 public/assets/, 제작 프롬프트와 생성 파일명 대응은 image-assets.json에 있습니다.

신청서는 30개 가상 사례와 선택한 조건을 바탕으로 제공하는 연습 자료입니다. 공식 서식 복제나 실제 신청 접수·발송 기능은 아닙니다. 읽은 뒤 버튼 하나로 모든 조건의 사전모임에 바로 들어갑니다. 동의 서류 누락이나 의사 변경은 문서에 표시하고 사전 대화에서 살펴봅니다.

사전모임은 학생이 사건부터 말하는 대신 진행자의 안내를 기다리며 시작합니다. 안내 고르기 4개 중 하나를 보내거나 직접 설명하면, 무슨 일이 있었는지 이야기하기 질문 4개로 바뀝니다. 각 순서에서 다른 문장 4개도 볼 수 있습니다. 안내를 들었다는 반응을 대면 동의로 처리하지 않으며 기존 본모임의 참여 의사·안전 확인은 별도로 남습니다. 거절 조건에서는 본모임으로 전환하지 않습니다.

신청서를 읽었다는 기록과 학생별 진행 순서는 기록 저장으로 보관합니다. 이전 버전의 검토 메모·보류 기록도 지우지 않고 다시 볼 수 있으며, 검토 선택이 사전모임 진입을 막지 않습니다. 전송 실패 때는 안내 단계와 선택 문장을 유지합니다.

PC와 모바일 모두 신청서를 한 화면 흐름으로 읽습니다. 문서 위·아래에 사전모임 시작 버튼을 두었습니다. 사전모임의 안내와 이야기 듣기 순서는 큰 색 면으로 표시합니다.

소리

질문 카드 열기·전송·답변 도착에 짧은 효과음이 나옵니다. 상단 효과음 켜짐/꺼짐 버튼(모바일은 스피커 모양)으로 바꾸며 설정은 이 브라우저에 유지됩니다. 자동 재생 없이 첫 조작 이후에만 소리를 냅니다. 기존 답변 읽어주기는 별도로 사용할 수 있으며, 읽어주기 중에는 답변 도착 효과음을 생략합니다.

PC·모바일 화면과 큰 글자

• PC: 대화창과 답변 예시를 좌우로 나란히 봅니다. 보내기 버튼은 화면 안에 유지됩니다. 네 문항을 2×2 카드로 한눈에 봅니다. 카드 제목만 작은 글씨로 표시하며, 카드를 누르면 큰 글씨의 전체 문장이 열립니다. 이 문장 선택하기를 누른 뒤 보내기로 전송합니다. 선택한 카드와 질문 고르기 탭은 진한 초록색으로 구분합니다. 예시 전체 읽기로 네 문장을 펼쳐 볼 수도 있습니다. 위쪽 진행 확인·메모를 누르면 오른쪽만 진행 노트로 바뀌고 대화창은 계속 보입니다. 답변 예시로를 누르면 초안과 선택을 유지한 채 돌아옵니다.
• 모바일·태블릿: 아래의 사례 / 연습 / 기록 / 도움말로 이동합니다. 연습 화면에서 대화 연습 / 진행 확인을 바꿔 보며, 확인을 마치고 다음 단계로 이동하면 대화 화면으로 돌아옵니다. 화면을 바꿔도 선택한 질문과 작성 중인 문장은 유지됩니다. 질문을 고르면 대화창으로 이동하며, 바로 아래의 이 문장 보내기를 눌러 전송합니다. 긴 문장은 문장 전체 보기로 펼칩니다. 답변이 도착하면 대화창에서 최신 발언을 볼 수 있습니다.
• 기본 본문 18px, 대화 약 19px, 주요 전송 버튼 높이 54–58px입니다. 위쪽 글자 크게를 누르면 더 크게 읽을 수 있고 이 선택은 브라우저에 기억됩니다. 기본 글자로 되돌릴 수 있습니다.
• 질문·버튼은 색이 채워진 면으로 구별합니다. 선택한 질문에는 선택됨, 확인한 항목에는 확인함을 함께 표시합니다.
• 화면 이동·새로운 응답·창 열기에 짧은 움직임을 사용합니다. 기기에서 동작 줄이기를 설정하면 이 움직임을 줄입니다.

900px 이하에서 모바일 구성을 사용합니다. PC 대화 화면은 높이 560px 이상에서 창 높이에 맞춰 페이지 전체 스크롤을 없앱니다. 지난 대화·진행 노트는 각 영역 안에서 읽으며, 긴 문장은 상세 창에서 확인합니다. 창 높이가 그보다 낮으면 내용을 가리지 않도록 기본 스크롤 구성을 사용합니다. 공개 HTTPS 주소는 휴대전화에서도 열 수 있습니다. 로컬 실행 주소는 실행 중인 컴퓨터 안에서만 접속됩니다. 현재 모바일 검증은 브라우저의 모바일 화면 크기로 진행했습니다.

Claude · Gemini · ChatGPT(OpenAI) 연결

1. 오른쪽 위 AI 연결하기 또는 왼쪽 AI 연결 설정을 엽니다.
2. AI 역할 대화를 선택하고 서비스를 고릅니다.
3. 본인 계정에서 발급한 API 키를 입력합니다. 웹 로그인 비밀번호를 넣는 칸이 아닙니다.
4. 필요하면 계정에서 사용할 수 있는 모델명으로 바꿉니다.
5. 연결 확인을 누른 뒤 설정 적용을 누릅니다. 연결 확인도 짧은 API 요청을 보냅니다. 일시적인 서비스 오류에는 한 번 자동 재시도합니다.

This is the beginning of the README. Read the rest at the original. Read the full README ↗