작업을 시작하는 데
필요한 모든 것.

브라우저에서 OSCODE와 함께 일하기

터미널의 실제 에이전트를 대화형 웹 화면에서 사용합니다. 대화 목록, 고정 입력창, 실시간 응답, 복사, 중단과 실행 활동 패널을 제공합니다. Node.js 22 이상이 필요하며 작업할 프로젝트 폴더에서 실행하세요.

npx @choijinwon/oscode@0.19.0 --web
# 키 없이 실제 파일 목록을 읽는 데모
npx @choijinwon/oscode@0.19.0 --web --demo

프로젝트를 지정하려면 --cwd /path/to/project를 추가하세요. 터미널을 켜 둔 상태에서 출력된 로컬 주소로 접속합니다. 기존 모델 설정과 인증 정보를 재사용하며 API 키를 브라우저에 전달하지 않습니다. 데모는 AI 코딩 모델을 호출하지 않습니다.

Enter로 전송하고 Shift+Enter로 줄을 바꿉니다. 실행 중에도 다음 요청을 입력해 대기열에 등록할 수 있습니다. 같은 서버에서 최대 8개 대화를 만들고 전환할 수 있습니다.

웹 CLI 상세 가이드 ↗

목록 · 승인 · 예정 · 작업 ID

한 프로젝트에서는 작업을 하나씩 실행합니다. 예약 시각은 가장 빠른 시작 가능 시각이며 앞 작업과 승인이 끝나야 실행됩니다. 응답 완료는 에이전트 턴 종료를 뜻하며 업무 성공이나 결과물 품질을 보장하지 않습니다.

작업 상세 타임라인

작업 카드의 작업 상세를 누르세요. 왼쪽 실행 단계를 선택하면 오른쪽에 실제 입력, 승인 시 변경 미리보기, 실행 결과, 소요 시간이 표시됩니다. 시간에는 승인 대기가 포함됩니다. 대화별 최근 최대 100개 도구 기록을 표시하며 Esc로 닫을 수 있습니다.

실시간 브라우저 작업과 직접 제어

1. 왼쪽 실시간 브라우저 열기 버튼을 누르고 개발 중인 웹 페이지 주소를 입력합니다.
2. 별도 Chromium의 실제 화면을 약 1초마다 확인합니다. 직접 제어에서는 클릭·휠·하단 텍스트 입력·키 전송을 사용할 수 있습니다.
3. 에이전트에게 넘기기를 선택하면 사용자 조작이 잠깁니다. 자연어로 브라우저 작업을 요청하고, 각 동작의 승인 요청을 확인하세요.
4. 브라우저 직접 제어로 제어권을 가져오거나 중지로 브라우저를 종료합니다. 연결된 에이전트 작업에도 취소를 요청합니다.

npx playwright install chromium

Chromium을 시작할 수 없다는 안내가 나올 때 설치하세요. 창의 ×는 보기만 닫으며 실행을 중지하지 않습니다. 대화·승인 요청 보기로 승인 카드에 돌아갈 수 있습니다. 이미 시작된 브라우저 동작은 제어권 전환 중 마무리될 수 있습니다.

개인 브라우저 로그인·쿠키는 공유하지 않습니다. 현재 1280×800 단일 탭을 지원하며 팝업·다운로드·파일 업로드·브라우저 확인 대화상자·전체 데스크톱 조작은 지원하지 않습니다. 모델에는 제한된 본문·컨트롤 정보를 전달하며 화면 영상 자체를 전달하지 않습니다. 페이지를 열면 대상 사이트에 네트워크 요청이 발생합니다.

영상에서 필요한 순간 찾기

터미널 대화에서 /ml을 입력하고 영상 검색·분석으로 이동하세요. MP4/WebM/MOV를 불러오고 SRT/VTT 자막, 시점 메모, Tesseract 화면 OCR로 검색 색인을 만듭니다. 글자 검색 결과를 누르면 해당 시점으로 이동하며 프레임을 PNG로 저장할 수 있습니다.

최대 5개·파일당 100 MiB·합계 300 MiB·영상당 2시간. OCR은 최대 120초 구간의 12개 프레임을 샘플링합니다. Tesseract와 필요한 언어 데이터가 설치되어 있어야 합니다.

영상 검색 상세 가이드 ↗

반도체 ML 모델 검사

명령어를 외우지 않아도 됩니다. 입력창 아래 모델 검사 버튼을 클릭하세요. 좁은 화면에서는 검사로 표시됩니다. 작성 중인 초안은 유지됩니다.

설치와 시작

npm install -g @choijinwon/oscode@0.19.0
oscode

Node.js 22 이상이 필요합니다. 실행 중인 구버전은 종료한 뒤 다시 시작하세요. BUILD 모드와 기존 브라우저 실행 승인 정책을 따릅니다.

• 바로 열기: 입력창의 모델 검사 버튼
• 자연어: “반도체 검사 화면 열어줘” 또는 “모델 검사 화면 보여주세요”
• 메뉴: 작업 시작 → 반도체 ML 모델 검사
• 선택 사항: /ml 열기, /ml close 로컬 서버 종료

검사 화면 사용 순서

1. ‘합성 샘플 체험’으로 시작하거나 PNG·JPEG·WebP 이미지를 선택합니다. 최대 10 MiB·25 MP입니다.
2. ‘모델 연결 설정’을 펼쳐 A/B 슬롯의 JSON 규격을 적용합니다.
3. 각 슬롯의 ‘결과 JSON 가져오기’를 사용하거나, 등록한 서버에 ‘이미지 전송 · 추론’을 실행합니다. 서버 주소를 확인한 뒤에만 전송됩니다.
4. ‘결과 표시’로 오버레이를 켜고 끕니다. 임계값은 표시 필터이며 합격·불합격 판정이 아닙니다.
5. ‘결과 JSON 내보내기’로 모델 규격·버전·이미지 해시·원본 결과를 저장합니다. 이미지 파일은 포함하지 않습니다.

실제 서버 연결과 제한

서버가 전처리와 추론을 수행하고 원본 이미지 좌표로 결과를 반환해야 합니다. CORS 및 OSCODE 요청·응답 계약이 필요합니다. 모델 ID·버전·이미지 해시·크기·라벨·좌표를 검사합니다. 현재 API 키 저장·OAuth·픽셀 마스크/RLE·정답 기반 정확도 평가는 지원하지 않습니다.

현재 화면은 한국어입니다. 데이터는 페이지 메모리에 보관되어 새로고침하면 초기화됩니다. 브라우저를 닫아도 로컬 서버는 유지되며, CLI 종료 시 함께 닫힙니다. JSON 결과의 출처나 실제 추론 여부를 보증하지는 않습니다.

요청·응답 계약과 전체 연동 가이드 →

