시작하기

개요

Spck Editor는 개발자를 위해 설계된 여러 변형 버전이 있는 모바일 코드 편집 솔루션입니다.

버전

Spck Editor (무료)

기본적인 모바일 코드 편집 기능
isomorphic-git을 통한 휴대용 git 라이브러리 통합

Spck Editor Lite

가격: 일회성 결제 기능:

사용자 지정 스니펫
예측 키보드
독점 네온 테마

Spck for NodeJS

플랫폼: Android 전용 핵심 기능: NodeJS를 지원하는 통합 터미널

브라우저 버전

어떤 웹사이트에도 임베드 가능
가벼운 코드 편집 인터페이스

주요 기능

모바일 우선 디자인
Git 통합
크로스 플랫폼 호환성

권장 사용

이동 중의 코드 편집
빠른 프로젝트 수정
학습 및 프로토타이핑

용어

용어	설명
내비게이션 메뉴	모바일 기기의 사이드 메뉴에 있는 첫 번째 탭을 의미하며, 이 메뉴는 브라우저 버전이나 태블릿 모드에서는 사용할 수 없습니다
파일 메뉴	사이드 메뉴 또는 사이드바의 File 탭을 의미합니다
추가 키보드	모바일 기기에는 일반적으로 사용되는 코딩 기호를 빠르게 삽입할 수 있는 추가 키보드가 있습니다
터치 키보드	일반적으로 화살표 키, Tab 키 등을 포함하는 키 열을 의미합니다
터치 액션 바	모바일/터치 기기에서 텍스트가 선택될 때 커서 위에 나타나는 플로팅 메뉴입니다
터치 커서	모바일/터치 기기에서 텍스트가 선택되거나 커서가 활성화될 때 화면에 표시되는 커서
태블릿 모드	태블릿과 같은 더 큰 터치 기기에서 켤 수 있는 설정을 의미합니다
⌘ 키	터치 키보드의 이 기호는 Windows의 Ctrl 키 또는 Mac의 Command 키와 동일합니다
⌥ 키	터치 키보드의 이 기호는 Windows의 Alt 키 또는 Mac의 Option 키와 동일합니다

키보드 단축키

개요

이 편리한 키보드 단축키로 번개처럼 빠른 효율성을 잠금 해제하세요! 완전한 카탈로그는 아니지만, 이 보석들은 여러분의 생산성을 강화하고 내비게이션을 손쉽게 만들어줄 것입니다.

주요 하이라이트

포괄적이지 않음: 가장 실용적인 단축키 모음
목적: 빠르고 직관적인 명령어로 워크플로우 향상
이점: 시간 절약 및 마우스 의존성 감소

💡 프로 팁: 이 단축키들을 외우고, 생산성이 치솟는 것을 지켜보세요! 🌟

Settings > Editor > Keyboard Shortcuts로 이동하여 단축키 전체 목록을 볼 수 있습니다.

프리미엄 사용자는 추가 키보드에서 직접 또는 ⌘ K 단축키를 사용하여 키보드 단축키에 액세스할 수도 있습니다.

Settings > Touch > Show ⌘ Key 및 Settings > Touch > Show ⌥ Key를 켜서 Ctrl/Command 키 (⌘)와 Alt/Options 키를 활성화합니다.

편집기

단축키	작업
⌘ A	모두 선택
⌘ C	복사
⌘ V	붙여넣기
⌘ X	잘라내기
⌘ Z	실행 취소
⌘ ⇧ Z	다시 실행
⌘ D	줄 복제
⌘ /	줄 주석/주석 해제
⌥ F	코드 포맷
⌘ F	찾기
⌘ G	다음 찾기 (선택한 텍스트와 함께 작동)
⌘ ⇧ G	이전 찾기
⌘ L	줄로 이동

빠른 작업

단축키	작업
⌘ ⇧ C	Git 커밋
⌘ O	최근 파일 열기
⌘ ⇧ P	프로젝트 미리보기 실행
⌘ P	파일 미리보기 전환 (SVG, Markdown)
⌘ K	Supporter+: 단축키 열기

터치 설정

추가 키보드

추가 키보드는 터치 기기를 위해 설계된 기호 키보드입니다.
추가 키/기호는 키를 길게 눌러 옵션 메뉴를 열어 액세스할 수 있습니다.
Settings > Touch > Extra Keyboard 메뉴에서 활성화 또는 비활성화할 수 있습니다.

💡 프로 팁: 추가 키보드와 호환되는 텍스트 둘러싸기에 대한 팁은 고급 편집 을 참조하세요.

터치 키보드

