stitch + flutter로 앱 만들기

소개

• stitch로 앱 화면 구성을 디자인 후 flutter로 안드로이드 앱을 실행했습니다.

• 백엔드 구성 후 안드로이드 앱에서 서버 API 연동을 테스트했습니다.

진행 방법

• 중고거래 앱을 모티브로 stitch에 프롬프트를 작성했습니다. 처음 생성된 결과물은 색상이 마음에 안들어서 밝은 색으로 바꿔달라고 요청하니 잘 바꿔줬습니다.

중고 물품거래 게시판을 앱을 만든다. 게시물 목록, 게시물 작성, 게시물 조회, 게시물 수정이 가능하다. 게시물 조회 페이지에서 수정/삭제 버튼이 보이며, 댓글들도 함께 표시된다.

• 디자인 파일을 다운로드 후 claude code로 flutter 앱 생성을 요청했습니다. 프로젝트 생성부터 코드 작성까지 자동으로 진행되는게 신기했습니다.

• 서버 API 구성하기 전에 우선 중고 거래 게시물 / 댓글에 대한 모델을 생성했습니다. 이것도 claude에 요청하니 클래스 파일을 잘 만들어줬습니다.

  사본

  /**
   * RestController에서 바로 쓰기 좋은 요청/응답 DTO(record) 모음.
   */
  public final class BoardDtos {
  
      private BoardDtos() {
      }
  
      /**
       * ===== Enums =====
       */
      public enum PostStatus {
          DRAFT,      // 임시저장
          PUBLISHED,  // 게시중
          DELETED     // 삭제(소프트삭제용)
      }
  
      // ... 생략
  }

• 서버에 게시물 CRUD API를 추가 후 자동으로 생성된 OpenAPI 문서를 claude code에 제공했습니다. 문서 기반으로 flutter에 API 호출 코드를 추가했고 잘 동작하는 것도 확인했습니다.

ALT

한국어 피드 - 스크린샷

결과와 배운 점

• stitch를 처음 접했는데 기대보다 깔끔한 디자인을 만들어줘서 놀랐습니다. 앞으로도 자주 활용할 것 같습니다.

• 이전에 flutter 개발 환경을 설정해서 앱 빌드 후 실행까지는 어렵지 않게 진행했습니다. claude code로 디자인 html만으로도 앱을 그대로 만들어주는게 신기했습니다.

• claude로 코드 골격을 빠르게 잡을 수 있어 개발 시간 절약할 수 있었습니다.

도움 받은 글

• 안드로이드 앱 디자인부터 내 폰에 설치까지