코딩하면솔솔잠옴

[2026] 앱인토스 플러터(Flutter) 출시하기 - ait 번들 생성

솔s — Tue, 5 May 2026 15:08:44 +0900

요즘 ‘앱인토스’라는 게 자주 눈에 띄더라구요

이게 뭘까 싶어서 찾아보니,
토스 앱 안에서 실행되는 미니앱을 직접 출시할 수 있는 플랫폼이었습니다!

그동안은 구글 플레이스토어에만 앱을 배포해봤는데,
토스 안에서도 앱을 서비스할 수 있다는 점이 꽤 흥미로워서
이미 만들어둔 앱을 앱인토스에 올려보게 됐습니다.

이번 글에서는 Flutter 앱을 앱인토스로 배포하는 과정을
처음부터 끝까지 정리해보려고 합니다.

같은 과정을 진행하시는 분들께 조금이나마 도움이 되었으면 좋겠습니다!

1. Flutter Web 빌드하기

flutter build web --release

web 폴더가 없다면 web 폴더 생성하기

flutter create .

2. Vite 프로젝트 생성

왜 Vite를 사용하는가?

Flutter Web은 단독으로는 앱인토스에 바로 배포할 수 없습니다.
그래서 Web 기반 번들 환경(Vite)을 하나 만들고,
그 안에서 iframe으로 Flutter 앱을 띄우는 방식으로 구성합니다.

즉,
Flutter = 실제 앱 UI
Vite = 앱인토스 배포용 껍데기
라고 생각하면 이해하기 쉽습니다.

npm create vite@latest test-vite-project -- --template react-ts

Ok to proceed? (y) 가 뜨면 y 하고 엔터

React 선택하고 엔터

TypeScript 선택하고 엔터

Yes 선택하고 엔터

3. Vite 프로젝트에 앱인토스 SDK 설치

cd test-vite-project
npm install
npm install @apps-in-toss/web-framework

4. Vite 프로젝트의 public 폴더에 Flutter Web 빌드한 것들 넣기

build/web안에 있는 내용 모두 복사(web 폴더 자체를 복사 하지 않기)

test-vite-project/public에 flutter 폴더 생성하여 붙여 넣기

index.html 파일은 test-vite-project/로 옮기기

5. Vite 프로젝트의 App.tsx 파일 수정

test-vite-project/src의 App.tsx 파일 수정

function App() {
  return (
    <iframe
      src="/flutter/index.html"
      style={{
        width: "100%",
        height: "100vh",
        border: "none",
      }}
      title="flutter-app"
    />
  );
}

export default App;

6. Vite 프로젝트 테스트하기

cd test-vite-project
npm run dev

잘 실행되는 것을 확인해 줍니다.

7. .ait 번들 파일 생성

npx ait init
npm run build

빌드 전에 test-vite-project/granite.config.ts 파일의 설정이
토스 콘솔에 등록한 앱 정보와 동일한지 꼭 확인해 주세요.
(특히 앱 이름, 아이콘 등)

이 부분이 맞지 않으면 심사에서 반려될 수 있습니다.

자세한 설정 가이드는 아래 공식 문서를 참고하시면 됩니다
https://developers-apps-in-toss.toss.im/bedrock/reference/framework/UI/Config.html

앱인토스 개발자센터

Are you an LLM? You can read better optimized documentation at /bedrock/reference/framework/UI/Config.md for this page in Markdown format 공통 설정 Copy as Markdown Download as Markdown 지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDK

developers-apps-in-toss.toss.im

8) 앱인콘솔 출시하기에 .ait 번들 파일 업로드

하루 정도 기다리니 승인되어 바로 출시할 수 있었습니다!!

[Flutter] BottomNavigationBar (플러터 바텀 네비게이션 바)

솔s — Tue, 12 Aug 2025 16:34:29 +0900

BottomNavigationBar

앱 하단에 위치하여 사용자가 앱의 주요 섹션을 빠르게 탐색할 수 있도록 돕는 UI 컴포넌트

주요 특징

메뉴 이동 담당
각 탭에 아이콘, 텍스트 라벨 제공
선택 상태에 따라 스타일 변경 가능
fixed 또는 shifting 타입 제공

