본문 바로가기
노코드툴 이야기

[FlutterFlow] 플러터플로우를 이용하기 전 알아두면 좋은 JSON Path의 기초 지식

모리씨 2025. 1. 29. 15:07
728x90
반응형

플러터플로우를 이용하기 전 알아두면 좋은 JSON Path의 기초 지식 (개발초보 ver)

저는 개발자가 아니기 때문에 개발과 관련한 아무 지식이 없는데요. 요즘에는 코드를 몰라도 서비스를 만들 수 있는 노코드툴이 있어 나만의 앱을 만들 수 있다는 것을 알게 되었습니다.

그 중 사용자가 지속적으로 늘고 있다는 플러터플로우(Flutterflow)에 대해 요즘 공부하고 있는데요. 개발에 대해 아무것도 모르는 초심자 입장에서는 다루기 꽤 어렵지만, 그래도 코딩을 처음부터 배우는 것보다는 훨씬 더 빠른 시일 내에 적당한 모습의 앱을 만들어볼 수 있을 것 같아 요즘 열심히 배우고 있습니다.

제가 듣고 있는 강의의 최종 목표는 플러터플로우를 ChatGPT와 연동해서 나만의 앱을 만드는 것인데요. 강의를 들어도 잘 이해가지 않는 부분이 있으면 챗지피티에게 좀 더 상세한 설명을 요구하면서 강의 내용을 따라가고 있어요.

이처럼 챗지피티와 주고 받은 대화를 바탕으로, 오늘은 저처럼 개발에 대한 사전지식은 없지만 그래도 나만의 서비스를 만드는 것에 호기심을 갖고 있는 분들을 위해 챗지피티와 주고 받은 대화 일부분을 공유하려고 합니다. 

 

[목차]

  • 플러터플로우에 대한 질문
  • JSON Path에 대한 질문
    • JSON Path는 무엇인가?
    • JSON Path에서 쓰는 표현에 대해

 

 

Q. 친절하고 친근한 어투로 flutterflow에 대한 전반적인 설명을 해줄래?

 

🌟 FlutterFlow란? 완전 초보도 이해할 수 있는 친절한 가이드 🚀

FlutterFlow는 코딩을 몰라도 앱을 만들 수 있는 노코드(No-Code) 개발 툴이야!
웹에서 블록을 끌어다 놓듯이 UI를 디자인하고, 데이터베이스와 API도 쉽게 연결할 수 있어.

 

1️⃣ FlutterFlow는 어떻게 동작할까?

FlutterFlow는 Flutter(구글이 만든 앱 개발 프레임워크)를 기반으로 하고 있어.
즉, FlutterFlow에서 만든 앱은 실제 Flutter 코드로 변환돼서 동작해! 💡

📌 쉽게 말하면?
👉 Flutter의 강력한 기능을 유지하면서도, 코딩 없이 앱을 만들 수 있는 도구야! 🎨

 

2️⃣ FlutterFlow에서 앱을 만들 때 필요한 개념

🔹 📌 UI 빌더 (화면 디자인하기)

  • 드래그 앤 드롭 방식으로 버튼, 텍스트, 이미지 등을 배치하면 돼!
  • 웹사이트 만드는 것처럼 시각적으로 레이아웃을 조정할 수 있어.
  • Stack, Column, Row 같은 Flutter의 UI 구조도 사용할 수 있어.

💡 예제:
👉 "로그인 화면"을 만들려면?

  • 텍스트 필드 (이메일, 비밀번호 입력)
  • 로그인 버튼
  • 회원가입으로 이동하는 버튼
    📌 이걸 블록처럼 끌어다 놓으면 끝! 😊

 

🔹 📌 데이터베이스 연동 (Firestore, API 사용하기)

앱을 만들려면 데이터를 저장하고 불러와야겠지?
FlutterFlow에서는 Firebase Firestore를 쉽게 연결할 수 있어!

💡 예제:
👉 "사용자 프로필"을 만들려면?

  • Firestore에 "사용자" 데이터 저장
  • 앱에서 Firestore의 데이터를 불러와서 사용자 정보를 표시
    📌 설정 몇 번만 하면 바로 작동해! 🎯

