1. 나노바나나 프롬프트 168종 웹 앱 제작 및 배포 [0]

thumbnail 구독자 2만 명 돌파를 기념하여 168가지 나노바나나 프롬프트를 활용한 이미지 생성 및 편집 웹 앱을 제작하고 무료로 배포한다.

1.1. 나노바나나 프롬프트의 특징 및 활용 [0]

  1. 나노바나나는 구글 제미니 2.5 플래시 이미지 모델의 커뮤니티 별명이다 [6].
  2. 나노바나나는 혁신적인 AI 모델로 다양한 기능을 제공한다 [7].
    1. 캐릭터 일관성 유지, 다중 이미지 합성, 정확한 텍스트 표현이 가능하다 [7].
    2. 오래된 사진 복원, 이미지 속 객체 제거, 여러 이미지 자연스럽게 합성이 가능하다 [8].
  3. 전 세계 크리에이터들이 만든 100개가 넘는 프롬프트 기법을 모아 하나의 웹 앱으로 만들었다 [9].
    1. 복잡한 프롬프트 작성에 어려움을 느끼는 사용자들을 위해 개발되었다 [10].

1.2. 웹 앱 제작 과정 및 핵심 기능 [12]

  1. 제작 과정은 다음과 같다 [12].
    1. 기터브에서 전문가들의 프롬프트 모음을 다운로드한다 [12].
    2. AI 스튜디오 앱빌더에서 다운로드한 프롬프트들을 웹으로 구현한다 [12].
    3. 만들어진 앱의 핵심 기능들을 살펴보며 이미지를 편집한다 [13].
  2. 웹 앱의 목표는 다음과 같다 [19].
    1. 기존 방식의 불편함을 해결한다 [19].
      1. 사이트를 직접 방문하여 프롬프트를 복사하고 제미나이나 AI 스튜디오에 붙여넣어 실행하는 방식은 불편하다 [19].
    2. 168개의 프롬프트를 하나의 웹에서 한눈에 보고 클릭 몇 번으로 원하는 기법을 선택하여 바로 테스트할 수 있도록 한다 [21].

2. 나노바나나 쇼케이스 앱 개발 상세 과정 [16]

thumbnail 나노바나나 쇼케이스 앱은 전문가들이 공유한 프롬프트 모음을 활용하여 사용자 친화적인 이미지 생성 및 편집 웹 앱으로 개발되었다.

2.1. 앱 개발을 위한 재료 준비 및 UI 설계 [16]

  1. 프롬프트 모음 준비 [16]
    1. 앱의 핵심 재료는 전문가들이 공유한 나노바나나 프롬프트 모음이다 [16].
    2. 영상 설명란의 링크를 통해 다양한 케이스별 나노바나나 활용 결과물과 프롬프트를 확인할 수 있다 [18].
    3. 해당 페이지에서 리드미 MD 파일을 다운로드한다 [22].
    4. 다운로드한 파일을 메모장으로 열어보면 케이스별 목록, 케이스 제목, 만든이 정보, 설명, 프롬프트를 확인할 수 있다 [23].
    5. 레퍼런스를 기반으로 작업할 때는 이러한 구조를 미리 파악하는 것이 중요하다 [26].
  2. 앱 UI 설계 [27]
    1. 앱의 UI는 그림판으로 먼저 작업한다 [27].
    2. 요즘 LLM은 멀티모달 기능을 기본적으로 지원하므로, 인터페이스 디자인을 대략적으로 그려서 업로드만 해도 이를 기반으로 앱을 만들어준다 [28].
    3. 화면은 크게 세 부분으로 나눈다 [29].
      1. 왼쪽: 케이스 목록 [30]
      2. 중앙: 작업 목록 [30]
      3. 오른쪽: 결과 출력 [30]
    4. 인터페이스 디자인 시에는 한 화면에서 작업 프로세스 순서대로 구성하는 것을 추천한다 [31].
    5. 앱을 만들기 전에 고려해야 할 사항들을 정리하면 원하는 결과물을 얻는 데 도움이 된다 [32].

