Visual Studio Code

CodeSnap – VS Code에서 코드 예쁘게 캡처하는 법! 개발자 필수 확장 프로그램 소개

jonbeo 2025. 8. 10. 12:36
반응형

 

 

안녕하세요 😊
개발하면서 포트폴리오를 만들거나 블로그, 티스토리, 깃허브에
코드를 깔끔하게 캡처해서 올리고 싶은 적 있으셨죠?

 

그럴 때 사용하면 좋은 Visual Studio Code 확장 프로그램이 바로
✨ CodeSnap입니다!

 

이번 글에서는 CodeSnap의 설치 방법부터
예쁘게 캡처하는 꿀팁까지 차근차근 알려드릴게요!

📍 1. CodeSnap이란?

CodeSnap은 VS Code에서 코드 블록을 이미지로 예쁘게 캡처할 수 있는 확장 프로그램입니다.

  • 📸 자동 배경 + 그림자 효과
  • 🎨 테마 자동 반영
  • ✂️ 캡처할 영역 드래그만 하면 끝!

디자인 감성 살리면서, 코드 스니펫을 깔끔하게 공유할 수 있는 최고의 도구예요.

📍 2. 설치 방법

  1. VS Code 좌측 Extensions (확장 프로그램) 아이콘 클릭
  2. 검색창에 CodeSnap 입력
  3. CodeSnap – adpyke 클릭 후 설치
  4. 단축키 또는 명령 팔레트에서 CodeSnap 실행

또는 Ctrl + Shift + P → "CodeSnap" 입력 후 실행

📍 3. 사용 방법

  1. 캡처하고 싶은 코드 블록을 드래그로 선택
  2. CodeSnap 명령 실행 → 미리보기 창이 열림
  3. Click to Snap 버튼 클릭
  4. 이미지가 .png로 저장됨

저장 위치는 기본적으로 다운로드 폴더입니다. 설정에서 변경도 가능해요!

📍 4. 커스터마이징 팁

  • 📐 이미지 여백 조절
  • 🖼 그림자 효과 on/off
  • 🎨 배경 색상 또는 테마에 맞춤형 적용
  • 🔡 폰트 크기, 테두리 조절도 가능

👉 VS Code 설정 > CodeSnap 항목에서 세세하게 조정 가능합니다!

📍 5. 활용 예시

  • ✅ 티스토리 블로그 코드 설명 이미지용
  • ✅ 포트폴리오 제작 시 깔끔한 코드 예시
  • ✅ 트위터, 깃허브 README, 노션 정리 등

특히 CSS나 JavaScript 설명할 때 직관적인 이미지로 한눈에 전달할 수 있어요!

✅ 마무리하며

CodeSnap은 단순한 코드 캡처를 넘어
개발자 감성을 살려주는 생산성 도구입니다.
코드를 더 예쁘게, 더 명확하게 공유하고 싶은 분이라면
꼭 한번 사용해보시길 추천드립니다 😊

반응형