AI Code Assistant 사용법 가이드

본 서비스는 클라우드 서버로 소스 코드나 대화 데이터를 전송하지 않고, 사용자 브라우저 환경에서 완전 로컬 온디바이스로 AI 모델을 구동합니다. 용도에 따라 2가지 전용 버튼을 통해 모델을 로드할 수 있습니다.

1. 로드할 파일 규격에 맞춰 Open Local AI Model (.task) 또는 Open Local AI Model (.gguf) 버튼을 클릭합니다.
2. 파일 탐색기 창이 열리면 사전에 다운로드해 둔 로컬 모델 파일(.task, .litertlm 또는 .gguf)을 선택합니다.
3. 파일이 지정되면 브라우저 상단 프로그레스 바가 움직이며 브라우저 엔진에 모델 데이터가 준비됩니다.
4. 로드가 완료되면 상단 상태 뱃지가 ready 또는 GGUF ready로 변하고, 대화창 입력란과 각종 어시스턴트 기능이 활성화됩니다.

💡 모델 파일이 없거나 다운로드 방법이 궁금하시다면 상단 헤더의 AI Model Download Guide ↗를 확인해 주세요.

개발 중인 소스 코드 파일을 좌측 편집 창에 로드하여 실시간으로 확인하고 수정할 수 있습니다.

• 좌측 에디터 헤더의 파일 열기 버튼을 누르면 탐색기가 나타납니다.
• .html, .js, .css, .json, .py, .java 등 읽고 싶은 파일을 선택합니다.
• 선택된 소스 코드가 좌측 코드 편집기(CodeMirror) 영역에 열리며 구문 강조(Syntax Highlighting) 및 줄 번호가 매겨진 상태로 깔끔하게 렌더링됩니다.

에디터에서 수정했거나 AI를 통해 반영한 변경 사항을 로컬 디스크에 영구적으로 보관할 수 있습니다.

• 좌측 에디터 헤더의 저장 (Save) 버튼을 클릭합니다.
• 현재 에디터에 작성된 소스 내용이 원래 열었던 파일명(새 파일의 경우 기본 파일명)으로 브라우저 다운로드 방식을 통해 안전하게 저장됩니다.

좌측 코드 편집기는 고기능 IDE에 준하는 편리한 부가 도구들을 포함하고 있습니다.

• 코드 작성: 에디터 내부를 클릭하여 자유롭게 코드를 타이핑하고 편집합니다. 웹 언어뿐만 아니라 다양한 프로그래밍 언어의 문법 구조를 감지합니다.
• 코드 정렬: 작성된 코드의 들여쓰기나 간격이 어지러울 때 상단의 코드 정렬 버튼을 클릭하면 표준 코드 컨벤션에 맞춰 줄 바꿈과 공백이 자동으로 포맷팅됩니다.
• 소스 검색: 상단 검색창에 검색하고자 하는 단어가 있을 때 단어를 입력한 뒤 ◀ (이전 매칭) / ▶ (다음 매칭) 버튼을 활용해 소스 코드의 여러 영역을 실시간 탐색합니다.
• 실시간 프리뷰 (Preview): Preview 버튼을 누르면 에디터 우측에 팝업 형태로 화면이 렌더링되어 HTML/CSS/JS 실행 결과를 즉각 확인해볼 수 있습니다. 하단 Console 영역에서는 스크립트 에러나 console.log() 로그가 실시간 연동되어 디버깅에 매우 용이합니다.
• 템플릿 (Templates): Templates 버튼을 클릭하여 자주 활용되는 퍼블리싱 레이아웃이나 컴포넌트 템플릿(공통, MC, PC, Vue 버전 등) 리스트를 미리 보고, 에디터에 즉시 적용할 수 있습니다.

우측의 채팅 인터페이스를 통해 로드된 대형 언어 모델(LLM)과 실시간 코딩 질의를 나눌 수 있습니다.