2.2. 앱 개발 시 고려사항 [33]

  1. 언어: 한글 앱이어야 한다 [34].
  2. 사용자 편의성: 168개의 케이스를 카테고리로 분류하여 사용자 편의성을 높여야 한다 [35].
  3. 컨텍스트 용량: AI 코딩 시 컨텍스트 용량을 고려해야 한다 [36].
    1. 168개의 케이스 제목과 프롬프트를 하나의 파일에 추가하면 에러가 발생하거나 수정 및 추가에 많은 시간이 소요될 수 있다 [36].
  4. 프롬프트 언어: 최적의 결과물을 위해 한글 앱이지만 프롬프트는 원문 그대로 영어로 사용해야 한다 [37].

2.3. AI 스튜디오 앱빌더를 활용한 앱 구현 및 개선 [38]

  1. 초기 앱 생성 [38]
    1. 앱빌더에 그림판으로 만든 UI 이미지를 업로드한다 [38].
    2. 다운로드한 리드미 파일을 TXT 확장자로 변경하여 업로드한다 [39].
    3. 대화창에 앱 요청 사항을 정리하여 입력하고 실행한다 [40].
    4. 초기 생성된 앱은 왼쪽 케이스 목록에 168개보다 적은 수의 케이스가 확인되지만, 동작은 정상적으로 이루어진다 [42].
  2. 누락된 케이스 추가 및 카테고리화 [45]
    1. 누락된 케이스를 다시 요청한다 [45].
    2. "두 개 파일에 총 168개의 케이스가 있어 누락되는 케이스 없이 모두 적용해"라고 요청한다 [46].
    3. "케이스가 너무 많아 소스 데이터도 카테고리별로 생성해"라고 요청한다 [47].
    4. 모든 케이스가 적용되고 동작 테스트 결과 문제가 없음을 확인한다 [49].
  3. 사용자 인터페이스 개선 [51]
    1. 결과 이미지 확대 및 다운로드 기능 추가: 작업 완료된 이미지가 너무 작아 불편하므로, 결과물을 클릭하면 확대되고 다운로드 버튼을 추가하도록 요청한다 [51].
    2. 카테고리명 시각화 개선: 케이스 목록의 카테고리명이 눈에 잘 띄지 않아 버튼 형태로 변경하도록 요청한다 [54].
    3. 케이스 넘버링 추가: 케이스 이름 앞에 넘버링을 추가하도록 요청한다 [56].
  4. AI 프롬프트 제안 기능 업그레이드 [59]
    1. 현재는 사이트에서 제공하는 기본 프롬프트만 구현되어 있다 [60].
    2. 사용자가 업로드하는 이미지와 추가 요청 사항에 맞춰 개선된 프롬프트를 AI가 제안하도록 요청한다 [60].
      1. "케이스별 프롬프트에 사용자가 추가 입력을 하면 이를 참조하여 개선된 프롬프트를 생성하고, 또 사용자가 업로드한 이미지를 참조하여 개선된 프롬프트를 생성하는 AI 프롬프트 제안 버튼을 추가해"라고 입력한다 [62].
    3. 테스트: 케이스 6번 '캐릭터 디자인'으로 테스트한다 [63].
      1. 기본 프롬프트는 입력한 이미지를 다양한 포즈의 디자인 시트로 작성하는 것이다 [64].
      2. 추가 입력에 "교복 대신 체육복"이라고 입력하고 AI에게 프롬프트를 제안받아 실행한다 [65].
      3. 제안받은 프롬프트로 생성해도 이미지에 체육복이 제대로 적용되는 것을 확인한다 [66].
  5. 최종 완성: 세 개의 메인 패널 폭 조절 및 케이스별 실제 사용법을 알 수 있도록 해당 웹페이지 링크를 추가하여 앱을 완성한다 [66].

2.4. 앱 배포 및 감사 인사 [67]

  1. 앱 완성 및 배포: 구독자 2만 명 돌파 기념으로 준비한 특별한 앱이 완성되었으며, 영상 설명란의 링크를 통해 무료로 배포한다 [67].
  2. 감사 인사: 구독자들의 성원에 감사하며, 영상이 도움이 되었다면 구독, 좋아요, 알림 설정을 요청한다 [69].