결과 기반 서비스 운영

AI로 기능 블록을 조립하고, 전문 작업을 실행해 견적·결과물·고객 검수 승인 기록을 남깁니다.

첫 전문 작업 2종

• 반도체: 검사 CSV → LOT별 수율 보고서. 미검사는 제외하며 불량 원인 규명이나 공정 최적화를 보장하지 않습니다.
• ERP: KRW 전표 JSON → 전표별 차대변 불일치 보고서. 정수 문자열과 BigInt로 계산하며 SAP 전기·세무 검토·회계 승인을 수행하지 않습니다.

견적 → 실행 → 결과 확인 → 승인 기록

/packs list
/jobs quote erp-voucher {"parameters":{"input":"examples/packs/ledger.json","output":"erp-result.md"},"priceKrw":"10000"}
/jobs show
/jobs run
/jobs accept

10,000원은 기능 확인용 예시이며 권장 가격이나 판매 가격이 아닙니다. 위 명령은 npm 0.18.0 이상 OSCODE의 콘솔에 입력합니다.

delivered는 로컬 결과 파일 준비 상태이며 고객에게 자동 전송했다는 뜻이 아닙니다. /jobs accept는 운영자가 고객 검수 승인을 확인했다고 기록합니다. 고객 본인 인증을 대체하지 않습니다. ready_to_invoice는 청구 준비 기록이며 결제나 세금계산서 발행이 아닙니다.

실패·변경·중복 처리

블록 실행 성공, 비어 있지 않은 결과 파일과 해시를 확인합니다. 납품 이후 파일이 바뀌면 승인을 막고, 실패·취소 작업은 청구 대상에서 제외합니다. 같은 작업의 승인 기록은 중복 생성하지 않습니다. 업무 정확성과 고객 검수는 별도이며 로컬 기록은 신뢰할 수 있는 서버 결제 원장이 아닙니다.

블록과 전문 팩 재사용

/blocks plan 요청으로 모델이 형식이 맞는 블록을 연결하고 /blocks run으로 실행합니다. 등록 블록 13종과 샘플 팩 2종을 제공합니다. 실행 단계는 모델 호출 없이 처리합니다. /packs build·/packs import·/packs use로 버전이 있는 납품 파일을 만들고 프로젝트별 경로를 설정할 수 있습니다.

기본 팩은 MIT 샘플입니다. 내용 해시는 손상 검출용이며 판매자 서명·구매 인증·DRM은 아닙니다. 드래그 연결 화면과 온라인 주문 서비스는 아직 없습니다.

전문 팩·RaaS 전체 운영 가이드 ↗ · 블록 연결 계약 ↗ · 샘플 전표 JSON ↗

설치와 첫 실행

Node.js 22 이상이 필요합니다. 작업할 프로젝트 폴더에서 아래 명령으로 실행하세요.

npx @choijinwon/oscode@0.19.0 --agent frontend

이미 내려받은 프로젝트에서는 해당 폴더로 이동한 뒤 실행하세요. 홈 폴더에서 node bin/oscode.js를 실행하면 파일을 찾을 수 없습니다.

배포 버전 안내

npx @choijinwon/oscode@0.19.0

기존 소스 업데이트는 로컬 변경을 확인한 뒤 Git으로 진행하세요. 자체 판단 엔진은 0.14.0부터 지원합니다.

모델 연결

콘솔에서 설정을 열고 공급자와 모델을 선택하세요. API 키는 별도 숨김 입력으로 등록합니다.

/settings
/key

ChatGPT 연결은 설정의 계정 로그인 경로를 사용합니다. Anthropic·OpenAI 호환 API·OpenRouter·로컬 모델은 각 공급자 설정에 맞춰 연결하세요. 키나 로그인 정보는 대화에 붙여넣지 마세요.

첫 번째 작업

1. /map Button으로 관련 코드를 찾습니다.
2. @src/Button.tsx 모바일 줄바꿈을 수정해줘처럼 범위를 지정합니다.
3. 계획·변경 내용을 검토하고 승인합니다.
4. /review http://localhost:3000으로 실제 결과를 확인합니다.

파일 경로와 서버 주소는 내 프로젝트에 맞게 바꾸세요.

실행과 승인

0.18.0부터 PLAN 모드 전환을 제거했습니다. 작업 요청을 바로 입력하며 파일 수정·명령 실행에는 승인 정책이 적용됩니다. 0.17.0 사용자는 업데이트하세요.

승인 방식

/approval 또는 ＋ → 승인에서 현재 에이전트의 승인 방식을 선택합니다.

자동 승인된 셸 명령은 프로젝트 밖에도 영향을 줄 수 있습니다. 프로젝트 금지 규칙은 계속 적용됩니다. 승인 선택은 새 에이전트로 전달되지 않습니다.

수정 후 검증

Git HEAD 대비 변경 파일과 설정한 프로젝트 검사를 확인하고 브라우저 진단을 함께 수행합니다. Git 저장소에 HEAD 커밋이 필요합니다.

/review http://localhost:3000
/review show

실행 중인 개발 서버 URL을 입력하세요. 아래 설정은 해당 스크립트가 있는 프로젝트의 oscode.json 예시입니다.

{
  "verify": {
    "scripts": ["typecheck", "lint", "test"],
    "url": "http://localhost:3000"
  }
}

HTML·JSON 보고서는 .oscode에 저장됩니다. 결과는 검사 당시 기준이며 변경 후에는 다시 실행하세요.

컴포넌트 UI 상태 점검

실제 브라우저 동작 검증

/states run http://localhost:3000 examples/ui-states.json으로 클릭·입력 뒤 로딩 표시와 숨김, 버튼 활성·비활성, 오류·빈 결과 안내, 요소 개수를 확인합니다. 모바일·태블릿·데스크톱 결과와 화면 PNG·trace 기록을 저장합니다.

실행 중인 테스트 서버와 프로젝트에 맞춘 시나리오 선택자가 필요합니다. 예시 JSON을 그대로 모든 앱에 사용할 수는 없습니다. BUILD 및 실행 승인, Playwright/Chromium이 필요하며 API 키는 필요 없습니다. 지정한 확인 조건만 검증하고 실패 뒤 단계는 중단합니다. 실제 서버 데이터가 바뀔 수 있으므로 테스트 환경을 사용하세요.

코드에서 상태 후보 찾기

/states src/components/Search.tsx로 로딩·오류·빈 결과·비활성 상태 관련 코드 위치와 화면 확인 체크리스트를 확인합니다. React, Vue, Angular, Svelte 소스 파일을 지원하며 Angular 외부 HTML은 별도로 지정하세요.

