반응형
안녕하세요 😊
개발하면서 포트폴리오를 만들거나 블로그, 티스토리, 깃허브에
코드를 깔끔하게 캡처해서 올리고 싶은 적 있으셨죠?
그럴 때 사용하면 좋은 Visual Studio Code 확장 프로그램이 바로
✨ CodeSnap입니다!
이번 글에서는 CodeSnap의 설치 방법부터
예쁘게 캡처하는 꿀팁까지 차근차근 알려드릴게요!
📍 1. CodeSnap이란?
CodeSnap은 VS Code에서 코드 블록을 이미지로 예쁘게 캡처할 수 있는 확장 프로그램입니다.
- 📸 자동 배경 + 그림자 효과
- 🎨 테마 자동 반영
- ✂️ 캡처할 영역 드래그만 하면 끝!
디자인 감성 살리면서, 코드 스니펫을 깔끔하게 공유할 수 있는 최고의 도구예요.
📍 2. 설치 방법
- VS Code 좌측 Extensions (확장 프로그램) 아이콘 클릭
- 검색창에 CodeSnap 입력
- CodeSnap – adpyke 클릭 후 설치
- 단축키 또는 명령 팔레트에서 CodeSnap 실행
또는 Ctrl + Shift + P → "CodeSnap" 입력 후 실행
📍 3. 사용 방법
- 캡처하고 싶은 코드 블록을 드래그로 선택
- CodeSnap 명령 실행 → 미리보기 창이 열림
- Click to Snap 버튼 클릭
- 이미지가 .png로 저장됨
저장 위치는 기본적으로 다운로드 폴더입니다. 설정에서 변경도 가능해요!
📍 4. 커스터마이징 팁
- 📐 이미지 여백 조절
- 🖼 그림자 효과 on/off
- 🎨 배경 색상 또는 테마에 맞춤형 적용
- 🔡 폰트 크기, 테두리 조절도 가능
👉 VS Code 설정 > CodeSnap 항목에서 세세하게 조정 가능합니다!
📍 5. 활용 예시
- ✅ 티스토리 블로그 코드 설명 이미지용
- ✅ 포트폴리오 제작 시 깔끔한 코드 예시
- ✅ 트위터, 깃허브 README, 노션 정리 등
특히 CSS나 JavaScript 설명할 때 직관적인 이미지로 한눈에 전달할 수 있어요!
✅ 마무리하며
CodeSnap은 단순한 코드 캡처를 넘어
개발자 감성을 살려주는 생산성 도구입니다.
코드를 더 예쁘게, 더 명확하게 공유하고 싶은 분이라면
꼭 한번 사용해보시길 추천드립니다 😊
반응형
'Visual Studio Code' 카테고리의 다른 글
| Live Server로 HTML 실시간 미리보기! VS Code에서 브라우저로 바로 확인하는 방법 (0) | 2025.07.06 |
|---|---|
| VS Code 꾸미기 완전 정복! 테마, 단축키, 코드 스니펫까지 내 입맛대로 커스터마이징하기 (1) | 2025.07.05 |
| Prettier + ESLint 설정법! VS Code에서 자동 코드 정리하는 방법 완전 정복 (0) | 2025.07.04 |
| VS Code 추천 확장 프로그램 TOP 10 (2025 최신 업데이트) (0) | 2025.07.03 |
| VS Code에서 Git과 GitHub 한 번에 쓰기! 초보자도 깔끔하게 연결하기 (0) | 2025.07.02 |