TL;DR
5가지 시행착오로 완성한 모바일코딩 최적화:
- 따옴표 입력 불편 → Plain text 실행으로 해결
- 한글자판 오타 → /ㄴㅅㅁ션 → /state 자동 변환으로 해결
- 키 입력 불가능 → 인터랙티브 버튼으로 해결
- 긴 응답 잘림 → 메시지 자동 분할로 해결
- 파일 확인 어려움 → /download 기능으로 해결
스마트폰에서도 Claude Code를 완벽하게 제어할 수 있는 UI최적화 완성!
1. 스마트폰 개발의 어려움
이전 포스트에서 스니펫 시스템과 인터랙티브 버튼을 다뤘습니다. 시리즈 마지막 편에서는 스마트폰에서 Claude Code를 완벽하게 활용하기 위해 겪은 시행착오와 해결책을 공유합니다.
1.1 모바일코딩이 어려운 이유
스마트폰에서 개발 작업을 하려면 여러 장벽이 있습니다:
물리적 제약:
├── 작은 화면 크기 (코드 가독성 저하)
├── 터치 키보드 (타이핑 속도 느림)
├── 특수문자 입력 불편 (따옴표, 백틱)
└── 마우스 없음 (정밀 조작 불가)
기술적 제약:
├── SSH 앱 사용 불편
├── 터미널 조작 어려움
├── 파일 전송 복잡
└── 긴 명령어 입력 실수
1.2 remote-claude의 목표
스마트폰에서도 데스크탑처럼 Claude Code를 사용하려면 UI최적화가 필수입니다:
| 데스크탑 | 스마트폰 (기존) | 스마트폰 (remote-claude) |
|---|---|---|
| 터미널 직접 접근 | SSH 앱 필요 | Slack 앱만 |
| 키보드 단축키 | 불가능 | 버튼 터치 |
| 긴 명령어 타이핑 | 오타 많음 | Plain text |
| 파일 탐색 | scp/sftp 필요 | /download |
이제 5가지 시행착오와 해결책을 하나씩 살펴보겠습니다.
2. 시행착오 1: 따옴표 입력 문제
2.1 문제 상황
처음 remote-claude를 스마트폰에서 사용할 때 가장 불편했던 점:
# 기존 명령어 형식
/ask "TypeScript 타입 에러 고쳐줘"
/run "npm run build && npm test"
# 스마트폰에서 따옴표 입력 과정
1. 특수문자 키 누르기
2. 따옴표 찾기 (길게 누르기 필요할 수도)
3. iOS는 "스마트 따옴표"로 자동 변환됨
4. 구문 오류 발생 ❌
스마트폰 키보드에서 " 입력은 생각보다 번거롭습니다. 특히 iOS의 “스마트 따옴표” 기능이 ""를 ""로 바꿔버려서 파싱 에러가 발생했습니다.
2.2 해결책: Plain text 실행
따옴표 없이 일반 텍스트만 입력하면 Claude Code로 전송되도록 구현했습니다:
// src/handlers/input-processor.ts
export function processDefaultInput(input: string): InputProcessingResult {
// Slack 멘션 필터링 (@user, @channel 제거)
const mentionFilterResult = filterSlackMentions(input.trim());
return {
stage: 4,
action: 'default-input',
shouldProcess: true,
processedInput: mentionFilterResult.cleanedInput,
};
}
2.3 모바일코딩 개선 효과
# 기존 (따옴표 필요)
/ask "코드 리뷰해줘"
/ask "TypeScript 에러 고쳐줘"
# 개선 (Plain text)
코드 리뷰해줘
TypeScript 에러 고쳐줘
스마트폰에서 자연스럽게 문장을 입력하면 됩니다. 모바일코딩의 첫 번째 장벽을 해결했습니다.
3. 시행착오 2: 한글자판 오타
3.1 문제 상황
스마트폰에서 Slack 메시지를 입력할 때, 한글자판 상태에서 실수로 명령어를 입력하는 경우가 많았습니다:
의도: /state (상태 확인)
실제 입력: /ㄴㅅㅁ션 (한글자판 상태)
의도: /download
실제 입력: /애쥐ㅐㅁㅇ (한글자판 상태)
스마트폰에서는 자판 전환이 번거롭고, 특히 빠르게 명령어를 입력하다 보면 자판 상태를 확인하지 못하는 경우가 많습니다.
3.2 해결책: 한글자판 자동 변환
한글자판 입력을 영문으로 자동 변환하는 시스템을 구현했습니다:
// src/utils/korean-mapper.ts
// 한글 → 영어 자판 변환 테이블
export const KOREAN_TO_ENGLISH_MAP: Record<string, string> = {
// 초성
ㄱ: 'r', ㄴ: 's', ㄷ: 'e', ㄹ: 'f', ㅁ: 'a',
ㅂ: 'q', ㅅ: 't', ㅇ: 'd', ㅈ: 'w', ㅊ: 'c',
// 중성
ㅏ: 'k', ㅑ: 'i', ㅓ: 'j', ㅕ: 'u', ㅗ: 'h',
ㅛ: 'y', ㅜ: 'n', ㅣ: 'l', ㅡ: 'm',
// ...
};
// 직접 매핑 테이블 (자주 쓰는 명령어)
export const KOREAN_COMMAND_MAP: Record<string, string> = {
'/ㄴㅅㅁ션': '/state',
'/애쥐ㅐㅁㅇ': '/download',
};
3.3 한글자판 처리 원리
한글 유니코드 분해 알고리즘을 활용합니다:
// 완성형 한글 분해 (예: '한' → ㅎ + ㅏ + ㄴ)
export function decomposeKorean(char: string): DecomposedKorean {
const charCode = char.charCodeAt(0);
const offset = charCode - 0xAC00; // 한글 시작점
// 초성: offset / (21 × 28)
// 중성: (offset % (21 × 28)) / 28
// 종성: offset % 28
return { initial, medial, final };
}
3.4 모바일코딩 개선 효과
입력: /ㄴㅅㅁ션
자동 변환: /state
결과: 상태 확인 정상 실행 ✅
한글자판 처리 덕분에 스마트폰에서 자판 전환 없이 명령어를 입력할 수 있습니다. UI최적화의 핵심 기능입니다.
4. 시행착오 3: 키 입력 불가
4.1 문제 상황
Claude Code가 사용자 입력을 기다릴 때 (예: Enter 키 대기), 스마트폰에서는 터미널에 직접 키를 전송할 방법이 없었습니다:
Claude Code: "계속하려면 Enter를 누르세요..."
스마트폰 사용자:
├── SSH 앱 열기? → 번거로움
├── Slack에 "enter" 입력? → Claude Code가 이해 못함
└── 포기? → 작업 중단 ❌
4.2 해결책: 인터랙티브 버튼
Slack Block Kit을 활용해 터치 한 번으로 키 입력이 가능한 버튼을 구현했습니다:
// src/bot/interactive-buttons.ts
export function createQuickActionButtons() {
return [
// 1행: 핵심 기능
{
type: 'actions',
elements: [
{ text: '📊 상태 확인', action_id: 'quick_state' },
{ text: '📥 파일 다운로드', action_id: 'quick_download' },
{ text: '🚫 작업 취소', action_id: 'cancel_job' },
],
},
// 2행: 키 입력
{
type: 'actions',
elements: [
{ text: '⏎ 엔터', action_id: 'send_enter' },
{ text: '⏎⏎ 엔터*2', action_id: 'send_enter_twice' },
{ text: '↑', action_id: 'send_up' },
{ text: '↓', action_id: 'send_down' },
{ text: '←', action_id: 'send_left' },
{ text: '→', action_id: 'send_right' },
],
},
];
}
4.3 인터랙티브 버튼 구성
| 버튼 | 기능 | 사용 시나리오 |
|---|---|---|
| 📊 상태 확인 | Claude Code 현재 화면 캡처 | 진행 상황 확인 |
| 📥 파일 다운로드 | 파일을 Slack으로 전송 | 로그 확인 |
| 🚫 작업 취소 | 실행 중인 작업 중단 | 잘못된 명령 취소 |
| ⏎ 엔터 | Enter 키 전송 | 확인 프롬프트 응답 |
| ↑↓←→ | 화살표 키 전송 | 메뉴 선택 |
4.4 모바일코딩 개선 효과
기존: 키 입력 불가능 → 작업 중단
개선: 버튼 터치 → Enter 전송 → 작업 계속 ✅
인터랙티브 버튼은 스마트폰에서 Claude Code를 완벽하게 제어할 수 있게 해주는 핵심 UI최적화 기능입니다.
5. 시행착오 4: 메시지 길이 제한
5.1 문제 상황
Claude Code의 응답이 길면 Slack 메시지 제한(4000자)에 걸립니다:
Claude Code 응답: 8000자 (코드 + 설명)
Slack 메시지 제한: 4000자
결과: 메시지 전송 실패 ❌
특히 코드 리뷰나 긴 설명이 필요한 작업에서 자주 발생했습니다.
5.2 해결책: 메시지 자동 분할
긴 응답을 자동으로 분할해서 전송하는 시스템을 구현했습니다:
// src/utils/message-splitter.ts
export function splitMessage(content: string, maxLength: number = 2500): SplitMessageResult {
// 안정성을 위해 2500자로 설정 (4000자 제한보다 여유)
const messages: string[] = [];
let currentPos = 0;
while (currentPos < content.length) {
let splitLength = Math.min(maxLength, content.length - currentPos);
// 줄바꿈 기준 자연스러운 분할
const chunk = content.substring(currentPos, currentPos + splitLength);
const lastNewlineIndex = chunk.lastIndexOf('\n');
if (lastNewlineIndex > 0) {
splitLength = lastNewlineIndex + 1;
}
messages.push(content.substring(currentPos, currentPos + splitLength));
currentPos += splitLength;
}
return { messages, totalParts: messages.length };
}
5.3 메시지 분할 전략
8000자 응답 처리:
1. 분할: [2500자] + [2500자] + [2500자] + [500자]
2. 표시: [1/4], [2/4], [3/4], [4/4]
3. 전송: 500ms 간격 순차 전송
4. 버튼: 마지막 메시지에만 추가
결과:
[1/4] 첫 번째 부분...
[2/4] 두 번째 부분...
[3/4] 세 번째 부분...
[4/4] 마지막 부분... + [📊] [📥] [🚫] 버튼
5.4 모바일코딩 개선 효과
- 긴 응답 완전 수신: 길이 제한 없이 모든 응답 확인
- 자동 처리: 사용자 개입 불필요
- 진행 표시: [1/4] 형식으로 현재 위치 확인
- 순차 전송: 500ms 간격으로 읽기 편하게 도착
6. 시행착오 5: 파일 확인 어려움
6.1 문제 상황
모바일코딩 중 로그 파일이나 설정 파일을 확인해야 할 때:
기존 방법:
1. SSH 앱으로 서버 접속
2. cat logs/app.log 실행
3. 작은 화면에서 스크롤...
4. 너무 불편해서 포기 ❌
스마트폰에서 파일 내용을 확인하는 건 거의 불가능에 가까웠습니다.
6.2 해결책: /download 기능
파일을 Slack으로 직접 전송하는 기능을 구현했습니다:
// src/handlers/file-download.ts
export async function handleFileDownload(
app: App,
channelId: string,
channelConfig: ChannelConfig,
filePath: string
): Promise<void> {
// 1. 보안 검증 (8단계)
const validation = validateFilePath(channelConfig.projectPath, filePath);
// 2. 파일 업로드
await app.client.files.uploadV2({
channel_id: channelId,
file: fs.createReadStream(resolvedPath),
filename: path.basename(resolvedPath),
title: `${channelConfig.projectName}: ${filePath}`,
});
}
6.3 보안 검증 (8단계)
파일 다운로드에는 철저한 보안 검증이 필요합니다:
// src/utils/file-security.ts
export function validateFilePath(projectPath: string, userInputPath: string) {
// 1. 빈 경로 검증
// 2. 절대 경로 변환
// 3. Path traversal 방지 (../../etc/passwd 차단)
// 4. 민감한 파일 차단 (.env, .key, .pem, SSH 키)
// 5. 파일 존재 확인
// 6. 디렉토리 차단
// 7. 파일 크기 제한 (10MB)
// 8. 성공 반환
}
6.4 모바일코딩 개선 효과
# 로그 확인
/download logs/app.log
→ Slack에 파일 업로드
→ 모바일에서 바로 확인 ✅
# 설정 파일 확인
/download config/settings.json
→ Slack에 파일 업로드
→ 모바일에서 바로 확인 ✅
7. 최종 완성: 스마트폰 최적화 현황
7.1 5가지 시행착오 요약
| 문제 | 해결책 | 파일 |
|---|---|---|
| 따옴표 입력 불편 | Plain text 실행 | input-processor.ts |
| 한글자판 오타 | 자동 변환 | korean-mapper.ts |
| 키 입력 불가 | 인터랙티브 버튼 | interactive-buttons.ts |
| 긴 응답 잘림 | 메시지 자동 분할 | message-splitter.ts |
| 파일 확인 어려움 | /download 기능 | file-download.ts |
7.2 모바일코딩 워크플로우
스마트폰에서 remote-claude를 사용하는 완벽한 워크플로우:
1. Slack 앱 열기 (프로젝트 채널)
2. 작업 요청 (Plain text)
"TypeScript 에러 고쳐줘"
3. 진행 상황 확인 (버튼)
📊 버튼 터치 → Claude Code 화면 확인
4. 추가 입력 필요 시 (버튼)
⏎ 버튼 터치 → Enter 전송
5. 결과 확인 (자동 분할)
[1/3], [2/3], [3/3] 메시지 순차 수신
6. 로그 확인 필요 시
/download logs/build.log
→ Slack에서 파일 확인
7.3 UI최적화 효과 비교
| 항목 | 최적화 전 | 최적화 후 |
|---|---|---|
| 명령어 입력 | 따옴표 + 정확한 구문 | 일반 문장 |
| 자판 전환 | 필수 | 불필요 |
| 키 입력 | SSH 앱 필요 | 버튼 터치 |
| 긴 응답 | 잘림/실패 | 자동 분할 |
| 파일 확인 | scp/sftp | Slack 다운로드 |
| 전체 UX | 데스크탑의 30% | 데스크탑의 90% |
8. 시리즈를 마치며
8.1 remote-claude 시리즈 요약
5편의 시리즈를 통해 Slack으로 Claude Code를 원격 제어하는 방법을 다뤘습니다:
| Day | 주제 | 핵심 내용 |
|---|---|---|
| 1 | 소개 + 빠른 시작 | 아키텍처, 5분 설정 |
| 2 | Slack Bot 설정 | 권한, Socket Mode |
| 3 | 여러 프로젝트 관리 | 작업 큐, 채널 분리 |
| 4 | 생산성 극대화 | 스니펫, 버튼 |
| 5 | 스마트폰 최적화 | 모바일코딩 완성 |
8.2 앞으로의 계획
remote-claude는 계속 발전합니다:
Phase 2 계획:
├── 이미지 지원 (스크린샷 공유)
├── 파일 업로드 (코드 파일 전송)
├── 다중 세션 (하나의 채널에서 여러 세션)
└── 웹 대시보드 (통계 및 모니터링)
8.3 GitHub 저장소
전체 소스 코드와 설치 가이드:
- GitHub: https://github.com/dh1789/remote-claude
- 라이선스: MIT (자유롭게 사용 가능)
8.4 마무리
스마트폰에서도 Claude Code를 완벽하게 사용할 수 있게 된 것은 많은 시행착오 덕분입니다. 모바일코딩의 한계를 하나씩 극복하며 만들어낸 UI최적화 기능들이 여러분의 원격 개발 경험을 더 편리하게 만들어 줄 것입니다.
카페에서, 지하철에서, 침대에서… 어디서든 Claude Code와 함께하세요! 🚀
시리즈 네비게이션
- Day 1: 소개 + 빠른 시작
- Day 2: Slack Bot 설정 완전 가이드
- Day 3: 여러 프로젝트 동시 관리
- Day 4: 생산성 극대화: 스니펫과 버튼
- Day 5: 스마트폰에서 완벽 활용 ← 현재 글
참고 자료
Leave A Comment