[NapkinAI] SpringBoot 프로젝트 시각화하기(학생 관리 API 예제)

안녕하세요, 오늘은 지난번 Github Copilot 을 통해 작성한 코드를 기반으로 시각화하는 AI 를 소개하려고 합니다. 코드를 작성하고 나서 프로젝트 구조나 흐름을 동료나 클라이언트에게 설명해야 할 때, 복잡한 텍스트나 코드만으로는 부족할 때가 있습니다. 이때 Napkin AI 를 사용해 보세요. Napkin AI는 텍스트를 입력하면 자동으로 다이어그램, 플로우차트, 마인드맵 같은 시각적 자료를 생성해 주는 AI 도구입니다. 특히, 개발자가 프로젝트 아키텍처나 API 흐름을 직관적으로 보여주고 싶을 때 좋은 선택이 될 수 있습니다.

이전포스팅 : [Github Copilot] 인텔리J 활용가이드(With SpringBoot)

[Github Copilot] 인텔리J 활용가이드(With SpringBoot)

---

Napkin AI 시작하기

1. 계정 생성
   • Napkin AI 웹사이트(https://app.napkin.ai/)에 접속해 구글 계정이나 이메일로 가입하세요. 현재 베타 기간이라 프로 플랜을 무료로 사용할 수 있습니다.
   • 참고: 모바일에서는 편집이 제한되니 데스크톱 브라우저를 사용하는 걸 추천합니다.
2. 첫 Napkin 생성
   • 로그인 후, 메인 화면에서 Create my first Napkin 버튼을 클릭합니다.
   • 텍스트 입력 창이 나타나면, 시각화하고 싶은 내용을 입력할 준비 합니다.
3. 시각화 및 내보내기
   • 텍스트를 입력한 후, 텍스트 블록 왼쪽의 파란 번개 아이콘을 클릭해 시각화를 생성합니다.
   • 여러 다이어그램 옵션 중 원하는 스타일을 선택하고, 색상, 폰트, 아이콘을 커스터마이징 할 수 있습니다.
   • 완성된 다이어그램은 PNG, SVG, PDF, PPT 형식으로 내보낼 수 있어 PPT나 문서에 바로 활용 가능합니다.

---

예제

SpringBoot 학생 관리 REST API 아키텍처
- 클라이언트가 REST API를 호출 (GET /api/students, POST /api/students)
- StudentController가 요청을 처리
  - GET: 모든 학생 목록 반환
  - POST: 새로운 학생 추가
- StudentRepository가 데이터베이스와 상호작용
  - JPA를 사용해 H2 데이터베이스에서 CRUD 작업 수행
- Student 엔티티: id, name 속성 포함
- MVC 패턴: Controller -> Service (생략) -> Repository -> Database

• 위와 같은 프롬프트를 입력합니다.

---

• 작성된 내용 좌측에 번개모양 아이콘을 클릭합니다.

---

• 원하는 시각화 자료와 스타일을 선택하면 화면에 표시됩니다.

---

• 표시된 자료는 별도로 저장하거나 다운로드할 수 있습니다.

---

• 마찬가지로 다른 내용들도 시각화 자료 타입이나 스타일을 설정할 수 있습니다.
• 결과물들은 PDF로 내보내거나 SVG로 다운로드하여 PPT에서 편집할 수 있습니다.

 

마무리

Napkin AI는 SpringBoot 프로젝트 같은 기술적인 내용을 시각화하는 데 강력한 도구입니다. API 예제를 플로우차트와 UML로 표현하면서, 코드만으로는 전달하기 어려운 구조와 흐름을 쉽게 공유할 수 있습니다. 특히 제안서, 기술 문서, 팀 프레젠테이션에서 빛을 발하는 도구라 한번 써보시길 추천드립니다.

감사합니다.