Spring Boot와 Claude로 작업 관리자 앱 만들기(Create a task manager app with Spring Boot and Claude)

이 튜토리얼에서는 Claude를 사용해 작업을 관리하는 Kotlin 앱을 만드는 방법을 배워요. 이 튜토리얼은 백엔드 인프라를 관리하는 데 Spring Boot를 사용하고, 애플리케이션을 계획하고 개발하는 일은 Claude가 담당해요.

AI의 도움 없이 앱을 만들고 싶다면 Kotlin과 Spring Boot로 웹 앱 만들기(Create a web app with Kotlin and Spring Boot) 튜토리얼을 따라가면 돼요.

다른 AI 기반 도구와 마찬가지로 Claude도 실수를 할 수 있어요. Claude의 변경 사항을 신중히 검토하고, 신뢰할 수 있는 코드에만 사용하세요. Claude의 보안 정책에 대한 자세한 내용은 Claude Code Docs를 참고해요.

출처: Create a task manager app with Spring Boot and Claude

본문

환경 설정하기(Set up the environment)

이 튜토리얼은 JetBrains AI Assistant를 통해 Claude를 사용하지만, 터미널에서 Claude Code를 이용해 같은 단계를 진행할 수도 있어요.

최신 버전의 IntelliJ IDEA를 다운로드해 설치해요.
JetBrains AI Assistant를 설치해요.
다음 중 한 가지 방법으로 Claude Agent를 활성화해요:

프로젝트 만들기(Create a project)

Spring의 웹 기반 프로젝트 생성기로도 Spring Boot 프로젝트를 만들 수 있어요.

IntelliJ IDEA에서 새 Spring Boot 프로젝트를 만들어요:

IntelliJ IDEA에서 File | New | Project를 선택해요.
왼쪽 패널에서 New Project | Spring Boot를 선택해요.
New Project 창에서 다음 필드와 옵션을 지정해요:
- Name: task-manager-demo
- Language: Kotlin
- Type: Gradle - Kotlin 이 옵션은 빌드 시스템과 DSL을 지정해요.
- Package name: org.jetbrains.kotlin.taskmanagerdemo
- JDK: jbr-21
- Java: 17 이 Java·JDK 버전이 설치되어 있지 않다면 드롭다운 목록에서 다운로드할 수 있어요.
[IMAGE: Create Spring Boot project]
모든 필드를 지정했는지 확인한 뒤 Next를 클릭해요.
Spring Boot 필드에서 최신 안정 버전의 Spring Boot를 선택해요.
Web | Spring Web 의존성을 선택해요.

[IMAGE: Set up Spring Boot project]
Create를 클릭해 프로젝트를 생성하고 설정해요. IDE가 새 프로젝트를 생성하고 열 거예요. 프로젝트 의존성을 다운로드하고 가져오는 데 시간이 걸릴 수 있어요.

개발 계획 만들기(Create a development plan)

프로젝트에서:

[IMAGE: AI Chat] AI Chat 도구 창을 열어요. 기본적으로 Chat 모드가 선택되어 있어요. Claude Agent를 선택해요.

[IMAGE: Select Claude Agent]
Mode: Default [IMAGE: Operation mode]를 클릭하고 Mode: Plan Mode를 선택해요. 이제 Claude Agent는 행동을 실행하지 않고 계획만 세울 준비가 된 상태예요.

[IMAGE: Select Plan Mode]

다양한 운영 모드에 대한 자세한 내용은 운영 모드 선택(Select operation mode)을 참고해요.
Claude에게 작업 관리자 앱을 만들어 달라는 프롬프트를 작성해요. 무엇이 포함되어야 한다고 생각하는지 몇 가지 세부 사항을 공유해요. 예를 들면:

I'd like to create a task manager application for managing tasks, such as a grocery list. 
It should have a basic UI and include categories, due dates, priorities, and status tracking. 
Use VCS while working. Work step by step and create commits at each stage so I can review the changes afterward.

프롬프트를 설계하는 방법에 대한 안내는 Claude Code best practices를 참고해요.