터치 키는 화살표 키, Command 키 및 기타 자주 사용되는 키를 포함하는 키 열로 구성됩니다.
이 기능은 터치 기기에서 사용할 수 있습니다.
Settings > Touch > Touch Keyboard 섹션에서 켜거나 끌 수 있습니다.

💡 프로 팁: 설정을 조정하여 이 키보드의 개별 키를 사용자 지정할 수 있습니다.

터치 액션 바

텍스트가 선택되면 복사, 잘라내기 및 붙여넣기 옵션이 있는 액션 바가 표시됩니다.
이 기능은 Settings > Touch > Touch Action Bar에서 활성화하거나 비활성화할 수 있습니다.

터치 커서

텍스트가 선택되거나 커서가 활성화될 때 나타나는 화면 커서.
이 기능은 Settings > Touch > Touch Cursors에서 활성화하거나 비활성화할 수 있습니다.

💡 프로 팁: 모바일 기기에 마우스/포인팅 장치가 페어링되어 있지 않은 한 이 기능을 비활성화하는 것은 권장되지 않습니다. 터치 커서를 비활성화하면 편집 시 화면 가시성이 향상되고 외부 포인팅 장치를 사용할 때 편집 경험이 개선될 수 있습니다.

예측 키

예측 키는 표준 추가 키보드를 대체하는 프리미엄 기능입니다.
일반 추가 키보드에서 길게 누르고 선택해야 하는 대신 원터치 기호 입력을 제공합니다.
키는 파일의 특정 위치에 나타나는 기호의 통계적 빈도에 따라 정렬됩니다.
Settings > Touch > Predictive Keyboard에서 켜거나 끌 수 있습니다.

💡 프로 팁: 예측 키는 일부 사용자가 선호할 수 있는 일반 추가 키보드를 대체합니다. 예측 키는 편집기의 Lite 버전에서 기본 옵션이며, 일반 추가 키보드로 되돌리려면 끌 수 있습니다.

파일 내비게이션

개요

파일 간 이동에는 여러 가지 방법이 있습니다
사이드 메뉴의 파일을 사용하여 파일을 탐색할 수 있습니다
빵 부스러기(breadcrumb)를 사용하여 현재 파일 디렉토리에서 시작하여 파일을 탐색할 수 있습니다
Ctrl-O로 최근 파일을 열어 파일을 빠르게 검색할 수 있습니다
파일 사이드 메뉴의 "Locate" 아이콘을 사용하여 현재 파일을 빠르게 찾을 수 있습니다
소스 제어 및 검색 사이드 메뉴도 파일 간 이동을 위한 독특한 방법을 제공합니다

파일 탭 관리

탭 동작

파일은 처음 열릴 때 자동으로 고정 해제됩니다
편집이 이루어지면 탭이 고정됩니다

탭 정렬 옵션

파일은 다음 순서로 정렬할 수 있습니다:

알파벳 순서
파일 확장자
파일 경로

대체 내비게이션 채널

소스 제어 메뉴: 버전 관리 컨텍스트를 통해 파일 탐색
검색 메뉴: 검색 기준에 따라 파일 찾기 및 액세스

💡 프로 팁: 파일 탭은 Settings > Appearance > Show File Tabs에서 보기를 끌 수 있습니다. 작은 기기에서 화면 공간을 최대화하려면 젠 모드 를 참조하세요.

고급 편집

예측 키보드를 효율적으로 사용하기

기본 선택

두 번 탭하여 단어 또는 텍스트 블록 선택

텍스트 둘러싸기

괄호 또는 따옴표 쌍을 사용하여 선택한 텍스트를 빠르게 둘러쌉니다:

소괄호: ( )
대괄호: [ ]
중괄호: { }
작은따옴표: ' '
큰따옴표: " "

내비게이션 및 편집

텍스트 검색

⌘ G: 다음 인스턴스 찾기
⌘ ⇧ G: 이전 인스턴스 찾기

들여쓰기

텍스트 블록 선택
Tab을 눌러 들여쓰기

다중 커서

빠른 설정

Alt/Option 키로 다중 커서를 활성화하세요! ✨
Settings > Touch > Show ⌥ Key로 이동하여 활성화

사용 방법

⌥ 및 ⌘ 키를 모두 선택
원하는 위치에 정확히 커서를 배치하려면 클릭
여러 줄을 동시에 쉽게 편집! 💻

💡 프로 팁: 다중 커서 편집 = 번개처럼 빠른 코드 변환! ⚡️ 명령 팔레트 명령 Add Cursor Above 및 Add Cursor Below를 사용하여 다중 커서를 추가할 수도 있으며, 이는 현재 커서 위치 바로 위 또는 아래에 커서를 추가합니다.

