1. 코딩 없이 10분 만에 나만의 앱 만들기 [1]

thumbnail 코딩 지식이 없어도 구글의 무료 도구와 AI(클로드)를 활용하여 10분 만에 나만의 앱을 만들 수 있다.

1.1. 앱 개발의 핵심 도구 및 무료 활용 [3]

  1. AI 코딩의 쉬운 접근성 [3]
    1. AI 코딩은 이제 누구나 쉽게 접근할 수 있는 수준으로 발전했다 [5].
    2. 코딩을 전혀 몰라도 구글의 기본 툴과 클로드(Claude) AI만으로 앱을 만들 수 있다 [6].
    3. 이 모든 과정은 100% 무료로 진행된다 [7].
  2. 구글의 무료 서비스 활용 [23]
    1. 앱 개발 시 서버 구축이나 데이터 관리의 어려움이 있었으나, 구글의 무료 서비스로 해결 가능하다 [23].
    2. 구글 시트, 구글 드라이브, 앱스 스크립트는 모두 무료로 제공된다 [25].
    3. 구글 제미나이(Gemini) 또한 무료 API를 제공하여 이 네 가지 도구를 통합해 쉽게 앱을 만들 수 있다 [26].

1.2. 완성된 앱 예시: 식단 관리 앱 [8]

  1. 앱의 기능 소개 [8]
    1. 완성된 앱은 휴대폰에 설치하여 실행할 수 있는 형태이다 [9].
    2. 예시로 식단 관리 앱을 통해 나이, 체중, 키 등의 정보를 입력하여 식단을 관리할 수 있다 [10].
  2. 식단 분석 및 조회 [11]
    1. 날짜와 식사 종류를 선택하고 음식 사진을 촬영하여 업로드하면 된다 [11].
    2. 분석 시작 버튼을 클릭하면 AI가 사용자의 상황에 맞는 식단을 분석한 결과를 제공한다 [12].
    3. 과거 식단 내역을 날짜별 또는 주별로 조회하고 칼로리까지 분석할 수 있다 [14].

1.3. 앱 개발 준비: API 키 발급 및 클로드 설정 [29]

  1. 구글 제미나이 API 키 발급 [29]
    1. 구글 AI 스튜디오에서 API 키를 발급받아야 한다 [32].
    2. 발급받은 API 키는 앱과 AI(제미나이)를 연동하여 앱의 요청을 제미나이가 분석하고 결과를 앱으로 돌려주는 데 사용된다 [39].
    3. 이 키는 외부에서 AI를 사용할 수 있도록 돕는 역할을 한다 [41].
  2. 클로드(Claude) AI 활용 [43]
    1. 클로드는 무료 요금제로도 앱 개발이 가능하며, 소넷 4 모델이 코딩 분야에서 가장 뛰어나다고 평가된다 [44].
    2. 클로드의 무료 버전은 응답 한도가 작지만, 간단한 앱은 충분히 만들 수 있다 [48].
    3. 채 GPT, 제미나이 등 다른 AI 플랫폼 모델도 사용 가능하지만, 본 강의에서는 클로드를 기준으로 진행한다 [45].

1.4. 스마트 여행 가이드 앱 만들기 실습 [50]

  1. 구글 시트 준비 및 계정 설정 [50]
    1. 구글 시트로 이동하여 새로운 스프레드시트를 생성한다 [50].
    2. 구글 계정이 여러 개 로그인되어 있다면, 실습할 계정 하나만 남기고 모두 로그아웃해야 한다 [52].
  2. 클로드에게 앱 개발 요청 [54]
    1. 클로드에 "해외여행 스마트 여행 가이드 앱을 만들려고 해"라고 요청한다 [54].
    2. 앱의 주요 기능(여행지/경로 추천)과 사용자 흐름(나라/지역/도시 선택)을 구체적으로 입력한다 [55].
    3. 클로드는 요청에 따라 데이터베이스 구조와 인터페이스 구성을 제안한다 [63].
    4. 클로드의 제안에 따라 구글 시트의 A열부터 필드를 설정한다 (예: 타임스탬프, 여행지, 인원수 등) [66].
  3. 앱 설정 정보 입력 [68]
    1. 발급받은 제미나이 API 키를 입력한다 [69].
    2. 제미나이 모델은 1.5 플래시를 사용하며, 이는 가장 빠른 모델이다 [72]. (더 나은 결과를 원하면 2.5 플래시 등 다른 모델 선택 가능)
    3. 구글 시트의 URL에서 시트 아이디를 복사하여 붙여넣고, 시트 이름을 "출력 결과"로 변경한다 [78].
    4. 문서 이름은 "스마트 여행 가이드 앱"으로 설정하고, 필드 구성은 시트의 A열부터 복사하여 큰따옴표로 묶어 붙여넣는다 [81].
    5. 클로드가 제안한 화면 구성을 그대로 복사하여 입력하고, 추가 요청으로 "최신 트렌드에 맞춰 세련되고 시원한 여름 느낌이 물씬 나는 상큼하고 접속했을 때 행복한 감정이 드는 디자인으로 꾸며줘"와 같은 디자인 요구사항을 추가한다 [84].
  4. 클로드의 코드 생성 및 구글 시트에 적용 [89]
    1. 클로드에 모든 설정을 입력하고 실행하면, 클로드가 앱 코드를 생성한다 [89].
    2. 클로드는 Code.gs(백엔드)와 Index.html(인터페이스 화면) 두 가지 코드를 생성한다 [99].
    3. 무료 버전의 경우 응답 길이 제한으로 "계속" 버튼을 클릭하여 전체 코드를 받아야 할 수 있다 [104].
    4. 구글 시트에서 확장 프로그램 > Apps Script로 이동하여 프로젝트 이름을 "스마트 여행 가이드 앱 프로젝트"로 변경한다 [112].
    5. Code.gs의 기존 코드를 지우고 클로드에서 생성한 Code.gs 코드를 붙여넣는다 [120].
    6. 파일 추가 버튼을 클릭하여 HTML 파일을 추가하고 이름을 "인덱스"로 설정한 후, 클로드에서 생성한 Index.html 코드를 붙여넣는다 [127].
  5. 앱 배포 및 실행 [134]
    1. 개발이 완료되면 배포 > 새 배포를 클릭한다 [136].
    2. 종류는 웹앱으로 설정하고, 설명은 "스마트 여행 가이드 앱 버전 1"로 입력한다 [139].
    3. 사용자는 "모든 사용자"로 설정하여 누구나 앱을 사용할 수 있도록 한다 [143].
    4. 배포 후 액세스 승인 절차를 거쳐 구글 계정 권한을 허용한다 [147].
    5. 배포가 완료되면 생성된 웹앱 URL을 복사하여 실행하면 앱이 완성된다 [159].
    6. 앱에 여행지, 인원수, 나이대, 여행 스타일, 여행 일수, 예산 규모 등을 입력하고 추천받기 버튼을 클릭하면 AI가 여행 계획을 생성해 준다 [164].
    7. 구글 시트에는 사용자의 입력 데이터가 자동으로 저장된다 [173].
  6. 앱 수정 및 테스트 [176]
    1. 클로드에게 "보기 안 좋아, 뭐를 추가해 줘" 또는 "버튼을 크게 바꿔 줘"와 같이 수정 요청을 할 수 있다 [182].
    2. 클로드가 생성한 수정된 코드를 Apps Script의 Code.gs와 Index.html에 다시 붙여넣고 저장한다 [183].
    3. 수정된 내용을 확인하려면 배포 > 테스트로 배포를 클릭하여 테스트용 URL을 생성한다 [187].
    4. 테스트용 링크(끝이 dv로 끝남)로 접속하여 변경 사항을 확인하고, 만족하면 배포 관리 > 편집에서 새 버전으로 업데이트한다 [191].