Claude는 기존 프로젝트 구조를 탐색하고 계획을 제안해요. 4. 진행하기 전에 계획을 신중히 검토해요. 수정하고 싶다면 No, keep planning을 선택하고 후속 의견을 공유해요. 5. 진행할 준비가 되면, Claude의 변경 사항에 대해 어느 정도 통제권을 갖고 싶은지에 맞는 Yes ... 옵션을 선택해요.

[IMAGE: Ready to code]

다양한 옵션에 대한 자세한 내용은 Claude Code permission modes를 참고해요.

Claude가 Plan Mode를 종료하고 작업을 시작해요. 작업이 끝날 때까지 기다려요.

커밋 검토하기(Review the commits)

앱을 실행하기 전에 생성된 변경 사항을 신중히 검토해요:

Git 도구 창을 열어 커밋 목록을 확인해요.
커밋을 선택하고 각 수정된 파일을 더블클릭해 IntelliJ IDEA의 나란히 보기(side-by-side) 뷰어에서 diff를 검토해요.

[IMAGE: Side-by-side viewer]

앱 실행하기(Run the app)

변경 사항이 마음에 들면 앱을 실행해요:

bootRun Gradle 태스크를 실행하거나 터미널에서 다음 명령을 입력해요:

./gradlew bootRun

브라우저에서 localhost URL을 열어요. 기본값은 보통 다음과 같아요:

http://localhost:8080

이제 Claude가 만든 기본 UI를 볼 수 있을 거예요.

[IMAGE: Run the app]

Claude가 UI를 설계하므로, 여러분의 UI는 이 튜토리얼의 버전과 다르게 보일 수 있어요.

앱 테스트하기(Test the app)

이제 앱을 테스트할 차례예요.

UI를 수동으로 테스트하기(Test the UI manually)

UI 기능을 테스트하는 것부터 시작해요. 몇 가지 간단한 동작을 시도해 봐요:

작업을 만들고 폼 필드를 테스트해요.
작업을 편집해 변경 사항이 유지되는지 확인해요.
작업의 상태를 변경해요.
작업을 삭제해요.
작업의 카테고리를 변경해요.

이 동작 중 어느 하나라도 작동하지 않으면 Claude에게 새 프롬프트를 보내 문제를 조사하고 고쳐 달라고 요청해요.

단위 테스트 실행하기(Run unit tests)

Claude는 자동으로 몇 가지 테스트도 만들어요. 다음을 실행해 모든 테스트가 통과하는지 확인해요:

./gradlew test

또는 src/test 디렉터리에서 테스트를 열고 여백(running gutter)의 실행 아이콘 [IMAGE: run icon]을 클릭해요. 테스트가 성공하면 [IMAGE: run success icon] 아이콘이 표시돼요.

어떤 테스트가 작동하지 않으면 Claude에게 새 프롬프트를 보내 문제를 조사하고 고쳐 달라고 요청해요.

이제 초기 작업이 완료됐으니 다듬을 수 있어요. 예를 들어 사용자가 목록에서 작업을 직접 편집할 수 있게 UI를 개선해 봐요. 다음과 같은 프롬프트를 보낼 수 있어요:

As a next step, allow users to edit tasks inline. For example, let users click on a task title to edit it directly in the list,
and update fields like priority, due date, or status without leaving the current view. 
This change should make the app feel faster and more intuitive to use.

이전과 마찬가지로 Claude는 기존 프로젝트 구조를 탐색하고 계획을 제안해요. 계획을 수락한 뒤 Claude가 끝날 때까지 기다리고, 변경 사항을 검토한 다음 앱을 다시 실행해요.

[IMAGE: Refine your Spring Boot app with Claude]

축하해요! 여러분은 IntelliJ IDEA 안에서 바로 Claude를 사용해 Kotlin Spring Boot 애플리케이션을 계획하고, 만들고, 테스트하고, 다듬었어요.

다음 단계(What's next?)

Kotlin AI 스킬(Kotlin AI skills)에 대해 배워요.
Junie와 Kotlin AI 스킬 사용하기 튜토리얼을 확인해요.

Spring Boot와 Claude로 작업 관리자 앱 만들기(Create a task manager app with Spring Boot and Claude)