API 키 없이 실행합니다. 단일 파일 최대 32,000자, 상태별 최대 3개 위치를 분석합니다. 문자열 기반 후보이며 실제 동작의 통과·실패 판정이 아닙니다. 주석·문자열 오탐과 import·별도 템플릿 누락이 가능합니다. npm 0.10.0 및 최신 GitHub 소스에서 사용할 수 있습니다.

디자인 스튜디오 가이드

브라우저에서 디자인을 살펴보고, 내 프로젝트에 맞는 컴포넌트 코드를 만드세요. 갤러리·테마·팀 라이브러리는 모델 키 없이 사용할 수 있습니다.

1. 갤러리 열기

OSCODE 안에서 입력

/design gallery react

BUILD 모드에서 실행하세요. 기본 브라우저에 열린 갤러리에서 디자인을 검색하고 프레임워크·스타일·크기·색상·모서리를 선택합니다.

2. 선택한 코드 확인·생성

갤러리의 이 디자인 선택을 누른 뒤 터미널에서 이어갑니다.

OSCODE 안에서 입력

/design code
/design apply src/components/ProfileForm.jsx

파일 경로는 내 프로젝트의 기존 폴더로 바꾸세요. 컴포넌트와 CSS를 새 파일로 만들며 기존 파일은 덮어쓰지 않습니다. 각 파일은 현재 쓰기 승인 설정을 따릅니다.

3. 앱에 연결하고 검증

생성한 컴포넌트를 앱에 import하고 실제 데이터·이벤트를 연결해야 합니다. 모델을 연결했다면 아래처럼 요청할 수 있습니다.

모델 연결 후 요청 예시

방금 생성한 ProfileForm을 설정 페이지에 연결하고, 기존 테스트로 검증해줘.

개발 서버를 실행한 뒤 /inspect http://localhost:3000으로 화면을 확인하거나 브라우저 시나리오를 실행하세요. 검사 URL과 선택자는 프로젝트에 맞게 지정해야 합니다.

갤러리는 공통 HTML 동작 미리보기입니다. 실제 프레임워크 렌더링은 앱에서 확인하세요. 선택·Ctrl+C 또는 5분 제한으로 갤러리 연결이 종료됩니다.

40종 컴포넌트와 화면 조합

브라우저 없이 선택하기

OSCODE 안에서 입력

/design list
/design select vue/settings-form
/design code

/design select 프레임워크/ID 형식으로 고릅니다. 예를 들어 react/login-form은 로그인 폼, svelte/search-results는 검색 화면입니다.

상태별 미리보기 범위

기본·포커스·비활성·로딩·오류·다크 여섯 상태는 스타일 예시입니다. 상태 예시를 생성 코드에 자동으로 저장하거나 실제 API 요청을 실행하지 않습니다. 폼·탭·모달의 기본 브라우저 동작은 조작할 수 있습니다.

기본 table은 정적 표이며 검색·정렬은 admin-table을 사용합니다. 로그인·저장 서버 연결과 선택값 제한 로직은 앱에서 구현하세요. MUI·Ant Design·Bootstrap은 기존 컴포넌트 가이드 ↗에서 확인할 수 있습니다.

모바일 화면도 직접 고르고 적용하세요.

하단 탭바·바텀시트·입력 폼·하단 액션·카드 목록을 React·Vue·Angular·Svelte 코드로 생성합니다. 모바일 웹용이며 프로젝트의 색상·간격·모서리 설정을 공유합니다.

OSCODE 안에서 입력

/design mobile react

화면 크기와 입력 환경 살펴보기

1. 미리보기 너비를 360·390·430 CSS px로 바꿉니다. 좁은 브라우저에서는 미리보기 영역을 가로로 스크롤합니다.
2. 하단 여백 34px와 키보드 영역 예시로 화면이 줄어드는 상황을 살펴봅니다.
3. 가로 넘침, 44px 미만 터치 영역 수, 포커스된 입력창 가림 여부를 확인합니다.
4. 이 디자인 선택 후 터미널에서 코드를 확인하고 새 파일로 생성합니다.

브라우저 없이 바텀시트 선택

/design select vue/bottom-sheet
/design code
/design apply src/components/ActionSheet.vue

앱에 연결할 때

출력 폴더는 미리 만들어두세요. 버튼은 최소 44×48px, 입력 글자는 16px이며 자동완성·키보드 힌트를 제공합니다. 생성 CSS는 env(safe-area-inset-bottom, 0px)를 사용합니다. 앱 viewport의 viewport-fit=cover 설정과 실기기 동작을 함께 확인하세요.

하단 탭바와 액션은 컴포넌트 컨테이너 안에서 고정됩니다. 바텀시트는 닫기 버튼·Esc를 지원하며 스와이프 닫기는 포함하지 않습니다. 목록 로딩은 앱에서 루트의 aria-busy를 전환해 연결합니다. 실제 저장·공유·데이터 요청과 앱 import는 이어서 구현하세요.

관리자 화면의 기본 흐름을 빠르게 만드세요.

사이드바 레이아웃·대시보드·데이터 테이블·사용자 초대 폼·활동 로그를 제공합니다. React·Vue·Angular·Svelte와 기존 프로젝트 테마를 지원합니다.

OSCODE 안에서 입력

/design admin react

관리자 5종을 먼저 보여줍니다. 검색창의 “관리자”를 지우면 전체 디자인을 확인할 수 있습니다. 모델 키 없이 선택·코드 생성이 가능합니다.

직접 조작할 수 있는 기능

• 레이아웃: 메뉴 접기·펼치기와 선택 표시
• 대시보드: 7일·30일 선택에 따른 카드와 목표 달성률 변경
• 테이블: 예시 8명 검색·상태 필터·이름 정렬·페이지당 3행·여러 행 선택·상세 패널
• 초대 폼: 이름·이메일 검증과 역할별 안내
• 활동 로그: 내용 검색·유형 필터·빈 결과 표시

테이블의 전체 선택은 현재 페이지에만 적용합니다. 페이지 이동과 정렬 후에도 선택은 유지하며 검색·상태 필터·초기화 시 해제됩니다. 선택 항목 검토는 선택한 모든 페이지의 ID를 이벤트로 전달합니다. 좁은 화면에서는 표 영역 안에서 가로로 스크롤합니다.

테이블 코드 생성 예시

/design select react/admin-table
/design code
/design apply src/components/MemberTable.jsx

실제 서비스에 연결하기

출력 폴더를 미리 만든 뒤 생성한 컴포넌트와 CSS를 앱에 연결하세요. 메뉴는 navigate, 기간은 period, 행 검토는 bulk, 역할 안내는 role-preview, 초대 폼은 submit 이벤트를 전달합니다. 프레임워크별 action 방식과 이벤트 값은 상세 가이드에서 확인할 수 있습니다.

회계 전표 테이블과 입력 그리드

