코드 기초 - 프로그램 만들기

나는 지금 정수기 자동 성능해석 프로그램을 만들거야.
웹 앱 형태로 만들거야. 내가 계획하고 있는 순서는 아래와 같아. 
1. aistudio에서 제미나이 API 받기
2. claude sonnet 4에 프롬프트를 넣어서 구글시트의 구조 잡기
3. claude sonnet 4에 프롬프트를 넣어서 App script 짜기
4. code.hs, index.html 코드를 만들고, 구글시트 App scrip에 복붙한 뒤 배포하기

위 4가지 순서를 내가 어디서 교육을 받아서 들은 건데, 이를 구체적으로 정수기 자동설계 프로그램 웹 앱을 만들기 위해서는 4가지 순서를 각각 어떻게 활용해야 하는지 아주 구체적으로 알려줘.

그리고 마지막으로 일단 aistudio에서 제미나이 API 받는 법을 알려줘

 

----------

 

계획하신 4단계 프로세스는 '구글 워크스페이스(Sheets + Apps Script)'를 백엔드로 사용하고 '제미나이(AI)'를 두뇌로 사용하는 효율적인 웹 앱 개발 방식입니다.

정수기 자동 성능해석 프로그램(예: 유량, 필터 수명, 냉/온수 온도 시뮬레이션 등)을 목표로, 각 단계를 구체적으로 어떻게 실행해야 하는지 가이드를 드립니다.

---

1단계: AI Studio에서 제미나이 API 키 받기

웹 앱이 정수기 성능 데이터를 분석하거나 설계를 최적화할 때 제미나이의 지능을 빌려오기 위한 '열쇠'를 만드는 과정입니다.

1. Google AI Studio에 접속합니다.
2. 왼쪽 사이드바에서 "Get API key" 메뉴를 클릭합니다.
3. "Create API key in new project" 버튼을 눌러 키를 생성합니다.
4. 생성된 문자열(API Key)을 복사하여 안전한 곳에 저장해 두세요. (나중에 3단계 Apps Script 코드에 입력하게 됩니다.)

---

2단계: Claude를 활용한 구글 시트 구조 설계

구글 시트는 웹 앱의 데이터베이스(DB) 역할을 합니다. Claude에게 정수기 해석에 필요한 변수들을 정의해달라고 해야 합니다.

• Claude에게 던질 프롬프트 예시:
• "정수기 성능을 자동 해석하는 웹 앱을 만들 거야. 입력값(유입 수압, 필터 종류, 목표 온도 등)과 결과값(최종 유량, 에너지 효율, 예상 필터 수명 등)을 저장할 구글 시트 구조를 짜줘. 각 열(Column)의 제목과 데이터 형식을 표로 정리해 줘."
• 결과: Claude가 제안한 구조대로 구글 시트에 헤더(A1, B1, C1...)를 만듭니다.

---

3단계: Claude를 활용한 Apps Script(백엔드) 코딩

웹 앱의 로직을 담당하는 부분입니다. 제미나이 API를 호출하고 시트와 통신하는 코드를 작성합니다.

• Claude에게 던질 프롬프트 예시:
• "구글 시트 기반 웹 앱을 위한 Google Apps Script 코드를 짜줘.
  1. 사용자가 웹 화면에서 입력한 정수기 사양 데이터를 시트에 저장하고,
  2. 이 데이터를 제미나이 API(Gemini 1.5 Pro)에 보내서 성능 해석 결과(텍스트)를 받아와야 해.
  3. API 키는 변수로 처리해 주고, doGet 함수를 포함해서 작성해 줘."
• 결과: Claude가 Code.gs 파일에 들어갈 JavaScript 코드를 생성해 줍니다.

---

4단계: 코드 복사 및 웹 앱 배포

실제로 작동하는 웹 페이지를 세상에 공개하는 단계입니다.

1. 시트 연결: 구글 시트 상단 메뉴 [확장 프로그램] > [Apps Script]를 클릭합니다.
2. Code.gs 작성: 왼쪽 코드.gs 파일에 Claude가 짠 3단계 코드를 복붙합니다. (1단계에서 받은 API 키를 코드 내 지정된 위치에 넣으세요.)
3. HTML 작성: [파일 +] 버튼을 눌러 index.html 파일을 만들고, Claude에게 요청해서 받은 UI 코드(입력창, 버튼 등)를 복붙합니다.
4. 배포: 우측 상단 [배포] > [새 배포]를 누릅니다.
   • 유형 선택: 웹 앱
   • 액세스 권한: 모든 사람(Anyone)으로 설정해야 누구나 접속 가능합니다.
5. URL 획득: 배포가 완료되면 생성된 웹 앱 URL을 복사해 브라우저에서 실행합니다.

---

💡 정수기 해석 엔지니어를 위한 팁

• 수식 포함: 3단계에서 Claude에게 코드를 요청할 때, CFD 엔지니어로서 사용하는 물리 수식(예: 압력 강하 공식 등)을 함께 알려주면 제미나이가 훨씬 정확한 해석 결과를 내놓도록 코드를 보조할 수 있습니다.
• UI 최적화: index.html을 만들 때 "부트스트랩(Bootstrap)을 사용해서 깔끔한 엔지니어링 대시보드 형태로 짜줘"라고 요청하면 시각적으로 훨씬 전문적인 도구가 됩니다.