해결: 무한 캔버스에서 코드를 볼 수 있는 VSCode 확장 프로그램을 만들었습니다.

Source: Dev.to

요약

TL;DR: 복잡한 코드베이스를 탐색하면 파편화된 뷰와 끊임없는 컨텍스트 전환으로 인해 인지 과부하와 생산성 저하가 발생합니다. 새로운 VS Code 확장 기능은 무한 캔버스를 도입해 개발자가 IDE 내에서 코드 조각과 파일을 시각적으로 정리·연결·주석 달 수 있게 하며, 지속적이고 인터랙티브한 개요를 제공합니다.

• 코드베이스 복잡성은 다음과 같이 나타납니다:

  • 과도한 컨텍스트 전환
  • 논리 추적의 어려움
  • 높은 인지 부하
  • 온보딩 어려움
  • 전체적인 뷰 부족

• 전통적인 시각화 방법에는 다음이 포함됩니다:

  • IDE 탐색 (정의로 이동, 모든 참조 찾기)
  • 텍스트 검색 (grep, IDE 검색)
  • 수동 다이어그램 작성 (Mermaid, PlantUML)
  • 전용 외부 도구 (SonarQube, Understand)

• VS Code 무한 캔버스 확장이 제공하는 기능:

  • 공간적 코드 조직
  • 인터랙티브 링크
  • 컨텍스트 노트
  • LSP를 통한 의미론적 통합
  • 실시간 코드 동기화

문제

복잡한 코드베이스를 탐색하는 것은 큰 도전이 될 수 있으며, 인지 과부하와 생산성 저하를 초래합니다. 소프트웨어 프로젝트가 성장함에 따라 전체 시스템에 대한 명확한 정신 모델을 유지하는 것이 점점 더 어려워집니다. 개발자들은 IDE의 한계와 씨름하며 파일, 함수, 모듈 간의 관계를 시각화하는 데 어려움을 겪습니다.

Source: …

기존 전략

개발자들은 오랫동안 코드베이스 복잡성을 해소하기 위해 다양한 전술을 사용해 왔습니다. 유용하지만, 이러한 방법들은 종종 수동 작업이 필요하거나 부분적인 시야만 제공합니다.

IDE 기반 탐색

• 정의로 이동
• 모든 참조 찾기
• 파일/폴더 탐색기

텍스트 검색

• grep 또는 IDE 검색 기능

수동 다이어그램 작성

• 화이트보드 스케치
• draw.io, Mermaid, PlantUML 같은 도구

예시: Go 마이크로서비스에서 API 요청 추적

// main.go
func main() {
    router := gin.Default()
    router.GET("/api/v1/users/:id", handlers.GetUserHandler)
    router.POST("/api/v1/users", handlers.CreateUserHandler)
    router.Run(":8080")
}

1. 진입점 식별 – main.go에서 시작합니다.
2. 핸들러로 이동 – handlers.GetUserHandler에 “정의로 이동”합니다.

// handlers/user.go
package handlers

import (
    "net/http"
    "strconv"

    "github.com/gin-gonic/gin"
    "your-project/internal/services"
)

func GetUserHandler(c *gin.Context) {
    idParam := c.Param("id")
    id, err := strconv.ParseUint(idParam, 10, 64)
    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid user ID"})
        return
    }

    user, err := services.GetUserService(id) // 여기서 정의로 이동
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }
    c.JSON(http.StatusOK, user)
}

3. 추적 계속 – services.GetUserService를 services/user.go에서 확인하고, 이어서 레포지토리 계층, 마지막으로 데이터베이스 연동까지 이동합니다.

선택적 문서화 (Mermaid)

graph TD
    A[Request /api/v1/users/:id] --> B(main.go: router.GET)
    B --> C{handlers.GetUserHandler}
    C --> D(services.GetUserService)
    D --> E(repository.GetUserFromDB)
    E --> F[Database]

정적 분석 도구

• SonarQube, Understand, CodeScene – 아키텍처 인사이트, 의존성 그래프, 코드 메트릭을 제공.
• 코드용 그래프 데이터베이스(예: Neo4j) – AST를 수집해 프로그래머블 쿼리와 시각화를 수행.

예시: Understand를 사용해 호출 그래프 생성

1. 도구에 코드베이스를 지정하고 GetUserHandler를 선택합니다.
2. 도구는 모든 호출자와 피호출자, 파일 경로, 매개변수, 잠재적인 순환 의존성을 보여주는 인터랙티브 다이어그램을 출력합니다.

참고: 이러한 도구들은 강력하지만 종종 외부 애플리케이션이 필요하고 일상적인 코딩 워크플로에 매끄럽게 통합되지 않을 수 있습니다.

무한 캔버스 솔루션

VS Code 내에서 무한 캔버스 개념은 시각적 코드 조직을 개발 환경에 직접 도입함으로써 탐색 이점과 직관적인 공간 매핑을 결합하는 새로운 솔루션을 제공합니다.

핵심 기능

작동 방식

1. 캔버스 만들기 – VS Code 명령 팔레트에서 새 “Canvas” 탭을 엽니다.
2. 요소 추가 – 코드 스니펫, 파일 또는 폴더를 선택해 캔버스로 드롭합니다.
3. 공간적으로 배치 – 논리적 그룹(예: 레이어, 모듈, 기능 경계)을 반영하도록 요소를 배치합니다.
4. 요소 연결 – 간단한 “선 그리기” 도구를 사용해 관련 항목을 연결하고, 관계 유형(호출, 데이터 흐름, 상속 등)을 라벨링합니다.
5. 주석 달기 – 노드나 엣지를 더블 클릭해 메모, 이슈 트래커 링크, 설계 문서를 추가합니다.
6. 동기화 – 편집기에서 코드를 수정하면 캔버스가 자동으로 업데이트됩니다. 캔버스에서 (예: 함수 이름 변경) 수정하면 소스 파일에 반영됩니다.