회사·통화를 구분해 조회하고, 분개를 셀에서 편집하세요. React·Vue·Angular·Svelte로 생성하는 회계 UI 예제입니다.

OSCODE 안에서 입력

/design erp react

전표 조회 테이블

erp-ledger는 전표 번호·회사 코드·회계연도·전기일·계정·원가센터·통화·차변·대변·상태를 표시합니다. 검색·필터·정렬·행 선택과 회사·통화별 표시 행 합계를 제공합니다. 필터 변경 시 선택을 해제합니다.

편집형 전표 그리드

• 셀 편집: 행 추가·삭제, Tab·Enter·Alt+방향키 이동
• 엑셀 붙여넣기: 선택 셀부터 탭·줄바꿈 구분 데이터 입력, 최대 200행. 형식 오류 시 기존 값을 유지하며 전체 취소
• 금액 검증: 차변·대변 한쪽 입력, 필수 계정, 2행 이상, 대차 일치
• 정밀도: 정수 최소 단위 계산. KRW·JPY 소수 0자리, USD·EUR 2자리. 서로 다른 통화를 합산하지 않음
• 스크롤: 표 안에서 가로·세로 이동, 머리글과 첫 식별 열 고정

전표 통화는 금액 입력 전에 선택합니다. 숫자를 입력하면 통화 선택이 잠깁니다. 소수 초과·음수·지수 표기는 거부하며 환율 환산은 하지 않습니다. 조회 합계는 표시된 행 기준이므로 전표 전체 검증 결과와 구분하세요.

입력 그리드 생성 · 출력 폴더는 미리 만드세요

/design select react/erp-journal
/design code
/design apply src/components/JournalGrid.jsx

정돈된 업무 화면

주요 작업 버튼과 보조 버튼을 구분하고, 상태 배지·금액 정렬·합계 카드로 읽는 순서를 정리했습니다. 프로젝트 테마를 유지하며 모바일에서는 표 안에서 스크롤합니다. 개선된 UI는 갤러리와 새로 생성한 파일에 적용됩니다.

반복 조회와 입력 실수 복구

• 보기 저장: 검색·필터·정렬·열 표시·행 간격을 이름으로 저장하고 적용합니다. 최대 8개, 같은 이름은 갱신합니다.
• 열과 행 간격: 전기일·계정·적요·원가센터·상태를 선택해 표시합니다. 전표·회사·연도·통화·금액은 유지합니다.
• CSV 내보내기: 선택한 표시 행 우선, 없으면 현재 조회 결과를 내보냅니다. 숨긴 열도 포함하고, 수식 시작 문자를 작은따옴표로 처리합니다.
• 20단계 복구: 셀 연속 입력·여러 셀 붙여넣기·행 추가/삭제를 되돌리거나 다시 실행합니다. Ctrl/⌘+Z, Ctrl+Y 또는 Ctrl/⌘+Shift+Z.
• 오류 이동: 이전/다음 오류 버튼으로 헤더·오류 행에 포커스를 옮깁니다. 변경된 초안은 저장 전 상태로 표시합니다.

보기 설정만 브라우저에 저장합니다. 브라우저 저장이 막힌 미리보기에서는 현재 화면에서만 유지합니다. 전표 입력과 복구 이력은 화면을 닫으면 사라집니다. CSV의 긴 번호·정밀 금액은 Excel에서 텍스트 열로 가져오세요. XLSX 내보내기와 실제 전표 저장은 별도입니다.

SAP Fiori의 보기 관리와 AG Grid의 편집 복구·CSV 설계를 참고해 선정했습니다. 공식 자료 기반 기능 분석과 후속 범위 ↗

SAP 연결은 앱의 서버에서

검증된 초안은 erp-draft 이벤트로 회사 코드·전기일·통화·분개를 전달합니다. 금액은 debitMinor·creditMinor 정수 문자열과 scale로 읽습니다. 예: USD의 30, scale 2는 0.30입니다.

클릭과 화면 변화에 자연스러운 반응을 더하세요.

아코디언·드롭다운 액션·되돌리기 알림·단계별 입력 폼·구간 선택·순서 변경 목록을 직접 조작하고 코드로 가져가세요. 모델 키 없이 사용할 수 있습니다.

OSCODE 안에서 입력

/design interact react

새로운 인터랙션 6종

• 아코디언: Enter·Space로 내용 펼치기와 접기
• 드롭다운 액션: 작업 선택·방향키 이동·바깥 클릭·Esc 닫기
• 되돌리기 알림: 로컬 보관·취소·닫기·다시 보기
• 단계별 폼: 이름·이메일 검증, 이전 단계 이동, 입력 확인
• 구간 선택: 라디오·방향키 선택에 따라 결과 전환
• 순서 변경: 위·아래 버튼 정렬, 포커스 유지와 변경 안내

단계별 폼 생성 예시 · 출력 폴더는 미리 만드세요

/design select vue/step-form
/design motion reduced
/design code
/design apply src/components/ProjectSteps.vue

react 대신 vue·angular·svelte를 선택할 수 있습니다. 메뉴는 menu-action, 폼 완료는 step-complete, 보기 선택은 segment, 정렬은 reorder 이벤트로 앱에 연결합니다.

데이터는 이 화면에서만 바뀌는 예시이며 서버 저장·공유 요청은 보내지 않습니다. 실제 API·오류·중복 제출 처리는 앱에서 연결하세요. 드롭다운은 브라우저 Popover API 지원이 필요하며 목록 정렬은 드래그가 아닌 버튼 방식입니다.

움직임 강도 선택

갤러리의 인터랙션 선택에서 강도를 고릅니다. 선택한 설정은 React·Vue·Angular·Svelte 생성 코드에도 반영됩니다.

• 기본: 버튼 호버·눌림 반응과 관리자·인터랙션 화면의 짧은 이동·페이드
• 은은하게: 이동·확대 없이 색상 변화와 짧은 페이드
• 끄기: 애니메이션을 생략하며 선택 강조·포커스 표시·버튼 동작은 유지

운영체제에서 움직임 줄이기를 켜면 해당 설정을 우선합니다. 별도 애니메이션 라이브러리가 필요하지 않으며 입력·필터·페이지 이동은 효과가 끝나기를 기다리지 않습니다.

터미널에서 강도 지정

/design select react/admin-table
/design motion reduced
/design code

사용자 상세 패널

관리자 테이블의 이름을 누르면 오른쪽 패널에 이름·이메일·팀·상태를 표시합니다. Enter·Space로 열고 닫기 버튼 또는 Esc로 닫습니다. 닫은 뒤 원래 버튼으로 포커스가 돌아가며 검색·페이지·선택 상태는 유지합니다.

선택한 행은 배경색으로 구분합니다. 메뉴 전환, 통계 기간 변경, 목록 갱신, 역할 안내와 폼 피드백에도 효과가 적용됩니다.

