CodeNation : AI 앱 스토리

Notion + NotebookLM + Stitch를 이용한 타이머 앱 만들기

쌍큐 — Fri, 13 Feb 2026 19:06:57 +0900

작업에 쓰인 링크

몰입이론 학습된 NotebookLM : https://notebooklm.google.com/notebook/9e3e05f2-3b4b-4fd0-a806-2fde634be023

Google NotebookLM | 신뢰할 수 있는 정보에 기반한 조사 및 사고 파트너

AI의 기능을 활용해 빠르게 요약하고 메모를 작성하세요. NotebookLM은 신뢰할 수 있는 정보를 기반으로 하는 강력한 가상 조사 어시스턴트입니다.

notebooklm.google.com

사용된 노션 기획서 : https://github.com/aiappstorylab/focus-flow-lite/blob/main/%EA%B8%B0%ED%9A%8D%EC%84%9C.md

focus-flow-lite/기획서.md at main · aiappstorylab/focus-flow-lite

Contribute to aiappstorylab/focus-flow-lite development by creating an account on GitHub.

github.com

완성된 앱 Github : h ttps://github.com/aiappstorylab/focus-flow-lite

GitHub - aiappstorylab/focus-flow-lite

Contribute to aiappstorylab/focus-flow-lite development by creating an account on GitHub.

github.com

안티그래비티 작업 기록 : https://github.com/aiappstorylab/focus-flow-lite/blob/main/Antigravity_history.md

focus-flow-lite/Antigravity_history.md at main · aiappstorylab/focus-flow-lite

Contribute to aiappstorylab/focus-flow-lite development by creating an account on GitHub.

github.com

Stitch 작업물 : https://stitch.withgoogle.com/projects/16885526264260120918

완성화면

Antigravity에 MCP 셋팅하기(Notion, NotebookLM, Stich)

쌍큐 — Wed, 11 Feb 2026 15:50:40 +0900

1. Antigravity에서 Agent 창에서 오른쪽 위에 있는 ... 클릭하여 MCP Servers 클릭.

2. MCP Store가 뜨는데 Store에 있는 거는 간단하게 클릭해서 설치하시면 됩니다.

3. Notion MCP 설치해보겠습니다. - MCP Store에 등록된 경우

Notion API Token 오른쪽에 있는 아이콘 클릭하시면 토큰 발급 발을 수 있는 창이 뜹니다. 미리 노션 로그인 해놓으시면 편합니다.
아래 창에서는 새 API 통합 클릭합니다.

관련 워크스페이스에 MCP연결해서 작업할 워크스페이스 선택하고 저장하면 API 키와 관리페이지가 생성 됩니다.

사용권한 메뉴에서 편집권한 눌러서 사용할 페이지 선택 합니다.

프라이빗 API 통합 시크릿에 표시 눌러서 해당 토큰 복사합니다.

안티그래비티로 돌아와서 해당 창에 토큰 입력 하시고 Save하시면 완료 됩니다.

테스트는 Agent 채팅창에서 노션이 연결 되었는지 확인하고 문서 간단하게 만들어 보겠습니다.
채팅창에 노션 연결이 되었는지? 그리고 리액트 앱 생성하는 방법 문서하나 만들라고 하겠습니다.

이렇게 채팅창에 AI가 MCP Tool 해서 notion 접두사가 붙어 있으면 작업이 잘되는 겁니다. 그리고 보면 이렇게 문서가 생성된 것을 볼 수가 있습니다.

이렇게 MCP Store에 있는 것은 쉽게 설치하고 연결이 편하게 할 수 있으나, 이제 Store에 없는 경우는 직접 설정을 해줘야 합니다.

4. NotebookLM MCP 설치하기 - MCP Store에 등록이 안된 경우

MCP Store 오른쪽 상단에 Manage MCP Servers 클릭하겠습니다.

Manage MCPs 창이 뜨면 View raw config 클릭하시겠습니다.

mcp_config.json에다가 이제 MCP 정보를 넣으시면 됩니다.

NotebookLM MCP가 올라와 있는 Github로 이동하시겠습니다.

https://github.com/PleasePrompto/notebooklm-mcp

GitHub - PleasePrompto/notebooklm-mcp: MCP server for NotebookLM - Let your AI agents (Claude Code, Codex) research documentatio

MCP server for NotebookLM - Let your AI agents (Claude Code, Codex) research documentation directly with grounded, citation-backed answers from Gemini. Persistent auth, library management, cross-cl...

github.com

Installation 부분 보면 각 AI 툴에 따라 설치 방법이 나와 있습니다, Antigravity 항목이 없어서 Other MCP clients 내용을 복사합니다.

이 내용만 추가하면 됩니다.

"notebooklm": {
  "command": "npx",
  "args": ["notebooklm-mcp@latest"]
}

이렇게 넣으시면 됩니다.

이렇게까지 넣으시면 일단 셋팅은 끝났고, 인증을 해야합니다. 인증 방법도 역시 Github에 올라와 있습니다.