💡 그리고 REST API도 연결할 수 있어서 외부 데이터도 활용할 수 있어!
(예: 날씨 API, ChatGPT API 등)

 

🔹 📌 액션 & 로직 (앱이 동작하는 방식 설정하기)

버튼을 누르면 어떤 일이 일어나야 할까?
FlutterFlow에서는 "Action"을 추가해서 앱의 동작을 설정할 수 있어!

💡 예제:
👉 "로그인 버튼"을 누르면?

  • Firebase에서 이메일과 비밀번호 확인
  • 로그인 성공하면 홈 화면으로 이동
  • 실패하면 "비밀번호가 틀렸어요!" 메시지 띄우기

📌 버튼을 클릭해서 설정만 하면 자동으로 적용돼! 🎯

 

🔹 📌 API 연결 (ChatGPT 같은 기능도 추가 가능!)

FlutterFlow에서는 외부 API를 연결해서 더 똑똑한 앱을 만들 수도 있어!

💡 예제:
👉 ChatGPT API를 연결하면?

  • 앱에서 질문을 입력하면 ChatGPT가 답변해줌! 🤖
  • JSON 데이터를 받아서 화면에 표시!

📌 FlutterFlow에서 API 요청을 설정하면, 자동으로 데이터가 연결돼! 🛠️

 

🔹 📌 JSON 데이터 다루기 (API에서 가져온 데이터 활용하기)

JSON은 데이터를 주고받을 때 많이 쓰이는 형식이야.
FlutterFlow에서 API를 사용할 때, JSON 데이터를 어떻게 다뤄야 할까?

예제 JSON 데이터 (사용자 정보)

{
  "users": [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 }
  ]
}

💡 Alice의 나이를 가져오려면?

$.users[0].age

📌 이런 방식으로 JSON 데이터를 FlutterFlow에서 활용할 수 있어! 🎯

 

3️⃣ FlutterFlow를 배우면 어떤 걸 만들 수 있을까? 🤔

👉 간단한 할 일 관리 앱 ✅
👉 날씨 정보 앱 (API 활용) ✅
👉 AI 챗봇 앱 (ChatGPT API 연결) ✅
👉 소셜 미디어 앱 (Firestore 사용) ✅
👉 전자상거래 앱 (상품 리스트 & 결제 기능 추가) ✅

📌 아이디어만 있으면, FlutterFlow에서 바로 만들어볼 수 있어! 🚀

 

4️⃣ FlutterFlow를 잘 배우려면?

✅ 튜토리얼 & 공식 문서 보기
✅ Firebase & API 개념 이해하기
✅ 작은 프로젝트부터 만들어보기
✅ FlutterFlow 커뮤니티에서 질문하기

 

💡 결론

  • 코딩 없이 드래그 앤 드롭으로 앱 개발 가능 🎨
  • Firebase 연동으로 로그인, 데이터 저장 쉽게 구현 🔥
  • REST API 연결로 ChatGPT 같은 기능 추가 가능 🤖
  • 초보자도 빠르게 배울 수 있음! 💡

 

 

Q. JSON path에 대한 설명을 들었는데 무슨 말인지 하나도 모르겠어 

JSON Path가 어려운 이유는 처음 접하면 구조를 이해하기가 쉽지 않기 때문이에요. 하지만 한 번 이해하면 데이터를 다루는 강력한 도구가 될 수 있어요! 쉽게 풀어서 설명해 줄게요. 😊

JSON이 뭔데?

JSON은 데이터를 저장하는 트리(tree) 구조의 문서 형식이에요. 예를 들어, 아래처럼 사용자 정보가 JSON 형식으로 저장될 수 있어요:

{
  "user": {
    "name": "Sol",
    "age": 28,
    "email": "sol@example.com",
    "hobbies": ["reading", "music", "design"]
  }
}

위 데이터에서 Sol의 이메일을 가져오고 싶다면?
👉 user.email (JSON Path 표현)

JSON Path란?

JSON Path는 JSON 데이터에서 원하는 값을 찾아오는 경로(주소) 표시법이에요.

예제 1: 특정 값 가져오기

예를 들어, Sol의 이메일을 가져오려면:

user.email
  • user: 최상위 키(객체)
  • .: 객체 내부 접근
  • email: 가져오려는 데이터

📌 결과: "sol@example.com"

 

예제 2: 리스트(배열) 값 가져오기

JSON 안에 리스트(배열)가 들어 있을 수도 있어요.
Sol의 취미 목록(hobbies)에서 첫 번째 취미를 가져오고 싶다면?

user.hobbies[0]
  • user.hobbies → 리스트
  • [0] → 첫 번째 값

📌 결과: "reading"

 

예제 3: 모든 리스트 값 가져오기

Sol의 모든 취미를 가져오고 싶다면?

user.hobbies[*]

📌 결과: ["reading", "music", "design"] (리스트 전체)

 

FlutterFlow에서 JSON Path를 쓰는 이유?

FlutterFlow에서는 API 요청을 통해 데이터를 가져올 때 JSON Path를 사용해 원하는 데이터만 추출할 수 있어요.
예를 들어, API에서 아래처럼 데이터를 받았다고 가정할게요.

{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "Sol"},
      {"id": 2, "name": "Alice"},
      {"id": 3, "name": "Bob"}
    ]
  }
}

Q: 두 번째 사용자의 이름을 가져오려면?
👉 data.users[1].name
📌 결과: "Alice"

 

어떻게 활용하면 좋을까?

  1. API 데이터 확인: API에서 JSON 데이터를 받아와서 구조를 먼저 확인하세요.
  2. JSON Path로 원하는 데이터 찾기: .(점)과 [](대괄호)를 사용해 필요한 값만 선택하세요.
  3. FlutterFlow에서 적용: API 응답을 받는 필드에서 JSON Path를 입력해 필요한 데이터만 추출하세요.

 

마지막 팁

FlutterFlow에서 API를 테스트할 때 JSON 데이터를 미리 확인하고, jsonpath.com 같은 사이트에서 직접 실험해 보면 이해하는 데 도움이 될 거예요!

 

Q. JSON path에서 쓰는 대괄호 [ ] 는 무엇이고 어느 상황에서 쓰여?

대괄호 []는 JSON 배열(Array)에서 특정 요소를 가져올 때 사용돼요.
**배열(Array)**은 여러 개의 값을 순서대로 저장하는 리스트라고 생각하면 돼요.

 

1. 기본적인 배열의 구조

배열은 여러 개의 데이터를 [](대괄호) 안에 쉼표 ,로 구분해서 저장해요.
예를 들어, 한 사람의 취미 목록을 JSON으로 표현하면 이렇게 될 수 있어요:

{
  "user": {
    "name": "Sol",
    "hobbies": ["reading", "music", "design"]
  }
}

여기서 "hobbies"의 값은 리스트(배열)예요.

 

2. 배열에서 특정 값 가져오기

JSON Path에서 대괄호 []는 배열의 인덱스(index) 값을 통해 특정 요소를 선택할 때 사용돼요.

✅ 첫 번째 취미 가져오기

user.hobbies[0]

📌 결과: "reading"

✅ 두 번째 취미 가져오기

user.hobbies[1]

📌 결과: "music"

✅ 세 번째 취미 가져오기

user.hobbies[2]

📌 결과: "design"

 

3. 배열에서 모든 값 가져오기

배열의 모든 값을 가져오고 싶다면 [*]를 사용해요.

✅ 모든 취미 가져오기

user.hobbies[*]

📌 결과: ["reading", "music", "design"]

 

4. 배열 안에 객체가 있는 경우

배열 안에 객체(JSON Object)가 포함될 수도 있어요. 예를 들어, 여러 사용자의 정보를 저장한 JSON이 있다고 가정해볼게요.

{
  "users": [
    {"id": 1, "name": "Sol"},
    {"id": 2, "name": "Alice"},
    {"id": 3, "name": "Bob"}
  ]
}

✅ 두 번째 사용자의 이름 가져오기

users[1].name

📌 결과: "Alice"

✅ 모든 사용자의 이름 가져오기

users[*].name

📌 결과: ["Sol", "Alice", "Bob"]

 

5. 배열 안에서 특정 조건을 만족하는 값 가져오기