2. 다양한 앱 만들기 및 모바일 활용 [198]

thumbnail 앞서 배운 방법을 활용하여 음식 분석 앱과 같은 다양한 앱을 만들고, 이를 모바일 환경에서 편리하게 사용할 수 있다.

2.1. 음식 분석 앱 만들기 [198]

  1. 클로드에게 앱 개발 요청 [198]
    1. 클로드에 "음식 분석 앱을 만들려고 해"라고 요청하고, 헤더 및 화면 구성에 대한 추천을 받는다 [198].
  2. 구글 시트 설정 [202]
    1. 새로운 스프레드시트를 추가하고, 필드를 타임스탬프, 성별, 나이대, 영양 평가, 추천 사항 등으로 설정한다 [202].
    2. 시트 이름은 "분석 기록"으로 변경한다 [205].
  3. 앱 설정 정보 입력 및 코드 생성 [209]
    1. 이전과 동일하게 API 키, 시트 아이디, 시트 이름, 필드 구조, 화면 구성 등을 입력한다 [210].
    2. 클로드에 모든 설정을 입력하고 실행하면, 음식 분석 앱 코드를 생성한다 [216].
  4. 구글 시트에 코드 적용 및 배포 [220]
    1. Apps Script로 이동하여 프로젝트 이름을 "음식 분석 앱 프로젝트"로 변경한다 [223].
    2. Code.gs와 Index.html 코드를 각각 붙여넣는다 [227].
    3. 앱을 배포하고, 웹앱으로 설정한 후 "음식 분석 앱 버전 1"로 설명한다 [231].
    4. API 키 사용량 제한을 고려하여 권한은 본인 계정으로만 설정할 수 있다 [233].
    5. 배포 후 액세스 승인 절차를 거쳐 권한을 허용한다 [236].
    6. 배포된 앱 URL을 실행하여 햄버거 사진을 추가하고 분석 시작 버튼을 클릭하면, 치즈버거의 칼로리, 탄수화물 등 영양 정보를 분석해 준다 [241].
    7. 분석 결과는 PDF로 다운로드할 수도 있다 [243].

2.2. 기존 앱 활용 및 모바일 연동 [246]

  1. 식단 관리 앱 활용 [246]
    1. 강사가 미리 만들어둔 식단 관리 앱 템플릿을 활용할 수 있다 [246].
    2. 템플릿 사본을 만든 후, 구글 제미나이 API 키를 입력한다 [249].
    3. 사진 업로드 시 특정 폴더에 저장하고 싶다면 폴더 아이디를 입력한다 [252].
    4. "나의 목표" 시트에 신체 정보를 입력하고, "권장 섭취량 분석" 버튼을 클릭하여 권한 승인 후 분석 결과를 확인할 수 있다 [254].
  2. 모바일에서 앱 사용 [264]
    1. Apps Script에서 앱을 배포한 후 생성된 앱 링크를 복사한다 [265].
    2. 모바일 브라우저에서 해당 링크로 이동한 후, 공유 버튼을 클릭하여 "홈 화면에 추가" 기능을 사용하면 앱 아이콘을 만들 수 있다 [270].
    3. 아이폰의 경우 사파리 브라우저에서 구글 드라이브 이미지가 보이지 않을 수 있으므로, 크롬 브라우저를 사용하면 해결된다 [276].