구성 요소

속성	설명	사용법
currentIndex	현재 선택된 탭의 인덱스	currentIndex: _select
onTap	사용자가 탭을 선택했을 때 호출되는 콜백 함수	onTap: (index) { setState(() { _select = index; }); },
selectedItemColor	선택된 아이템의 색상	selectedItemColor: Colors.black,
unselectedItemColor	선택되지 않은 아이템의 색상	unselectedItemColor: Colors.grey,
type	네비게이션 바의 타입 fixed: 아이콘 크기 고정, 라벨 선택 유무 상관없이 보여줌 shifting: 선택 시 크기 변화, 선택 시 라벨 보여줌	type: BottomNavigationBarType.fixed,
items	네비게이션 항목 목록	items: const [ BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'), BottomNavigationBarItem(icon: Icon(Icons.feed), label: '동네생활'), BottomNavigationBarItem(icon: Icon(Icons.place), label: '동네지도'), BottomNavigationBarItem(icon: Icon(Icons.chat), label: '채팅'), BottomNavigationBarItem(icon: Icon(Icons.person), label: '나의 당근'), ],

      bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Colors.black,
          unselectedItemColor: Colors.grey,
          currentIndex: _select,
          onTap: (index) {
            setState(() {
              _select = index;
            });
          },
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
            BottomNavigationBarItem(icon: Icon(Icons.feed), label: '동네생활'),
            BottomNavigationBarItem(icon: Icon(Icons.place), label: '동네지도'),
            BottomNavigationBarItem(icon: Icon(Icons.chat), label: '채팅'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: '나의 당근'),
          ],
      ),

상단 그림자 추가

      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              blurRadius: 1,
              offset: Offset(0, -1),
            ),
          ],
        ),
        child: BottomNavigationBar( 
        ... 이전 코드들

전체코드

import 'package:flutter/material.dart';
import 'home/home_screen.dart';
import 'chatting/chatting_screen.dart';
import 'myCarrot/my_carrot_screen.dart';
import 'neighborhoodLife/neighborhood_life_screen.dart';
import 'neighborhoodMap/neighborhood_map_screen.dart';

class BottomNav extends StatefulWidget {
  const BottomNav({super.key});

  @override
  State<BottomNav> createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  // 현재 선택된 탭의 인덱스
  int _select = 0;
  // 각 탭의 화면(위젯) 리스트
  final List<Widget> _bottomList = [
    HomeScreen(),
    NeighborhoodLifeScreen(),
    NeighborhoodMapScreen(),
    ChattingScreen(),
    MyCarrotScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _bottomList[_select],
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              blurRadius: 1,
              offset: Offset(0, -1),
            ),
          ],
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Colors.black,
          unselectedItemColor: Colors.grey,
          currentIndex: _select,
          onTap: (index) {
            setState(() {
              _select = index;
            });
          },
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
            BottomNavigationBarItem(icon: Icon(Icons.feed), label: '동네생활'),
            BottomNavigationBarItem(icon: Icon(Icons.place), label: '동네지도'),
            BottomNavigationBarItem(icon: Icon(Icons.chat), label: '채팅'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: '나의 당근'),
          ],
        ),
      ),
    );
  }
}

[프로그래머스] Level1 K번째수(Python)

솔s — Sat, 11 Feb 2023 19:34:47 +0900

문제 설명

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.

예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면

array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다.
1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다.
2에서 나온 배열의 3번째 숫자는 5입니다.

배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요.

제한사항

array의 길이는 1 이상 100 이하입니다.
array의 각 원소는 1 이상 100 이하입니다.
commands의 길이는 1 이상 50 이하입니다.
commands의 각 원소는 길이가 3입니다.

입출력 예

array	commands	return
[1, 5, 2, 6, 3, 7, 4]	[[2, 5, 3], [4, 4, 1], [1, 7, 3]]	[5, 6, 3]

입출력 예 설명