만약 id가 2인 사용자의 정보를 가져오고 싶다면 필터링을 사용할 수 있어요.

✅ id가 2인 사용자의 이름 가져오기

users[?(@.id == 2)].name

📌 결과: "Alice"

 

6. 배열을 사용할 때 주의할 점

✅ 배열은 0부터 시작

  • 첫 번째 값은 [0], 두 번째 값은 [1] 이렇게 시작해요.
    ✅ 존재하지 않는 인덱스를 요청하면 에러 발생
  • users[5]처럼 없는 인덱스를 요청하면 오류가 날 수 있어요.

 

🔹 정리: 언제 대괄호 []를 사용할까?

상황 JSON Path 예시 결과
리스트(배열)에서 첫 번째 값 가져오기 user.hobbies[0] "reading"
배열에서 모든 값 가져오기 user.hobbies[*] ["reading", "music", "design"]
배열 안 객체의 특정 값 가져오기 users[1].name "Alice"
특정 조건을 만족하는 값 가져오기 users[?(@.id == 2)].name "Alice"

 

 

 

Q. JSON path의 문법을 좀 더 알려줄래?

1️⃣ JSONPath 기본 개념

JSON 데이터는 트리 구조를 가지고 있어. JSONPath는 이 구조에서 특정 값을 찾는 방법이야.
💡 비유하자면?
📂 컴퓨터 폴더 구조에서 파일을 찾는 방법과 비슷해!

📌 예제 JSON 데이터:

{
  "users": [
    {"name": "Alice", "age": 25},
    {"name": "Bob", "age": 30}
  ]
}

 

2️⃣ JSONPath 주요 기호

기호 의미 예제 결과
$ 최상위 루트 $ 전체 JSON
. 특정 필드 선택 $.users users 배열
[] 배열에서 특정 요소 선택 $.users[0] 첫 번째 사용자
[*] 배열의 모든 요소 선택 $.users[*].name 모든 사용자 이름

 

3️⃣ 예제 JSONPath 사용법

🟢 특정 값 가져오기

  1. 첫 번째 사용자의 이름을 가져오기👉 결과: "Alice"
  2. $.users[0].name
  3. 모든 사용자의 이름 가져오기👉 결과: ["Alice", "Bob"]
  4. $.users[*].name
  5. 나이가 30인 사용자 찾기👉 결과: { "name": "Bob", "age": 30 }
  6. $.users[?(@.age == 30)]

 

4️⃣ OpenAI API 응답에서 JSONPath 적용하기

예제 API 응답

{
  "id": "chatcmpl-...",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Hello! How can I help you?"
      }
    }
  ]
}

🎯 JSONPath로 AI 응답 가져오기

  1. choices 배열에서 첫 번째 응답을 가져오려면? 
    $.choices[0].message.content
    👉 결과: "Hello! How can I help you?"

 

5️⃣ 정리: JSONPath 기본 공식

✅ 최상위에서 시작 → $
✅ 필드 접근 → .
✅ 배열 요소 접근 → [index]
✅ 모든 요소 선택 → [*]
✅ 특정 조건 검색 → [?(@.key == value)]

 

 

Q. $를 쓰면 최상위에서 시작한다는 건 무슨 뜻이야? 

1️⃣ $는 "출발점"을 의미해!

JSON 데이터는 트리처럼 생긴 구조야.
"$"는 그 트리의 최상위(root), 즉 출발점을 뜻해.

💡 비유하자면?
📂 "컴퓨터 폴더 탐색"이라고 생각해 봐!

  • C:\Users\Sol\Documents\file.txt ← 이 경로에서 C:\가 최상위(root)야.
  • 만약 Documents\file.txt만 쓴다면 어디서 시작해야 할지 몰라.

JSON에서도 "$"를 써야 컴퓨터가 어디서부터 데이터를 찾아야 하는지 알 수 있어.

 

2️⃣ $ 없이 쓰면 어떻게 될까?

{
  "users": [
    {"name": "Alice", "age": 25},
    {"name": "Bob", "age": 30}
  ]
}

👉 여기서 모든 사용자의 이름을 가져오고 싶다면?

$.users[*].name

🔹 결과: ["Alice", "Bob"]