1. 우측 하단의 대화 메시지 입력란(textarea)에 요청 사항(예: "현재 코드의 비동기 처리 오류를 해결해줘")을 입력합니다.
2. 전송 버튼을 누르거나 키보드의 Enter 키(줄 바꿈은 Shift+Enter)를 치면 AI가 실시간으로 코드를 생성하며 답변을 작성합니다.
3. 현재 에디터 코드 포함하여 질문하기: 입력창 위의 이 체크박스가 켜져 있으면, 좌측 에디터에 열려있는 전체 소스 코드가 질문과 함께 자동으로 동봉됩니다. 코드를 번거롭게 복사해서 대화창에 넣지 않아도 AI가 코드를 완벽하게 이해하고 맞춤 수정을 제안합니다.
4. 시스템 프롬프트 (⚙ system prompt): 에디터 위쪽의 ⚙ 버튼을 누르면 나타나는 패널에서 시스템 프롬프트(AI의 페르소나와 제약사항)를 직접 기입하거나, 역할 설정 드롭다운을 통해 개발 전문가 등의 역할을 부여할 수 있습니다.
5. 대화 초기화 및 중지: 답변이 너무 길어 끊고 싶을 때는 응답 중지 (Stop) 버튼을, 이전 대화 맥락을 모두 비우고 완전히 새로운 대화를 시작하고 싶을 때는 쓰레기통 모양의 Clear 버튼을 누릅니다.

자주 쓰이는 요청 패턴을 사전에 정의해 둔 프리셋으로, 번거롭게 긴 질문을 작성하지 않고 효율적으로 지시할 수 있습니다.

• 대화 입력창 상단의 Select Prompt... 드롭다운을 클릭합니다.
• '코드 리뷰', '버그 수정', '설명 추가', '리팩토링', '테스트 코드 작성' 등을 선택합니다.
• 해당 가이드에 맞는 템플릿이 입력창에 자동 삽입되어 빠른 질의가 가능합니다.

단순 텍스트 외에도 이미지나 프로젝트 파일을 첨부하여 폭넓은 컨텍스트로 대화할 수 있습니다.

• 이미지 첨부 (Vision 모델 전용): 이미지 분석 기능이 있는 멀티모달 모델(예: Gemma-3n)을 로드하면 입력란 좌측의 액자 모양 버튼(이미지 첨부)이 활성화됩니다. 웹페이지 캡처본이나 레이아웃 기안 이미지를 업로드하고 "이 이미지 구조를 분석해서 마크업 코드로 변환해줘"와 같은 요청을 할 수 있습니다.
• 프로젝트 파일 첨부: 입력란 좌측의 문서 모양 버튼(파일 첨부)을 클릭하여 여러 개의 소스 코드 파일(.js, .css, .py 등)을 대화방에 참조용으로 등록할 수 있습니다. 에디터에 열린 파일 외에도 추가적인 의존 모듈 코드를 AI에게 가르쳐 줄 때 유용합니다.

AI가 수정안 코드를 제안하면 기존의 소중한 코드가 무조건 덮어써지지 않도록 차이점을 시각적으로 비교하는 단계가 먼저 작동합니다.

1. AI가 수정한 소스 코드 블록을 감지하면 자동으로 코드 변경사항 비교 (Diff) 모달이 화면 중앙에 표시됩니다.
2. 모달 내부에서 좌측(기존 원본 코드)과 우측(AI가 제안한 수정 코드)의 라인을 한눈에 비교할 수 있습니다. 추가된 부분은 초록색, 삭제/수정된 부분은 빨간색으로 시각화됩니다.
3. 코드를 꼼꼼하게 검토한 후, 실제 적용을 원한다면 최종 적용 (Apply) 버튼을 클릭합니다. 에디터 본문의 해당 영역 코드가 깔끔하게 새 코드로 즉시 대치됩니다.
4. 수정 사항이 마음에 들지 않거나 본인이 직접 고치고 싶다면 취소 (Cancel) 버튼을 눌러 모달을 닫고 원래 상태를 유지할 수 있습니다.