프레임워크별 적용

/design select react/form
/design code
/design apply src/components/ProfileForm.jsx

/design select vue/form
/design code
/design apply src/components/ProfileForm.vue

/design select angular/form
/design code
/design apply src/components/ProfileForm.ts

/design select svelte/form
/design code
/design apply src/components/ProfileForm.svelte

프레임워크 패키지를 자동 설치·업그레이드하지 않습니다. 프로젝트 선언 버전과 선택한 디자인이 다르면 먼저 설정을 확인하세요. 예제의 출력 폴더는 미리 존재해야 합니다.

Angular에는 호출자가 고유하고 안정적인 id를 전달해야 합니다. Vue 앱을 따로 여러 개 마운트한다면 앱별 idPrefix를 설정하세요. 생성 코드는 네이티브 DOM이 입력 상태를 관리하는 출발점이며, 앱의 폼 라이브러리에 맞게 확장할 수 있습니다.

제출 이벤트의 form, 입력 이벤트의 control은 DOM 요소입니다. 실제 값은 앱에서 읽어 처리하세요. 기본 코드는 입력값을 기록하거나 서버에 전송하지 않습니다. 이벤트 상세 가이드 ↗

공통 스타일 · 페이지별 재사용

한 번 만든 DesignTheme을 여러 페이지에서 가져다 쓰세요. 공통 색상·글꼴·모서리·간격은 한 파일에서 관리하고, 필요한 페이지나 영역만 바꿀 수 있습니다. React·Vue·Angular·Svelte 모두 지원하며 추가 스타일 라이브러리는 필요하지 않습니다.

OSCODE 안에서 입력 · 출력 폴더를 먼저 만드세요

/design theme code react
/design theme component react src/components/DesignTheme.jsx
/design select react/button
/design apply src/components/DesignButton.jsx

가까운 영역의 토큰 → 부모 테마 → 공통 CSS → 컴포넌트 생성 기본값 순서로 적용합니다. 다른 페이지와 테마 바깥의 디자인에는 영향을 주지 않습니다. 버튼 표현·크기·모션은 각 디자인의 설정을 유지합니다.

페이지 코드 · 필요한 프레임워크를 선택하세요

아래 예시는 공통 버튼을 재사용합니다. 경로는 실제 페이지 위치에 맞게 조정하세요.

import DesignTheme from './components/DesignTheme.jsx';
import DesignButton from './components/DesignButton.jsx';

export default function Page() {
 return <DesignTheme tokens={{ accent: '#4338ca', radius: '20px' }}>
  <DesignButton />
  <DesignTheme tokens={{ accent: '#0f766e' }}>
   <DesignButton />
  </DesignTheme>
 </DesignTheme>;
}

<script setup>
import DesignTheme from './components/DesignTheme.vue';
import DesignButton from './components/DesignButton.vue';
</script>
<template>
 <DesignTheme :tokens="{ accent: '#4338ca', radius: '20px' }">
  <DesignButton />
  <DesignTheme :tokens="{ accent: '#0f766e' }"><DesignButton /></DesignTheme>
 </DesignTheme>
</template>

import { Component } from '@angular/core';
import { DesignThemeComponent } from './components/DesignTheme';
import { DesignButtonComponent } from './components/DesignButton';

@Component({
 selector: 'app-page', standalone: true,
 imports: [DesignThemeComponent, DesignButtonComponent],
 template: `<oscode-design-theme [tokens]="{accent:'#4338ca',radius:'20px'}">
  <oscode-design-button id="page-primary" />
  <oscode-design-theme [tokens]="{accent:'#0f766e'}">
   <oscode-design-button id="page-secondary" />
  </oscode-design-theme>
 </oscode-design-theme>`
})
export class PageComponent {}

<script>
import DesignTheme from './components/DesignTheme.svelte';
import DesignButton from './components/DesignButton.svelte';
</script>
<DesignTheme tokens={{ accent: '#4338ca', radius: '20px' }}>
 <DesignButton />
 <DesignTheme tokens={{ accent: '#0f766e' }}><DesignButton /></DesignTheme>
</DesignTheme>

tokens는 지원하는 11개 토큰의 부분 객체이며 변경 시 새 객체를 전달하세요. 밝은 포인트 컬러에는 accentText도 함께 지정해 대비를 확인하세요. 생성 컴포넌트는 div 하나를 추가하며 페이지 레이아웃은 앱에서 지정합니다.

최신 소스로 새로 생성한 OSCODE 디자인에 적용됩니다. 기존 파일·외부 UI 라이브러리는 자동 변환하지 않습니다. /design theme set은 생성 파일을 덮어쓰지 않으므로, 이후 공통 스타일 변경은 앱의 DesignTheme.css에서 관리하세요. npm 0.10.0에는 미포함입니다.

스타일 상속·기존 파일 적용·팀 공유 가이드 ↗

프로젝트 테마 적용

프로젝트에서 찾은 색상·간격·글꼴 후보를 확인하고 필요한 값만 지정하세요.

OSCODE 안에서 입력

/design theme
/design theme set {"accent":"#0f766e","radius":"8px","spacing":"16px"}

기본값 → CSS에서 처음 찾은 값 → 저장한 설정 순서로 반영합니다. set은 지정한 값만 병합합니다. 변경 후 갤러리 또는 select로 다시 선택하세요.

지원 값: accent, accentText, surface, background, text, muted, border, danger, radius, spacing, font.

처음 40개 CSS의 단순 :root·@theme 변수 후보만 찾습니다. 조건부 테마·CSS cascade·var() 참조 전체를 해석하지 않습니다. 생성 토큰은 해당 컴포넌트에 적용하며 기존 전역 테마를 수정하지 않습니다.

토큰 파일 공유

OSCODE 안에서 입력

/design theme export design-tokens.json
/design theme import design-tokens.json

DTCG 2025.10의 일부 형식만 지원합니다. oscode 그룹의 sRGB 색상, px/rem 길이, fontFamily를 사용합니다. 내보내기는 HEX 색상을 요구하며 외부 참조·별칭은 지원하지 않습니다.

팀 컴포넌트 등록·공유

프로젝트의 컴포넌트와 CSS를 등록해 다른 프로젝트에서 재사용하세요. 아래 파일 경로는 실제 파일로 바꾸어 입력합니다.

OSCODE 안에서 입력

/design register team-button {"framework":"react","path":"src/Button.tsx","css":"src/Button.css","description":"팀 기본 버튼"}
/design use team-button
/design code
/design apply src/components/SharedButton.tsx

내보내기와 가져오기

OSCODE 안에서 입력

/design registry export team-components.json

생성한 JSON을 다른 프로젝트에 복사한 뒤 해당 프로젝트의 OSCODE에서 실행합니다.