🚨 $ 없이 users[*].name만 쓰면?

❌ 오류가 날 수도 있어!
왜냐하면 컴퓨터는 "users가 어디 있는지?" 모름.
그래서 "$"를 붙여서 "출발점에서 찾아라!"라고 알려줘야 해.

 

3️⃣ JSONPath는 파일 탐색과 비슷해!

💡 JSON 구조를 파일 시스템과 비교하면 더 이해하기 쉬워.

📂 컴퓨터 폴더 구조

C:\
 ├── Users\
 │   ├── Alice\
 │   │   ├── file1.txt
 │   │   ├── file2.txt
 │   ├── Bob\
 │       ├── file3.txt

✅ Alice의 모든 파일을 찾는 경로

C:\Users\Alice\*

 

📂 JSON 데이터

{
  "users": {
    "Alice": {
      "files": ["file1.txt", "file2.txt"]
    },
    "Bob": {
      "files": ["file3.txt"]
    }
  }
}

✅ Alice의 모든 파일을 찾는 JSONPath

$.users.Alice.files[*]

 

4️⃣ 결론

✅ $는 출발점을 나타냄
✅ $ 없이 쓰면 데이터의 위치를 모름
✅ JSON 구조는 폴더 탐색과 비슷함

 

 

Q. $뒤에 .을 쓰는 건 user의 값을 특정해서 찾기 위해서야?

맞아! $ 뒤에 .을 쓰는 이유는 특정한 값을 찾기 위해서야.

1️⃣ .의 역할 = 특정한 키(속성)를 선택하기

예제 JSON 데이터

{
  "users": {
    "Alice": {
      "age": 25,
      "city": "Seoul"
    },
    "Bob": {
      "age": 30,
      "city": "Busan"
    }
  }
}

✅ Alice의 나이를 가져오려면?

$.users.Alice.age

🔹 결과: 25

 

2️⃣ . 없이 쓰면 안 되는 이유

users.Alice.age만 쓰면, 출발점이 없어서 컴퓨터가 어디서부터 찾아야 할지 몰라!
그래서 "$"로 시작하고, .을 사용해서 특정 값을 찾아가는 거야.

 

3️⃣ .의 사용법

✔️ .을 사용하면? (객체 속성 접근)

$.users.Alice.age

👉 출발점($) → users 안에서 → Alice 안에서 → age 값을 찾아라!

✔️ []을 사용하면? (배열 요소 접근)

$.users["Alice"].age

👉 "Alice"처럼 문자열 키를 대괄호로 감싸도 돼!
(특히 키가 숫자거나, 공백이 있을 때 필요함!)

 

4️⃣ .과 []의 차이

표현 의미

$.users.Alice.age Alice의 나이를 찾음 (객체 접근)
$.users["Alice"].age 같은 의미지만 []을 사용
$.users.Bob.city Bob의 도시를 찾음
$.users["Bob"]["city"] 같은 의미지만 [] 사용

💡 .은 객체의 속성(키) 에 사용할 수 있어.
💡 []은 객체의 키가 문자열, 숫자, 공백 포함된 경우에 사용해야 해!

 

5️⃣ 예제: 배열을 다룰 때

{
  "users": [
    {"name": "Alice", "age": 25},
    {"name": "Bob", "age": 30}
  ]
}

✅ 첫 번째 사람(Alice)의 나이를 가져오려면?

$.users[0].age

🔹 결과: 25

💡 배열(리스트)은 숫자로 접근해야 해서 . 대신 []을 씀!
💡 $.users.0.age ❌ (오류 발생) → $.users[0].age ✅

 

6️⃣ 결론

✅ .는 특정한 속성(키)을 찾을 때 사용
✅ 배열(리스트)에는 []을 사용
✅ 공백이나 숫자로 된 키가 있으면 []을 사용
✅ $는 최상위(root)부터 시작하는 출발점

 

 

Q. 첫 번째 값으로 1이 아니라 0을 써서
초심자의 입장에서는 헷갈릴 수 있겠다.
왜 0이 첫 번째 값이야?

맞아! 초심자 입장에서는 첫 번째 값을 1이라고 생각하기 쉬운데, 프로그래밍에서는 0부터 시작하는 인덱스(Zero-based index) 를 사용해. 왜 그럴까? 🤔