[1, 5, 2, 6, 3, 7, 4]를 2번째부터 5번째까지 자른 후 정렬합니다. [2, 3, 5, 6]의 세 번째 숫자는 5입니다.
[1, 5, 2, 6, 3, 7, 4]를 4번째부터 4번째까지 자른 후 정렬합니다. [6]의 첫 번째 숫자는 6입니다.
[1, 5, 2, 6, 3, 7, 4]를 1번째부터 7번째까지 자릅니다. [1, 2, 3, 4, 5, 6, 7]의 세 번째 숫자는 3입니다.

소스코드

def solution(array, commands):
    answer = []
    num = []
    for i in range(len(commands)):
        num.append(sorted(array[(commands[i][0])-1:commands[i][1]]))
        answer.append(num[i][(commands[i][2])-1])
    return answer

[백준 11047] 동전 0 (Python)

솔s — Sat, 11 Feb 2023 16:48:37 +0900

문제

준규가 가지고 있는 동전은 총 N종류이고, 각각의 동전을 매우 많이 가지고 있다.

동전을 적절히 사용해서 그 가치의 합을 K로 만들려고 한다. 이때 필요한 동전 개수의 최솟값을 구하는 프로그램을 작성하시오.

입력

첫째 줄에 N과 K가 주어진다. (1 ≤ N ≤ 10, 1 ≤ K ≤ 100,000,000)

둘째 줄부터 N개의 줄에 동전의 가치 Ai가 오름차순으로 주어진다. (1 ≤ Ai ≤ 1,000,000, A1 = 1, i ≥ 2인 경우에 Ai는 Ai-1의 배수)

출력

첫째 줄에 K원을 만드는데 필요한 동전 개수의 최솟값을 출력한다.

예제 입력 1 복사

예제 출력 1 복사

예제 입력 2 복사

소스코드

import sys

a, b = map(int, sys.stdin.readline().split())

num = []

for i in range(a):
    num.append(int(sys.stdin.readline()))

num = sorted(num, reverse = True)
count = 0

