루시드와 Visual Studio Code 연결하기

VS 코드를 Lucid 계정에 연결하세요

VS Code용 Lucid 확장 프로그램을 설치하려면 다음 단계를 따르세요:

1. VS Code 애플리케이션을 열어보세요.
2. [확장 프로그램 마켓플레이스]로 이동하려면 클릭하세요. 창의 맨 왼쪽 활동 표시줄에 있는 확장 프로그램 아이콘입니다.
   • 또는 Ctrl + Shift + X(PC) 또는 Cmd + Shift + X(Mac)를 눌러 키보드 단축키를 사용할 수도 있습니다.
3. VS Code 마켓플레이스에서 "Lucid"를 검색하세요.
4. 확장 카드 오른쪽에서 설치 를 클릭하세요.
5. 루시드 계정에 로그인하는 안내를 따라 하세요.
6. 명령 팔레트를 열고 "Lucid"를 입력하세요.
   • 또는 Cmd + Shift + P(PC) 또는 Ctrl + Shift + P (Mac)를 누르세요.
7. 기존 다이어그램을 열거나 새 다이어그램을 만드세요.
8. 다이어그램을 편집합니다.
9. 편집기 오른쪽 상단에 있는 코드베이스에 저장 을 클릭하세요.
10. 저장소 폴더를 선택하세요.
11. 기기의 안내를 따라 저장하세요.

VS Code에서 Lucid 다이어그램을 사용하세요

Lucid 다이어그램을 생성하고 엽니다.

VS Code에서 다이어그램을 만들거나 열려면 다음 단계를 따르세요.

1. 명령 팔레트를 열어보세요. 
   • 또는 Cmd + Shift + P(PC) 또는 Ctrl + Shift + P (Mac)를 눌러 키보드 단축키를 사용할 수 있습니다.
2. Lucid: Open Document 또는 Lucid: Create New Document를 검색하여 선택하세요.
3. 소스 코드 옆에 열리는 문서 선택기에서 문서를 선택하거나 새 문서를 클릭하세요.

기존 Lucid 다이어그램을 업데이트합니다.

루시드 다이어그램을 편집하지 않을 때는 코드베이스에 저장된 정적 이미지로 나타납니다. VS Code에서 기존 다이어그램을 직접 편집하려면 다음 단계를 따르세요.

1. VS Code에서 Lucid 문서를 열어보세요.
2. 편집기 상단의 Lucid 아이콘을 클릭 하세요.
3. VS Code로 Lucid 문서를 편집하세요.
4. 코드베이스에 저장을 클릭하세요.
5. 저장소 폴더를 선택하세요.
6. 기기의 안내를 따라 저장하세요.

업데이트가 성공적으로 저장되었는지 확인하려면 다음 단계를 따라 하세요:

1. Lucid 문서를 편집하고 VS Code에 저장하세요.
2. Lucid 편집기 탭과 다이어그램 미리보기 탭을 닫으세요.
3. 파일 탐색기에서 다이어그램의 PNG 파일을 선택하여 업데이트된 미리보기를 엽니다.

머메이드 문법을 Lucid 객체로 변환하기

Claude Code, Cursor, Codex 또는 다른 어디에서든 머메이드를 붙여넣고 루시드 문서에서 편집 가능한 도형을 얻으려면, 다음 단계를 따르세요:

1. 원시 인어 코드 복사.
2. 코드를 Lucid 확장 패널 어디에나 붙여넣으세요.

확장 기능은 코드를 표준적이고 편집 가능한 루시드 도형과 선으로 변환합니다.

Lucid 웹 편집기에서 VS Code로 동기화 변경 사항

VS Code 미리보기가 Lucid에서 최신 편집 내용을 반영하는지 확인하려면 다음 단계를 따르세요:

1. VS Code에서 Lucid 문서를 열어보세요.
2. 편집기 상단의 '외부 링크 여는 아이콘'을 클릭하세요.
3. 루시드 웹 버전을 열기 위한 안내를 따라가세요.
4. Lucid 웹 버전의 팝업 창에서 다이어그램을 편집하세요.
5. 웹 버전을 종료하세요.
6. VS 코드로 돌아가기.
7. VS Code 파일 탐색기에서 다른 파일을 선택한 다음 다이어그램의 PNG 파일을 다시 클릭하여 보기를 새로 고칩니다.
8. 편집기 왼쪽 하단의 Update Lucid PNG 를 클릭하면 최신 버전을 렌더링할 수 있습니다.

다이어그램을 코드베이스에 저장하세요

PNG 이미지와 가벼운 참조 파일(.lucid)을 로컬 저장소에 직접 저장해서 코드와 함께 커밋할 수 있습니다. 방법은 다음과 같습니다:

1. VS 코드 안에서 캔버스를 직접 편집하세요.
2. 확장 메뉴 오른쪽 상단에서 ' 코드베이스에 저장 '을 선택하세요.
3. 저장소 폴더를 선택하세요.
4. 기기의 안내를 따라 저장하세요.

VS 코드 편집기의 한계

in-에디터 경험을 통해 웹 기반 Lucid 에디터의 핵심 기능만 집중적으로 활용하여 코드를 바로 옆에서 빠르게 확인하고 업데이트할 수 있습니다. 아래 표에 나열된 기능을 포함한 전체 기능을 사용하려면 Lucid 웹 버전에서 문서를 열어 보세요.

자주 하는 질문(FAQ)

Lucid가 VS Code의 어떤 버전과 호환되나요?
Lucid for VS Code는 VS Code 엔진 버전 1.82.0 이상을 지원하는 모든 표준 VS Code 설치와 호환됩니다.

VS Code 확장 기능을 사용하려면 Lucid 계정이 필요한가요?
네, 활성 Lucid 계정이 필요합니다. 연장 사용은 Lucid의 서비스 약관 및 개인정보처리방침에 적용되며, 이는 연장 이용에만 적용되지만 연장과 관련하여 당사 서비스 약관에 정의된 비루시드 애플리케이션의 사용에는 적용되지 않습니다.

리소스

Lucid는 이제 VS Code 내에서 작동합니다

이 문서에 관한 피드백 공유