1️⃣ 역사적인 이유 (C 언어의 영향)

대부분의 프로그래밍 언어(JavaScript, Python, Java 등)는 C 언어의 영향을 받았어.
C 언어에서는 배열의 요소를 메모리 주소를 기준으로 접근해.

📌 예를 들어, 어떤 배열이 메모리의 100번지부터 시작한다고 가정해 보자.
만약 1부터 인덱스를 시작한다면, 첫 번째 요소(100번지)에 접근할 때 이렇게 해야 해:

base_address + (index - 1) * size

하지만 0부터 시작하면 더 간단해져:

base_address + (index * size)

이 방식이 더 효율적이기 때문에 대부분의 언어가 **0부터 시작하는 인덱스(Zero-based index)**를 따르게 된 거야.

 

2️⃣ 수학적인 이유

컴퓨터 과학에서는 오프셋(offset) 개념이 중요해.
배열의 첫 번째 요소를 A[0]이라고 하면,

  • A[0]은 시작 지점에서 0칸 이동
  • A[1]은 시작 지점에서 1칸 이동
  • A[2]는 시작 지점에서 2칸 이동

즉, 0부터 시작하는 게 자연스럽고 논리적으로 맞아.

 

3️⃣ 일관성 있는 논리

만약 배열이 1부터 시작한다면, 반복문을 사용할 때 헷갈리는 경우가 많아질 거야.

✅ 0부터 시작하는 반복문 (현재 방식)

for i in range(5):  # i = 0, 1, 2, 3, 4
    print(i)

📌 결과: 0 1 2 3 4

❌ 1부터 시작하면?

for i in range(1, 6):  # i = 1, 2, 3, 4, 5
    print(i)

📌 결과: 1 2 3 4 5
👉 5개 요소가 있는데 1~5까지 있어야 하니까 끝값을 6으로 설정해야 해서 헷갈릴 수 있어.

 

4️⃣ 일부 언어는 1부터 시작할까?

사실 모든 언어가 0부터 시작하는 건 아니야!
✅ 1부터 시작하는 언어

  • R (통계 분석 언어)
  • Lua (게임 개발 등에서 사용)
  • Fortran (과학 계산 언어)

이 언어들은 수학적인 계산과 더 직관적으로 연결되기 때문에 1부터 시작하도록 설계된 경우가 많아.

 

🔹 정리하자면...

✔ 메모리 주소 계산을 단순하게 하기 위해
✔ 수학적으로 더 자연스럽기 때문에
✔ 반복문과 논리적으로 더 일관성이 있어서

📌 그래서 대부분의 프로그래밍 언어는 배열의 첫 번째 요소를 0부터 시작해! 😃

처음에는 헷갈릴 수도 있지만, 익숙해지면 오히려 0부터 시작하는 게 더 편하다고 느낄 거야!

 

챗지피티와 JSON Path에 대해 대화를 나눠보니...

사전 지식이 아예 없는 초심자라고 몇 번 이야기해주니, 모르는 부분을 질문할 때마다 참 친절하게도 상세한 설명을 덧붙여줘서 강의만 들었을 때보다 좀 더 빠르게 이해가 갔습니다. 특히 컴퓨터 폴더 구조와 JSON Path의 공통점을 서로 연결지어 설명한 부분 덕분에 그 구조를 파악하기가 훨씬 수월했어요.

아직 플러터플로우에 ChatGPT와 연동시키기까지는 배워나가야 할 게 많겠지만 챗지피티와 함께하면 그 여정이 조금은 더 수월해질 것 같습니다. 😀

728x90
반응형
저작자표시 비영리 변경금지

'노코드툴 이야기' 카테고리의 다른 글

[스파르타 스터디 후기] 노코드 AI 수익화 앱 스터디 실제 수강 후기  (0) 2025.02.07
[유데미 작시심십일 챌린지 후기] '웹 디자인 마스터 과정: Figma부터 Webflow, 프리랜서 활동까지' 유데미 강의와 함께  (0) 2024.11.15

'노코드툴 이야기' Related Articles

티스토리툴바