for i in num:
    if(b // i > 0):
        count += (b // i)
        b %= i
        
    elif(b == 0) : break

print(count)

[백준 2164] 카드2 (Python)

솔s — Wed, 8 Feb 2023 23:30:44 +0900

문제

N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다.

이제 다음과 같은 동작을 카드가 한 장 남을 때까지 반복하게 된다. 우선, 제일 위에 있는 카드를 바닥에 버린다. 그 다음, 제일 위에 있는 카드를 제일 아래에 있는 카드 밑으로 옮긴다.

예를 들어 N=4인 경우를 생각해 보자. 카드는 제일 위에서부터 1234 의 순서로 놓여있다. 1을 버리면 234가 남는다. 여기서 2를 제일 아래로 옮기면 342가 된다. 3을 버리면 42가 되고, 4를 밑으로 옮기면 24가 된다. 마지막으로 2를 버리고 나면, 남는 카드는 4가 된다.

N이 주어졌을 때, 제일 마지막에 남게 되는 카드를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 정수 N(1 ≤ N ≤ 500,000)이 주어진다.

출력

첫째 줄에 남게 되는 카드의 번호를 출력한다.

예제 입력 1 복사

예제 출력 1 복사

소스코드

from collections import deque
num = int(input())
que = deque()

for i in range(1, num+1):
    que.append(i)

while(len(que) > 1):
    que.popleft()
    que.append(que.popleft())
    
print(que[0])

que에 1부터 num까지 값을 모두 넣은 뒤

deque 함수를 활용하여 문제 설명대로 코드를 짜면 쉽게 해결할 수 있었다.

deque은 스택과 큐의 기능을 모두 가진 자료구조로 collection 모듈에 속해 있다.

deque 모듈 가져오기

from collections import deque

deque 생성

q = deque()

오른쪽 값 추가

q.append(3) # 1, 2, 3

왼쪽 값 추가

q.appendleft(4) # 4, 1, 2, 3

뒤에 차례로 추가

q.extend([3, 4, 5]) # 1, 2, 3, 4, 5

앞에 차례로 추가

q.extendleft([1, 2, 3])  # 3, 2, 1

특정 값 삭제

q.remove(3) # 1, 2, 4

앞에 값 삭제 후 반환

                 # 1, 2, 3
num = q.pop()    # 1, 2

뒤에 값 삭제 후 반환

                   # 1, 2, 3
num = q.popleft()  # 1

값 회전 시키기

             # 1, 2, 3
q.rotate(1)  # 3, 1, 2
q.rotate(-1) # 1, 2, 3

[백준 10828] 스택 파이썬(Python)

솔s — Wed, 8 Feb 2023 22:41:22 +0900

[ 문제 ]

정수를 저장하는 스택을 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.

명령은 총 다섯 가지이다.

- push X: 정수 X를 스택에 넣는 연산이다.

- pop: 스택에서 가장 위에 있는 정수를 빼고, 그 수를 출력한다. 만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.

- size: 스택에 들어있는 정수의 개수를 출력한다.

- empty: 스택이 비어있으면 1, 아니면 0을 출력한다.

- top: 스택의 가장 위에 있는 정수를 출력한다. 만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.

입력

첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 않은 명령이 주어지는 경우는 없다.

출력

출력해야하는 명령이 주어질 때마다, 한 줄에 하나씩 출력한다.

예제입력

push 1

push 2

top

size

empty

pop

size

empty

pop

push 3

empty

top

예제출력

-1

소스코드

import sys

n = int(sys.stdin.readline())
list = []

for i in range(n):
    list2 = sys.stdin.readline().split()

    if(list2[0] == "push"):
        list.insert(0, list2[1])
        
    if(list2[0] == "pop"):
        if(len(list) == 0): print(-1)
        else: print(list.pop(0))
            
    if(list2[0] == "size"):
        print(len(list))
        
    if(list2[0] == "empty"):
        if(len(list) == 0): print(1)
        else: print(0)
        
    if(list2[0] == "top"):
        if(len(list) == 0): print(-1)
        else: print(list[0])

문제를 따라 코드를 짰을 때 시간 초과가 떴다.

이것을 해결하기 위해선 sys 모듈을 사용하면 된다.

input()과 sys.stdin.readline()의 차이는 무엇일까?

input()은 문자를 화면에 출력하여 사용자 입력을 기다리고 입력한 값이 하나씩 버퍼에 들어가며, 줄 바꿈을 제거하여 값을 반환해 준다.

sys.stdin.readline()은 화면에 출력하지 않고 한 번에 값을 읽어와 버퍼에 저장한다.

해당 차이로 인해 input()보다 sys.stdin.readline()이 빠르게 입력받으며 시간 초과를 해결할 수 있다.

문제 출처 : https://www.acmicpc.net/problem/10828

[프로그래머스] Level1 둘만의 암호(Python)

솔s — Wed, 8 Feb 2023 22:38:10 +0900

문제 설명

두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다.

문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다.
index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다.
skip에 있는 알파벳은 제외하고 건너뜁니다.

예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" 또한 위 규칙대로 바꾸면 "appy"가 되며 결과는 "happy"가 됩니다.

두 문자열 s와 skip, 그리고 자연수 index가 매개변수로 주어질 때 위 규칙대로 s를 변환한 결과를 return하도록 solution 함수를 완성해주세요.

제한사항

5 ≤ s의 길이 ≤ 50
1 ≤ skip의 길이 ≤ 10
s와 skip은 알파벳 소문자로만 이루어져 있습니다.
skip에 포함되는 알파벳은 s에 포함되지 않습니다.
1 ≤ index ≤ 20

입출력 예

s	skip	index	result
"aukks"	"wbqd"	5	"happy"

소스코드

def solution(s, skip, index):
    answer = ''
    a = "abcdefghijklmnopqrstuvwxyz"
    a = sorted(set(a) - set(skip))

    for i in s :
        answer += a[(a.index(i) + index) % len(a)]

    return answer

문제 풀이

입력 값이 소문자로만 이루어져 있기 때문에 a ~ z 까지의 알파벳을 변수에 할당해줌

2. set() 함수를 이용하여 skip의 단어를 빼준다.

그리고 set() 함수는 순서 없이 출력되기 때문에 sorted() 함수로 알파벳을 정렬해준다.

3. s의 문자열을 for문으로 하나씩 문자를 꺼내준다.

index() 함수를 이용하여 s 문자의 해당 위치를 찾고 + index를 해준다.

이때 s문자가 'z'의 값을 넘어가버리는 경우를 방지하기 위하여 a~z까지 들어있는 리스트의 나눈 나머지 값을 인덱스 값

으로 넣어 문자열에 추가해준다.

처음 접근법은 이중 for 문으로 skip의 문자를 하나씩 비교하여 리턴 값을 만들어줄까라는 생각을 하였다.

근데 더 간단한 방법이 있을 거 같은데...라는 생각을 가지고 고민을 더 해보았다.

이때 skip을 제외한 a ~ z의 소문자만 들어있는 리스트를 만들면 인덱스 고민도 많이 필요 없이 쉽게 해당 문자들을 찾을 수 있겠는데?라는 생각을 하고 코드 짜기를 시작!

처음 코드를 돌렸을 때 런타임 에러 4개가 발생했다!!!

이유가 멀까.. 질문 목록에 힌트가 있을까 싶어 들어가 보았는데 "인덱스를 더했을 때 알파벳 길이를 넘는 경우가 한 번이 아닐 수 있다"라는 나에게 필요한 해답이 있었다.

이것을 보고 해당 부분을 고쳐보니 문제를 해결을 했다ㅎ :)

[프로그래머스] Level1 크기가 작은 부분문자열 (Python)

솔s — Wed, 8 Feb 2023 22:33:19 +0900

문제 설명

숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.

예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다.

제한사항

1 ≤ p의 길이 ≤ 18
p의 길이 ≤ t의 길이 ≤ 10,000
t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다.

입출력 예tpresult

"3141592"	"271"	2
"500220839878"	"7"	8
"10203"	"15"	3

입출력 예 설명

입출력 예 #1
본문과 같습니다.

입출력 예 #2
p의 길이가 1이므로 t의 부분문자열은 "5", "0", 0", "2", "2", "0", "8", "3", "9", "8", "7", "8"이며 이중 7보다 작거나 같은 숫자는 "5", "0", "0", "2", "2", "0", "3", "7" 이렇게 8개가 있습니다.

입출력 예 #3
p의 길이가 2이므로 t의 부분문자열은 "10", "02", "20", "03"이며, 이중 15보다 작거나 같은 숫자는 "10", "02", "03" 이렇게 3개입니다. "02"와 "03"은 각각 2, 3에 해당한다는 점에 주의하세요

소스코드

def solution(t, p):
    answer = 0

    for i in range(len(t) - (len(p)-1)):
        if(int(t[i:i+len(p)]) <= int(p)) : answer += 1
    
    return answer

문제 풀이

p의 길이만큼 비교를 하기 위해 t에서 p를 뺀 값을 for문 돌려 준다.
if문으로 i번째부터 p의 길이만큼 문자열을 잘라 p와 비교해준다.
- 정수로 비교하기 위하여 내장형 함수 int() 사용

문제 출처 : https://school.programmers.co.kr/learn/courses/30/lessons/147355

[OrCAD] 시뮬레이션 배경색 변경하기

솔s — Mon, 27 Jun 2022 03:48:49 +0900

최종 배경색

아마 처음 시뮬레이션을 돌렸을 때 배경은 검은색에 연두색 선으로 되어있을 것이다

좀 더 깔끔하게 보이기 위해서 흰검으로 변경해 보자~!

Tools - Options... 클릭

Color Settiongs에 들어가 Background 의 색을 흰색으로 Foreground는 검은색으로 변경하면 된다.

[OrCAD] 시뮬레이션 돌리기 - 처음 만나는 디지털 논리회로

솔s — Mon, 27 Jun 2022 03:29:27 +0900

회로를 모두 만들었다면 !!

New Simulation Profile 클릭

Name을 자유롭게 넣고 Create 클릭!

입력값 넣은 ms만큼 Run to time에 넣고 Maximum step은 1ms로 설정

입력값을 넣은 배선 부분과 출력 배선 부분에 Voltage/Level Marker를 추가

이제 시뮬레이션 돌리기 !

Run PSpice 누르면 끝

시뮬레이션 결과값을 확인할 수 있다