DC 통신

디시인사이드를 옛날 하이텔(PC통신) 단말기 감성으로 보는 React Native 앱이에요.

NeoDunggeunmo 픽셀 글꼴, 모노 컬러 테마, 모뎀 접속 시퀀스와 타이핑 효과로 90년대 텔넷 BBS 분위기를 재현했어요. 화면은 옛날 단말기지만, 실제 디시인사이드(비공식 API)에서 갤러리·글·댓글을 실시간으로 받아와요. 읽기 전용 단말기예요.

컨셉

"만약 디시인사이드를 1994년 하이텔에서 접속했다면?"

• 접속 시퀀스 — 모뎀 초기화 … ATDT 01410 … CONNECT 56000이 흐르고, 부팅이 끝나면 로그인 박스가 나와요.
• 터미널 UI — 한 글자씩 찍히는 타이핑 효과, 깜빡이는 커서, 점선 구분선, 반전 하이라이트로 단말기 느낌을 살렸어요.
• 3가지 모니터 테마 — 하이텔 블루 / 도스 그린 / 앰버 터미널을 설정에서 바로 바꿀 수 있어요.
• 실제 데이터 — 화면은 옛날이지만 글·댓글·디시콘은 지금 디시인사이드에서 실시간으로 가져와요.

디시콘이나 사진 같은 요즘 콘텐츠도 그대로 보여주되, 프레임은 철저히 단말기 톤을 유지해요.

화면

접속 / 로그인	메인 메뉴	갤러리 분류	글 목록	글 본문 · 댓글

기능

• 하이텔 터미널 UI — 픽셀 글꼴, 모뎀 접속 부팅 시퀀스, 타이핑 효과, 3가지 테마(하이텔/도스/앰버)를 갖췄어요.
• 실시간 랭킹 기반 분류 — 실시간 인기와 게임/연예·방송/스포츠/교육·금융·IT/여행·음식·생물/취미·생활 6개 분류를 디시 랭킹 API로 채워요.
• 갤러리 글 목록 — 번호 · 제목 · 댓글 · 조회 컬럼으로 보여주고, 공지를 구분하고, 정식/마이너 갤러리를 자동으로 판별하고, 페이지도 넘길 수 있어요.
• 글 본문 + 이미지 — 본문 이미지를 원본 비율로 보여주고, 탭하면 전체화면 라이트박스로 좌우로 넘겨볼 수 있어요.
• 댓글 + 디시콘 — 댓글을 불러와 보여주고 디시콘 이미지도 그대로 렌더해요. AI 봇 댓글돌이는 자동으로 숨겨요.
• 화면 캡쳐 — 하단 캡쳐 버튼을 누르면 상단바부터 댓글까지 스크롤 전체를 한 장으로 떠서 Pictures/DCTEL에 PNG로 저장해요.
• 즐겨찾기 · 최근 갤러리 · 설정 — AsyncStorage로 기기에 저장해요.
• 단말기다운 조작 — OS 뒤로가기가 화면 스택 뒤로 가고, 하단 명령바(뒤로 / 메인 / 캡쳐 / 설정)와 이미지 표시·타이핑 효과 토글을 제공해요.

⚠️ 비공식 API(gall.dcinside.com, json2.dcinside.com)를 사용해요. 디시인사이드가 사전 통지 없이 마크업·엔드포인트를 바꾸면 파싱이 깨질 수 있어요. 읽기 전용이라 글·댓글 작성·추천은 지원하지 않아요(디시 앱을 안내해요). 과도한 요청은 IP 차단 대상이니 주의해요.

설치 / 실행

릴리즈에서 APK를 받아 바로 설치해도 되고, 직접 빌드해서 설치·실행해도 돼요.

1. 릴리즈에서 받아 설치 (가장 간단해요)

릴리즈 페이지에서 dctel-vX.Y-arm64-v8a.apk를 받아 안드로이드 기기에 설치하면 돼요. arm64-v8a 전용이고 디버그 키로 서명돼 있어서, 설치하려면 "알 수 없는 출처(이 출처 허용)"를 한 번 켜 줘야 해요.

2. 직접 빌드해서 설치·실행

먼저 React Native 환경 설정을 끝내 주세요(Android Studio + SDK, JDK 등). Windows 에서는 Android 타깃을 권장해요.

npm install            # 의존성 설치 (최초 1회)
cd ios && pod install && cd ..   # iOS 만
npm start              # Metro 번들러
npm run android        # 에뮬레이터/실기기 연결 후
npm run ios            # macOS 만

릴리즈에 올리는 것과 같은 arm64 APK는 이렇게 만들 수 있어요.

cd android && ./gradlew assembleRelease -PreactNativeArchitectures=arm64-v8a
# 산출물: android/app/build/outputs/apk/release/app-release.apk

글꼴을 바꾸면 assets/fonts 에 넣고 다음으로 네이티브에 다시 링크할 수 있어요.

npx react-native-asset

품질 확인

npm test          # Jest (파서 단위 테스트 + App 렌더)
npx tsc --noEmit  # 타입 체크
npm run lint      # ESLint

구조

App.tsx                  Provider 래핑(SafeArea + AppProvider)
src/
  Root.tsx               상단바 + 현재 화면 + 하단 명령바 + 캡쳐
  theme/                 테마(하이텔/도스/앰버) + 글꼴 + useTheme
  state/AppContext.tsx   화면 스택(내비게이션) + 설정 + 즐겨찾기/최근 (영속화)
  api/
    http.ts              요청 공통 상수(UA/헤더)
    types.ts             UI 데이터 모델
    parse.ts             HTML/JSONP 파서 (정규식 기반, RN 엔 DOMParser 없음)
    dcinside.ts          디시인사이드 fetch 클라이언트
    useData.ts           로딩/오류/재시도 훅 + 카테고리 캐시
  components/            TopBar, CmdBar, TypeWriter, PostImage, Lightbox,
                         CaptureScrollView, 공용 ui 프리미티브
  screens/               Connect/Main/Category/Gallery/Post/Settings
android/.../MediaSaverModule.kt   캡쳐 PNG 를 Pictures/DCTEL 에 저장하는 네이티브 모듈
docs/                    README 배너·스크린샷

알려진 제약

• 읽기 전용이에요. 글/댓글 작성·추천은 인증·캡차가 필요해서 지원하지 않아요.
• 데스크톱 User-Agent 로 요청해요(모바일 UA 면 m.dcinside.com 으로 리다이렉트돼서 구조가 달라져요).
• 디시 이미지/디시콘(dccon.php)은 Referer 가 없으면 403이 나서, 이미지 요청에 헤더를 붙여요.
• 매우 긴 글을 캡쳐하면 합성 비트맵이 커져서 메모리를 많이 쓸 수 있어요.