Git 제한 사항

개요

편집기의 Git 통합은 클라이언트 측에서 완전히 실행되는 Git의 순수 JavaScript 구현인 isomorphic-git을 기반으로 합니다. 이를 통해 서버 없이 브라우저 및 모바일 기기에서 직접 Git 작업이 가능하지만, 샌드박스된 JavaScript 환경에서 Git을 실행하는 것에 내재된 몇 가지 제약이 따릅니다.

메모리 제약

모바일 애플리케이션은 일반적으로 운영체제에 의해 약 50MB의 메모리로 제한됩니다.
큰 저장소에서의 Git 작업은 이 예산을 초과하여 앱이 종료될 수 있습니다.
큰 팩 파일 (.git/objects/pack/의 .pack 파일)을 읽으려면 한 번에 상당한 부분을 메모리에 로드해야 하므로 메모리가 제한된 기기에서는 불가능합니다.
결과적으로 모바일에서는 큰 저장소를 복제하거나 작업하면 메모리 부족 오류로 실패할 수 있습니다.

💡 팁: 큰 저장소의 경우 가능하면 shallow clone을 사용하거나 저장소의 더 작은 하위 집합으로 작업하는 것을 고려하세요.

심볼릭 링크 호환성

심볼릭 링크 (symlinks)는 보안상의 이유로 브라우저/모바일 샌드박스에서 기본적으로 지원되지 않습니다.
편집기는 심볼릭 링크가 포함된 저장소도 체크아웃할 수 있도록 우회책으로 에뮬레이션된 심볼릭 링크 표현을 사용합니다.
이 에뮬레이션은 실제 파일시스템 심볼릭 링크를 기대하는 도구 (예: 일부 빌드 도구, 패키지 관리자 또는 런타임에 심볼릭 링크 대상을 확인하는 스크립트)와 호환성 문제가 있을 수 있습니다.
심볼릭 링크에 크게 의존하는 저장소는 기본 Git 체크아웃과 동일하게 작동하지 않을 수 있습니다.

대안으로 CLI 사용

이러한 제한 사항은 앱 내 Git 클라이언트에만 적용됩니다. 호스트 시스템에서 기본 Git 바이너리를 사용하는 Spck CLI에는 영향을 미치지 않습니다:

50MB 메모리 상한 없음 - Git 작업은 컴퓨터의 사용 가능한 메모리에 의해서만 제한됩니다.
큰 팩 파일과 큰 저장소가 기본적으로 처리됩니다.
실제 심볼릭 링크가 예상대로 작동하며 다른 도구와 완벽하게 호환됩니다.
isomorphic-git에서 구현한 하위 집합뿐만 아니라 모든 Git 기능과 plumbing 명령을 사용할 수 있습니다.

💡 프로 팁: 큰 저장소나 심볼릭 링크에 의존하는 프로젝트를 자주 작업하는 경우, 모바일 앱에서 파일을 계속 편집하면서 Git 작업 (clone, fetch, push)에 Spck CLI를 사용하면 두 가지 장점을 모두 누릴 수 있습니다.

🌟 젠 모드

개요

젠 모드는 작은 디스플레이에서 코딩 경험을 변화시키도록 설계된 즐겁고 공간을 최대화하는 편집기 구성입니다.

젠 모드는 다음으로 구성됩니다:

설정에서 Show Line Numbers 끄기
Show File Tab 끄기
Touch Action Bar 끄기

주요 기능

🧘‍♀️ 극대화된 화면 공간

줄 번호여, 안녕!
- 소중한 가로 공간 확보
- 텍스트가 비좁아 보이는 것 방지
- 깨끗하고 미니멀한 모습 채택

🎨 간소화된 인터페이스

액션 바 최소화
- 어수선한 도구 모음과 작별
- 대체 입력 방법 활용:
  - 추가 키보드 붙여넣기/잘라내기 버튼
  - 키보드 단축키 (Ctrl-C/Ctrl-V)

📂 단순화된 내비게이션

파일 탭 제거
- Ctrl-O가 여러분의 새로운 내비게이션 베스트 프렌드가 됩니다
- 더 깔끔한 작업 공간
- 더 빠른 컨텍스트 전환

💡 프로 팁: 모든 사람의 코딩 스타일은 다릅니다! 젠 모드를 실험하여 여러분의 워크플로우와 공명하는지 확인해 보시기를 권장합니다. 완벽한 코딩 환경은 몇 번의 토글만 누르면 됩니다! 🌈✨