OSCODE 안에서 입력

/design registry import team-components.json
/design gallery react

등록 내용은 원본 코드·CSS의 스냅샷입니다. 최대 24개, 항목당 코드 32,000자·CSS 16,000자, 전체 512 KB까지 지원합니다. 같은 이름은 중복 등록할 수 없으며 원본 변경을 자동 동기화하지 않습니다.

React의 .jsx·.tsx를 보존하고 등록한 CSS의 정적 참조를 새 파일명으로 연결합니다. 다른 패키지·이미지·상대 import는 직접 확인하세요. 팀 코드는 갤러리에서 실행하지 않고 이름과 설명만 표시합니다.

승인과 토큰 사용

목록·테마·코드는 바로 조회할 수 있습니다. 갤러리와 파일 변경은 기존 승인 설정을 따릅니다. 프론트엔드 에이전트는 목록과 필요한 코드·CSS를 나누어 읽으며 전체 라이브러리를 매 요청에 전달하지 않습니다.

프론트엔드 아키텍처

폴더 역할과 직접 의존 관계, 순환 참조·공통 UI 결합 후보를 확인합니다. API 키 없이 로컬에서 분석합니다.

/architecture
/architecture src

Markdown·JSON 보고서는 .oscode에 저장됩니다. React·Vue·Angular·Svelte 소스를 기존 구조에 맞춰 검토하되, 폴더 이름과 상대경로 import 중심의 분석입니다.

코드 지도

/map
/map Button

주요 함수·클래스·컴포넌트와 상대경로 import를 약 1,600 토큰 이내로 보여줍니다. 최대 120개 파일·2 MiB를 분석하며 변경된 소스는 다시 파싱합니다.

별칭·동적 import·전체 호출 관계를 완전히 해석하지 않습니다. 지도는 탐색용이며 실제 수정 전 원본 확인이 필요합니다.

변경이 닿는 화면을 먼저 확인하세요.

공통 컴포넌트나 스타일을 바꾸기 전에 영향받는 파일·화면·테스트 후보를 확인합니다. React·Vue·Angular·Svelte의 소스와 스타일, Angular의 외부 템플릿을 추적합니다.

/impact src/components/Button.vue
/impact src/styles/tokens.css

tokens.css ← shared.scss ← InvoicePage.vue ← InvoicePage.spec.ts처럼 연결을 따라가며 소스 줄 번호를 보여줍니다. 결과의 testCandidates부터 확인하고, 선택한 파일을 읽은 다음 필요한 검증을 실행하세요.

• 현재 내용의 해시가 같으면 이전 파싱 결과를 재사용합니다. 소스·별칭 설정의 변경은 다음 분석에 반영합니다.
• 최대 300개 파일·2 MiB, 기본 추정 2,400 토큰입니다. 파일 본문은 포함하지 않습니다.
• partial은 확인된 스캔 한계, omittedAffected는 출력에서 생략한 후보 수입니다.

작업 파일에 필요한 규칙만.

.oscode/rules/ui.md에 파일별 지침을 저장하세요. paths는 한 줄 JSON 문자열 배열입니다. 공통 지침은 AGENTS.md, 직접 선택할 작업 절차는 /skills를 사용합니다.

---
paths: ["src/components/**/*.{tsx,vue,svelte}", "src/**/*.component.ts"]
---
기존 공통 컴포넌트와 디자인 토큰을 우선 사용합니다.
변경한 입력과 버튼은 키보드 조작을 확인합니다.

/rules explain src/components/Button.vue
/context add src/components/Button.vue
이 버튼의 모바일 줄바꿈을 수정해줘
/rules last
/usage

첨부 파일의 규칙은 첫 요청에, 이번 턴에서 읽은 파일의 규칙은 다음 요청에 포함합니다. 새 규칙이 있는 파일의 편집·생성은 모델이 규칙을 확인하도록 한 번 보류할 수 있습니다.

• /rules: 선택 파일 기준 목록
• /rules explain 파일경로: 포함·범위 밖·예산 초과·형식 오류와 일치한 파일
• /rules last: 마지막 요청 당시 규칙과 입력 토큰 추정

총 추정 2,000 토큰 안에서 규칙 단위로 포함합니다. 매 요청 파일을 다시 읽으며 본문을 대화 이력에 자동 누적하지 않습니다. 실제 API 사용량은 /usage에서 따로 확인하세요.

OpenCode·Pi·Claude Code 등 8개 도구 비교와 구현 판단 ↗

토큰 관리

/usage
/context
/context history off

반복된 파일 본문·첨부를 요청에서 중복 제거하고, 질문에 맞는 코드 주변을 우선 발췌합니다. 파일이나 질문이 바뀌면 캐시를 갱신합니다.

사용량의 절감 수치는 추정치이며 실제 공급자 사용량과 구분합니다. 로컬 캐시 적중이 곧 모델 토큰 절감을 뜻하지는 않습니다. 이전 대화 제외는 다음 요청의 문맥을 줄일 수 있으니 필요한 요구사항을 다시 명시하세요.

프로젝트 스킬

.oscode/skills/frontend-review/SKILL.md

위 구조로 Markdown 지침을 저장한 다음 목록에서 선택합니다. 선택한 스킬만 다음 요청부터 적용됩니다.

/skills
/skills frontend-review
/skills off

스킬은 24 KiB 이하이며 추가 권한을 부여하지 않습니다. 선택은 현재 에이전트에 유지됩니다. 선택 해제가 이미 전송한 과거 대화 내용을 삭제하지는 않습니다.

입력과 화면 스타일

/style에서 다크·라이트·고대비, 글자 굵기, 답변 서식을 선택합니다. 글꼴과 크기는 터미널 앱 설정에서 바꾸세요.

작업 결과와 인계

/summary
/handoff
/handoff copy

추가 모델 호출 없이 요청·파일 편집 기록·도구 실행 근거를 정리합니다. 인계 파일은 .oscode에 저장됩니다. 긴 코드와 도구 원문은 포함하지 않으며, 전체 대화의 완전한 요약은 아닙니다.

우리 컴포넌트로 수정하고, 실제 동작으로 확인하기

컴포넌트 API와 사용 예를 찾고, 요구사항에 검사를 연결해 변경 영향을 확인합니다. 모델 없이 로컬 분석과 브라우저 검사를 사용할 수 있습니다. 자연어 구현에는 모델 연결이 필요합니다.

자주 쓰는 흐름

/catalog Button
/workflow import tests/frontend-suite.json
/affected src/components/Button.tsx
/workflow run smoke
/criteria
/evidence review.md