이점

• 컨텍스트 전환 감소 – 모든 관련 코드 조각을 한눈에 볼 수 있습니다.
• 정신 모델 향상 – 공간적 배열이 개발자의 개념 모델을 그대로 반영합니다.
• 빠른 온보딩 – 신규 팀원이 캔버스를 탐색하면서 코드를 파고들기 전에 아키텍처를 파악할 수 있습니다.
• 협업 강화 – 캔버스 파일을 버전 관리하고 공유함으로써 살아있는 설계 문서 역할을 합니다.

결론

VS Code Infinite Canvas 확장은 IDE를 선형 텍스트 편집기에서 동적인 시각 작업 공간으로 변환합니다. 개발자가 VS Code 내에서 코드를 드래그‑앤‑드롭, 링크, 주석 달기 할 수 있게 함으로써, 파편화된 탐색으로 인한 인지 과부하를 완화하고, 온보딩을 가속화하며, 복잡한 프로젝트에 대한 지속적이고 인터랙티브한 개요를 제공합니다. 이 접근 방식은 전통적인 코드 탐색과 현대적인 시각적 사고 사이의 격차를 메우며, 팀이 보다 효율적이고 명확하게 작업할 수 있도록 돕습니다.

Infinite Canvas 확장 – 시각적 코드 탐색

주요 기능

Source: …

확장 프로그램 사용 방법 – 단계별 안내

1. Canvas 시작

   • 명령 팔레트(Ctrl+Shift+P / Cmd+Shift+P)를 엽니다.
   • “Infinite Canvas: New Project View.” 를 선택합니다.

2. 주 진입점 고정

   • main.go 로 이동합니다.
   • main 함수에서 오른쪽 클릭 → “Add to Canvas.”
   • main 을 나타내는 드래그 가능한 카드가 캔버스에 나타납니다.

3. 라우터 설정 시각화

   • main 카드에서 router.GET(...) 를 찾습니다.
   • 해당 라인을 오른쪽 클릭 → “Follow Reference.”
   • 확장 프로그램이 GetUserHandler 카드(handlers/user.go 에서)를 추가하고 연결선을 그립니다.

4. 서비스 레이어 추적

   • GetUserHandler 카드에서 services.GetUserService 로의 참조를 따라갑니다.
   • 핸들러와 연결된 새로운 서비스 함수 카드가 나타납니다.

5. 데이터 접근 검사

   • GetUserService 카드에서 repository.GetUserFromDB 로 추적합니다.
   • 또 다른 연결된 카드가 생성됩니다.

6. 외부 컴포넌트 추가

   • 외부 의존성을 나타내는 일반 “Database” 카드를 수동으로 추가합니다.
   • 리포지토리 함수에서 이 카드로 연결선을 그립니다.

7. 주석 달기 및 정리

   • 카드들을 재배치하여 흐름이 좌‑우로 진행되도록 합니다.
   • GetUserHandler 카드에 스티키 노트 추가:

     “이 엔드포인트는 인증이 필요합니다.”

   • 관련 카드들(예: 모든 사용자 관련 함수)을 시각적으로 구분되는 경계 상자 안에 그룹화합니다.

이제 요청 흐름의 살아있는 인터랙티브 다이어그램이 완성되었습니다. 카드를 클릭하면 해당 코드로 이동하거나, 캔버스에서 직접 상세 정보를 확장해서 볼 수 있습니다.

무한 캔버스 접근 방식의 장점

• 컨텍스트 전환 감소 – 시각적 맵이 제자리에 유지되어 지속적인 파일 전환을 없앱니다.
• 지속적인 세션 – 캔버스 레이아웃이 저장되어, 중단한 바로 그 지점부터 다시 시작할 수 있습니다.
• 실시간 동기화 – 캔버스에서의 변경 사항이 즉시 소스 파일에 반영되고 그 반대도 마찬가지입니다.
• 풍부한 주석 – 코드 요소 옆에 메모, 다이어그램, 외부 링크 등을 추가할 수 있습니다.
• 시맨틱 통합 – VSCode의 Language Server Protocol을 활용하여 캔버스 요소에서 직접 “정의로 이동” 및 “참조 찾기”를 수행합니다.
• 줌 및 팬 – 대규모 코드베이스를 유연하게 탐색할 수 있으며, 높은 수준의 개요부터 세밀한 상세까지 이동이 가능합니다.

마무리 생각

VSCode Infinite Canvas 확장은 선형 텍스트 기반 탐색에서 공간적이고 인터랙티브한 경험으로의 중요한 변화를 의미합니다. 코드베이스의 지속적이고 개인화된 시각적 지도를 제공함으로써 다음을 가능하게 합니다:

• 복잡한 프로젝트를 이해하는 데 필요한 인지 부하를 낮춥니다.
• 신규 입문자의 학습 곡선을 평탄하게 합니다.
• 공유 가능한 캔버스 레이아웃을 통해 협업을 강화합니다.

이러한 확장이 성숙해짐에 따라 개발자 도구함에서 없어서는 안 될 필수 도구가 되어, 오늘날 복잡한 소프트웨어 생태계에서 효율성, 명확성 및 팀워크를 크게 향상시킬 것입니다.

👉 원본 기사를 읽어보세요 TechResolve.blog.