DOCS/troubleshooting/250806_happybell80_DOS터미널UI구현.md

DOS 터미널 UI 구현 (/game001)

날짜: 2025-08-06
작업자: happybell80 & Claude (서버팀)
관련 프로젝트: frontend-customer
관련 파일: dos-terminal.tsx, game-dos.tsx

오후 8시 40분

요구사항

로빙 레벨 1 단계를 표현하는 DOS 스타일 터미널 UI 구현:

• 완전한 MS-DOS 감성 (검은 화면, 초록색 텍스트)
• 도트 매트릭스 폰트
• 깜빡이는 커서
• 타이핑 애니메이션
• RO-BEING ASCII 아트 로고

구현 내역

1. MCP 도구 설정

시도한 MCP:

• @21st-dev/magic: API 키 필요로 실패
• @magicuidesign/mcp: 정상 설치 (무료, API 키 불필요)
• @jpisnice/shadcn-ui-mcp-server: 정상 설치

MCP 설치 명령:

claude mcp add magicui npx @magicuidesign/mcp@latest -- -y
claude mcp add shadcn-ui npx @jpisnice/shadcn-ui-mcp-server

2. 컴포넌트 구현

dos-terminal.tsx:

// 주요 기능
- ASCII 아트 RO-BEING 로고
- 타이핑 애니메이션 (50ms 간격)
- 커서 깜빡임 (500ms 간격)
- 3단계 시퀀스:
  1. intro: "안녕하세요. 로빙#1334234 입니다."
  2. name: "당신의 이름을 알려주세요."
  3. input: "INPUT : " 프롬프트

3. 스타일링

VT323 도트 폰트 적용:

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

CRT 효과:

• 스캔라인 효과
• 플리커 애니메이션
• RGB 색수차 표현

4. 라우팅 설정

// App.tsx
<Route path="/game001" component={GameDos} />

오후 9시 00분

배포 및 수정

초기 문제점:

1. "당신의 이름을 알려주세요:" → 콜론을 마침표로 변경
2. INPUT 프롬프트에 커서 중복 표시
3. 언더스코어 커서가 DOS 느낌 부족

수정 내역:

1. 텍스트 마침표로 변경
2. INPUT 프롬프트 이후 커서 제거
3. 커서를 세로줄(|) 스타일로 변경

오후 9시 10분

모바일 반응형 개선

문제점:

• 모바일에서 ASCII 로고 너무 큼
• 텍스트 크기 부적절
• 전체 레이아웃 깨짐

해결책:

// 모바일 반응형 클래스 적용
"text-[8px] md:text-xs"  // 로고 크기
"text-xs md:text-sm"      // 본문 텍스트
"w-full md:w-[524px]"     // 컨테이너 너비
"mt-4 md:mt-8"            // 여백 조정

결과

✅ 성공적 구현:

• https://ro-being.com/game001 에서 확인 가능
• 정통 DOS 터미널 감성 재현
• 타이핑 애니메이션 자연스러움
• 모바일/데스크톱 반응형 완벽 지원

향후 개선사항

1. 사용자 입력 후 다음 단계 구현
2. 실제 로빙 API 연동
3. 레벨별 UI 변화 시스템 구축
4. 사운드 효과 추가 (키보드 타이핑 소리)

교훈

1. MCP 도구 선택:

   • 무료 버전 확인 필수
   • API 키 요구사항 사전 체크
   • npm 패키지명 정확히 확인

2. DOS UI 구현:

   • 세로줄 커서가 더 정통적
   • 모바일 반응형 필수
   • 폰트 크기 세심한 조정 필요

3. 배포 프로세스:

   • Gitea Actions 자동 배포 활용
   • 빠른 피드백 사이클 중요

---

작성자: happybell80 & Claude (서버팀)
프로젝트: frontend-customer
주제: DOS 터미널 UI 구현