/catalog는 React·Vue·Angular·Svelte의 지원 문법을 읽고 미확인 타입을 구분합니다. /criteria는 요구사항별 통과·실패·미검증을 표시하며 소스가 바뀌면 재검사를 안내합니다. /affected는 분석이 불완전하면 전체 등록 검사로 범위를 넓힙니다.

반복 작업과 브라우저 조합

/workflow build 이름 요청으로 등록 지침에 따라 구현한 뒤 원래 시나리오를 다시 실행합니다. 파일·셸 승인과 토큰 예산은 유지됩니다. /matrix 검사ID는 설정한 Chromium·Firefox·WebKit과 화면 크기로 검사하고, 없는 엔진은 미완료로 표시합니다. WebKit 검사는 실제 Safari·기기 검증과 다릅니다.

디자인·ERP·에디터 연결

• /source bind: 화면 선택자와 원본 위치를 연결하고 해시로 변경 확인
• /design-sync: 디자인 토큰 참조·변경 확인, 로컬 registry item 검토·적용
• /workflow erp: 검색·편집·붙여넣기·선택·키보드·복구 검사 파일 생성
• /doctor: 로컬·폐쇄망 모델과 브라우저 실행 환경 진단
• oscode --acp --cwd /프로젝트: 호환 에디터에서 로컬 OSCODE 실행과 승인

토큰 비용은 전체 도구 정의를 무조건 보내지 않고 예산 내 완전한 스키마를 선택해 관리합니다. 컴포넌트 파싱 재사용과 실제 API 토큰 절감량은 구분합니다.

설정 예제·지원 문법·승인·검증 범위 전체 가이드 ↗

팀의 디자인 규칙과 화면 동작을 지키세요.

공통 컴포넌트의 import 규칙을 확인하고, 화면을 조작한 뒤 입력값·선택·포커스·스크롤이 유지되는지 검사합니다. 두 검사 모두 모델 호출 없이 실행할 수 있습니다.

1. 프로젝트에 맞는 팀 규칙 등록

아래 내용을 rules.json으로 저장하고 파일·모듈 경로를 실제 프로젝트에 맞게 바꾸세요. 지정한 파일만 검사합니다.

{
  "version": 1,
  "rules": [
    { "id": "shared-button", "files": ["src/OrderPage.tsx"], "kind": "require-import", "value": "../components/Button", "message": "주문 화면에서는 공통 Button을 가져오세요." },
    { "id": "no-legacy-ui", "files": ["src/OrderPage.tsx"], "kind": "forbid-import", "value": "legacy-ui", "message": "이전 UI 패키지 대신 팀 컴포넌트를 사용하세요." },
    { "id": "no-hardcoded-red", "files": ["src/orders.css"], "kind": "forbid-text", "value": "#ff0000", "message": "직접 색상 대신 팀 danger 토큰을 사용하세요." }
  ]
}

/team-ui import rules.json
/team-ui check

등록은 BUILD 모드와 기존 쓰기 승인을 따릅니다. 결과에는 위반한 규칙·파일·줄 번호가 표시됩니다.

React·Angular의 JS/TS와 Vue·Svelte의 script import를 분석합니다. import 존재가 실제 컴포넌트 사용이나 provider·props 정확성을 증명하지는 않습니다. 동적 import와 require는 검사하지 않습니다. 최대 100개 규칙·규칙당 100개 파일·파일당 300,000자이며 glob은 지원하지 않습니다.

2. 작업 전후 상태 비교

아래 예제를 preserve.json으로 저장하고 선택자를 실제 화면에 맞게 변경하세요. 메모와 체크 상태를 기억한 뒤 새로고침 작업이 끝나도 유지되는지 비교합니다.

{
  "steps": [
    { "action": "fill", "selector": "#order-note", "value": "저장하지 않은 메모" },
    { "action": "check", "selector": "#order-42" },
    { "action": "remember", "selector": "#order-note", "name": "draft", "properties": ["value"] },
    { "action": "remember", "selector": "#order-42", "name": "selection", "properties": ["checked"] },
    { "action": "click", "selector": "#refresh-orders" },
    { "action": "text", "selector": "#refresh-status", "value": "완료" },
    { "action": "preserved", "selector": "#order-note", "name": "draft" },
    { "action": "preserved", "selector": "#order-42", "name": "selection" }
  ]
}

oscode ui check http://localhost:3000 --scenario preserve.json --allow-shell

remember는 실행 중 상태를 기억하고 preserved는 같은 이름의 상태와 비교합니다. 각 선택자는 정확히 한 요소와 일치해야 합니다. 비동기 작업은 예제처럼 완료 표시를 확인한 뒤 비교하세요. DOM이 교체되어도 선택자로 다시 찾습니다.

3. 작업 결과와 근거 확인

기존 /states run·/states fix·/workflow 시나리오에서 같은 단계를 사용할 수 있습니다. 등록한 팀 규칙은 작업 실행 결과와 검증 보고서에도 포함됩니다.

/workflow run smoke
/criteria
/evidence review.md

smoke는 먼저 등록한 작업 이름입니다. 작업 등록 가이드를 참고하세요. AI 구현 작업은 실행 전 보관한 원래 규칙으로 검사하며, 실행 중 규칙 변경은 stale로 표시합니다. 없는 파일·파싱 실패는 통과가 아닌 incomplete입니다.

전체 Markdown 가이드 다운로드 ↓ · 규칙 예제 JSON ↓ · 상태 보존 예제 JSON ↓

OSCODE 자체 판단 엔진

판단과 생성을 분리하는 아이디어를 참고해 OSCODE 내부 코드로 구현했습니다. 명시적인 로컬 규칙이 작업 유형을 분류하고, 관련 도구를 우선 제공합니다. 외부 판단 공급자를 호출하지 않습니다.

판단 결과 확인

/decide 버튼 디자인 만들어줘
/decide
/usage

디자인·오류 진단·테스트·아키텍처·일반 작업으로 분류하고 일치한 규칙 ID를 표시합니다. 미리보기는 실제 작업을 실행하지 않습니다.

자체 엔진 모드

OSCODE_DECISION_MODE=local npx @choijinwon/oscode@0.19.0 --agent frontend

Node.js 22 이상에서 실행하세요.

요청·코드 처리 방식

판단용 API 키·외부 통신·추가 모델 호출이 없습니다. 여러 유형이 섞인 요청, 일치하는 규칙이 없는 요청, 4,000자가 넘는 요청은 일반 경로로 돌립니다. 새 코드에서는 이전 외부 연결 설정도 로컬 모드로 전환하며 공급자 키를 읽지 않습니다.

실제 구현 범위

자체 학습한 AI 모델이 아닌 규칙 기반 엔진입니다. 일치한 규칙은 판단 근거이며 확률이 아니므로 신뢰도·확률 값은 null로 표시합니다. 코드 작성·복잡한 추론은 기존에 연결한 생성 모델이 계속 수행합니다. 승인·읽기 전용 작업·작업 폴더 제한은 그대로 유지합니다.