보시면 아시겠지만, 일단 먼저 로그인 해달라고 Agent 채팅창에 프롬프트 입력합니다. 그러면 프롬프트 창에 파란 버튼이 뜨는데 Allow Once 클릭하면 구글 로그인 창이 뜨니 구글 로그인 하시면 됩니다. 그리고 2차 인증으로 Proceed 파란 버튼이 뜨면 클릭하시면 인증이 끝난 상태면 연결이 완료 됩니다.

완료되면 본인 NotebookLM에 Notebook 목록이 뜹니다. 하나 정상적으로 읽어오는지 확인하기 위해서, 문서하나 요약해달라고 하겠습니다.

이렇게 해당 노트북 내용 받아오는 것을 볼 수 있습니다. 작업시 사용할 때는 해당 노트북 링크를 주는 것이 좋습니다.
이렇게 NotebookLM 연결이 끝났습니다. AI 툴에 따라서 사용할 노트북 등록 해주셔야 합니다.
사용할 노트북 링크를 프롬프트에 넣을때에는 그전에 공유링크(링크가 있는 모든 사용자)만들어서 접근하게끔 해야합니다.

5. Stitch MCP 연결하기

Stitch 접속 하시겠습니다.

https://stitch.withgoogle.com/

Stitch - Design with AI

Stitch generates UIs for mobile and web applications, making design ideation fast and easy.

stitch.withgoogle.com

Stitch가 지금 현재 기능이 계속 추가되고 있어, MCP 연결 지원 및 Figma로 디자인한 결과를 내보내기까지 가능합니다.

Stitch에서 오른쪽위에 ... 눌러서 Doc로 접속하겠습니다.

해당 페이지에서 Setup & Authentication 클릭하면 해당 페이지가 뜹니다 오른쪽 보면 MCP Client Setup에 Antigravity에 설치하는 방법 나옵니다.

저 내용 복사해서 API Key 넣으면 됩니다.

"stitch": {
  "serverUrl": "https://stitch.googleapis.com/mcp",
  "headers": {
    "X-Goog-Api-Key": "YOUR-API-KEY"
  }
}

이렇게 넣고 API Key 가져와서 넣어 주면 됩니다. API Key 가져오는 방법 입니다.

복사 해서 mcp_config.json에 추가하시면 됩니다.

연결이 잘되었는지 Manage MCPs 보시면 Stitch가 있는지 보시면 됩니다.

이렇게 떠있으면 됩니다.

그러면 한번 제가 디자인 하나 만들어 놓은게 있어서 한번 이 디자인대로 만들어 달라고 한번 해보겠습니다.

이렇게 프롬프트 입력해서 작업 시키고 아래가 그 결과물 입니다. 최대한 비슷하게 하긴 했네요, 이때 잘못된 부분은 다시 설명해서 수정하시면 됩니다. Agent 채팅창 기록 잘보면 MCP Tool : stitch 호출되는거 보입니다. 이러면 정상적으로 연동이 되어 있는 부분입니다.

왼쪽이 Stitch화면, 오른쪽은 AI가 작업한 결과물 입니다.

여기까지가 Antigravity에 MCP 연결한 방법 되겠습니다. 에러발생하는 부분은 댓글 남겨 주시면 알려드리겠습니다!

자바 기초 1일차 - 콘솔 화면에 원하는 내용 출력하기

쌍큐 — Thu, 5 Nov 2020 15:59:45 +0900

자바 셋팅은 이전 유튜브 동영상을 참고하세요

자바 코드 구조

자바는 기본적으로 클래스 단위로 코드를 생성하며

자바 코드의 시작은 main에서 부터 시작된다.

컴퓨터는 코드를 작성한 순서대로 일을 하며, 일은 한번에 하나씩 진행한다.

한가지 일이 끝나면 ; 을 찍어 일이 마감되었다라는 것을 알려주면

그 다음 라인으로 넘어가 일을 한다.

화면에 출력하는 메서드

System.out.println("출력할 내용");

작성해볼 코드

본인의 이름과 나이, 사는 곳을 출력하는 코드를 작성해볼 것

출력 예시

이름 : 홍길동

나이 : 20

사는 곳 : 서울시 마포구

답안파일

PrintInfo.java

0.00MB

안드로이드 P 버전 http를 이용한 api 사용시 네트워크 환경설정

쌍큐 — Tue, 11 Sep 2018 17:40:32 +0900

안드로이드 P버전부터는 https를 권장하기에 http가 막힘

그래서 해당 설정을 해줘야 http 통신도 허가 해줌

res에 xml 폴더 작성 후 network-security-config.xml 작성

<?xml version="1.0" encoding="utf-8"?>

<network-security-config>

<base-config cleartextTrafficPermitted="true" />

</network-security-config>

AndroidManifest.xml에 application에 아래 속성 추가

android:networkSecurityConfig="@xml/network_security_config"

android:usesCleartextTraffic="true"