전체 가이드 다운로드 ↓

반도체 산업용 컴포넌트

갤러리가 안 열리나요? 실행 방법과 0.16.1 수정 안내 →

검사 결과와 생산 현황을 위한 9종 UI 스타터와 파일 기반 데이터 탐색기, 총 10종입니다. 추가 5종은 npm 0.16.0부터 지원합니다. 갤러리에서 선택한 뒤 코드와 CSS를 생성합니다.

/design semiconductor react
/design code
/design apply src/components/WaferMap.jsx

0.16.0에 추가된 기능

• semi-alarms: 알람 검색·심각도 필터·로컬 확인 표시
• semi-maintenance: 정비 상태 필터·체크리스트
• semi-recipe: 읽기 전용 버전 비교
• semi-metrology: 시간별 측정값·단위·예시 범위
• semi-trace: JSON·CSV 검증과 LOT 연결 탐색

실제 파일로 LOT 탐색하기

/design select next/semi-trace
/design code
/design apply app/components/LotExplorer.jsx

생성한 화면에서 JSON 또는 CSV를 선택하면 LOT → 웨이퍼 → 다이를 탐색합니다. 측정값 0과 빈 값을 구분하며, 잘못된 파일 입력 시 기존 데이터를 유지합니다.

{"rows":[{"lot":"LOT-A","wafer":"W-01","x":0,"y":0,"bin":"PASS","value":0,"unit":"nm"}]}

최대 2 MiB·10,000행을 지원하며 다이를 100개씩 표시합니다. 중복 좌표·잘못된 bin·누락 단위를 검사합니다. 파일은 브라우저 메모리에서 처리하며 외부 전송·저장·REST 자동 연결은 없습니다. 불러온 시각은 원본 측정 시각이 아닙니다.

JSON 예제 다운로드 ↓ · CSV 예제 다운로드 ↓

웨이퍼 좌표·BIN 정의와 검사 수율의 분모는 실제 업무 기준에 맞춰야 합니다. 샘플 수율은 통과 960 / 검사 완료 1,000 = 96%이며 미검사 25개는 제외합니다.

반도체 가이드 다운로드 ↓

Next.js · Nuxt 디자인 생성

일반·모바일·관리자·ERP·반도체 디자인과 공통 테마를 두 프레임워크 이름으로 선택합니다.

/design gallery next
/design semiconductor nuxt
/design theme code next

Next.js

Next.js 13+ App Router, React 18+ 기준의 JSX 스타터입니다. 생성 파일의 use client 경계를 유지하고 이벤트 콜백은 Client Component 부모에서 전달하세요. Pages Router에서는 CSS import를 pages/_app으로 옮깁니다.

/design select next/semi-wafer
/design apply app/components/WaferMap.jsx

Nuxt

Nuxt 3/4, Vue 3.5+ 기준의 SFC입니다. Nuxt 3은 components/, Nuxt 4는 app/components/ 또는 프로젝트의 srcDir에 맞춰 생성합니다. 브라우저 동작은 onMounted에서 연결됩니다.

/design select nuxt/semi-wafer
/design apply app/components/WaferMap.vue

Next.js · Nuxt 가이드 다운로드 ↓

데이터에 정답을 붙이고 검토하세요.

/ml → 데이터 라벨링에서 분류·사각형 결함 표시, LOT·웨이퍼 기록, 예측 초안 복사와 검토 완료를 지원합니다. AI 예측과 사람의 정답은 분리합니다.

전체 작업 저장과 검토 완료 JSON 내보내기를 제공합니다. 데이터는 탭 메모리에만 있으므로 닫기 전에 내려받으세요. 이미지 원본은 별도 보관하며 복원할 때 해시를 확인합니다. COCO/YOLO 변환·자동 학습은 아직 지원하지 않습니다.

라벨링 가이드 ↗ · 가상 검사 가이드 ↗ · MLflow 연결 가이드 ↗

HWP · HWPX · Word · Excel 읽기

/ocr 문서.hwp
/ocr 요구사항.docx
/ocr 검사결과.xlsx

HWP v5는 별도 hwp5txt·lxml·six, HWPX·DOCX·XLSX는 Python 3가 필요합니다. 본문과 저장된 셀 값을 추출하며 수식 재계산·이미지 내부 OCR·원래 표 배치 복원은 지원하지 않습니다.

문서 설치·지원 범위 ↗

컨텍스트 진단과 실행 방식

/context inspect로 마지막 요청의 토큰 구성과 절감 조언을 확인합니다. 입력 한도 80%부터 턴당 한 번 안내합니다. 로컬 추정치이며 추가 AI 호출은 없습니다. PLAN 모드는 제거했으며 파일 수정·명령 실행 승인은 유지합니다.

토큰 진단 가이드 ↗ · PLAN 제거 안내 ↗

문제 해결

반도체 갤러리가 실행되지 않나요? · 0.16.1

먼저 macOS·Windows·Linux 터미널에서 OSCODE를 실행하세요.

npx @choijinwon/oscode@0.19.0

아래 명령은 운영체제 터미널이 아니라 OSCODE 대화창 안에서 입력합니다.

/design semiconductor react

실행 승인이 나오면 승인하세요. 갤러리는 BUILD 모드와 브라우저 실행 권한이 필요합니다. 브라우저 자동 실행이 실패하면 표시된 로컬 주소를 직접 여세요. 0.16.1에서는 서버를 유지하며 선택을 기다립니다. 터미널을 종료하지 말고 5분 안에 선택하세요. Ctrl+C로 취소할 수 있습니다.

0.16.1에서 반도체 명령 자동완성도 보완했습니다. 구버전을 사용 중이면 종료 후 위 명령으로 다시 실행하세요. 이 수정이 모든 실행 오류를 해결하는 것은 아니며, 계속 실패하면 오류 문구를 확인하세요.

명령어가 보이지 않아요

먼저 사용 중인 배포 버전을 확인하세요. /design는 npm 0.11.0에서 사용할 수 있습니다. /team-ui는 npm 0.12.0 이상이 필요합니다. npx @choijinwon/oscode@latest는 npm에 배포된 버전만 실행합니다. 소스를 업데이트한 뒤 OSCODE를 재시작하세요.

검증이 미완료로 나와요

보고서에서 승인 거절·없는 스크립트·서버 미실행 여부를 확인하세요. 검사 생략은 통과로 계산하지 않습니다.

이미지·PDF를 읽고 싶어요

/ocr 파일경로 또는 @파일로 첨부하세요. Tesseract와 Poppler가 필요하며 설치 방법은 OCR 가이드 ↗에서 확인할 수 있습니다.