안드로이드 포트폴리오 예제

쌍큐 — Fri, 31 Aug 2018 17:58:09 +0900

안드로이드 포트폴리오 예제

app-debug.apk

포트폴리오.pptx

TV 클래스 - 클래스 작성하기

쌍큐 — Tue, 17 Apr 2018 19:48:22 +0900

#include <iostream>

using namespace std;

TV 클래스

- 전원, 음량, 채널, 음소거

- 멤버변수

1> 전원 - bool

2> 음량 - int

3> 채널 - int

4> 음소거 - bool

- 멤버함수

1> 전원OnOff() - void

2> 채널Up() - void

3> 채널Down() - void

4> 음량Up() - void

5> 음량Down() - void

6> 음소거OnOff() - void

class TV{

private:

bool power;

int vol;

int ch;

bool mute;

public:

//전원OnOff() - void, 전원On = true, 전원Off = false;

void PowerOnOff()

{

power = !power;

char *str = power ? "TV전원On" : "TV전원Off";

cout << str << endl;

}

void MuteOnOff()

{

mute = !mute;

char *str = mute ? "음소거 On" : "음소거 Off";

cout << str << endl;

}

//최대 채널 - 356

void chUp()

{

if(!power) return;

ch++;

if(ch > 356) ch = 1;

cout << "현재 채널 : " << ch << endl;

}

void chDown()

{

if(!power) return;

ch--;

if(ch < 1) ch = 356;

cout << "현재 채널 : " << ch << endl;

}

void volUp()

{

if(!power) return;

if(mute) MuteOnOff();

if(vol < 50) vol++;

cout << "현재 음량 : " << vol << endl;

}

void volDown()

{

if(!power) return;

if(mute) MuteOnOff();

if(vol > 0) vol--;

cout << "현재 음량 : " << vol << endl;

}

void Init()

{

power = mute = false;

vol = 10;

ch = 15;

}

};

int main(void)

{

TV tv;

tv.Init();

tv.PowerOnOff();

for(int i=0;i<400;i++)

tv.chUp();

tv.PowerOnOff();

for(int i=0;i<50;i++)

tv.volUp();

tv.chUp();

return 0;

}

JDBC SCHOOL 프로젝트 예제

쌍큐 — Thu, 1 Feb 2018 13:37:47 +0900

JDBC SCHOOL 프로젝트 예제

해당 프로젝트 구조를 보면서 작성하세요

school.zip

STL. map 기본 예제

쌍큐 — Thu, 1 Feb 2018 11:03:12 +0900

#include <iostream>

#include <map>

using namespace std;

int main(void)

{

//map 선언<키,값>

map<char, double> m;

//데이터 추가

m['A'] = 2.1; m['B'] = 12.11;

m['D'] = 5.551; m['C'] = 24.21;

m['E'] = 26.61; m['A'] = 3.14;

cout << "A키값에 해당되는 값 : "<< m['A'] << endl;

cout << "map에 저장된 값의 개수 : " << m.size() << endl;

m.erase('A');//키값으로 삭제

//cout << "A키값에 해당되는 값 : "<< m['A'] << endl;

//m.clear();//맵에 있는 내용 전부 초기화

//키값이 맵에 없으면 해당 키값으로 값을 0으로 초기화해서 저장

map<char, double>::iterator it;

for(it=m.begin();it!=m.end();it++)

{

cout << "키값 : " << it->first;

cout << "\t값 : " << it->second << endl;

}

return 0;

}

STL. Set 로또 예제

쌍큐 — Thu, 1 Feb 2018 10:49:45 +0900

#include <iostream>

#include <set>

#include <ctime>

#include <cstdlib>

using namespace std;

int main(void)

{

set<int> s;

srand((unsigned int)time(NULL));

for(int i=0;i<5;i++)

{

while(s.size()<6)

s.insert(rand() % 45 + 1);

set<int>::iterator it;

for(it=s.begin();it!=s.end();it++)

cout << *it << " ";

cout << endl;

s.clear();

}

return 0;

}

STL. Set 기본 예제

쌍큐 — Thu, 1 Feb 2018 10:18:24 +0900

#include <iostream>

#include <set>

using namespace std;

Set의 특징

1. 저장한 데이터가 자동 정렬

2. 중복된 데이터가 삽입 불가능

(고유값)

int main(void)

{

//Set 선언

set<int> s;

//데이터 추가

s.insert(5);s.insert(1);s.insert(3);

s.insert(1);s.insert(2);s.insert(4);

s.insert(3);s.insert(4);

//데이터 개수 확인

cout << "데이터 개수 : " << s.size() << endl;

//데이터 삭제

s.erase(3);

//Set에 있는 애용 비우기

//s.clear();

cout << "Set에 내용이 비어있느냐? " << s.empty() << endl;

//출력

set<int>::iterator it;

for(it=s.begin();it!=s.end();it++)

cout << *it << " ";

cout << endl;

return 0;

}