저자 조봉수 · 봉수 SSGlobal(주) · ΦΡΥΚΤΩΡΙΑ ΠΛΗΡΟΦΟΡΙΩΝ · 2026-10-22 다음 실습: lesson04 「앱 만들기 ① — 주문 한 건은 데이터 한 줄이다」

AI 이용 고지: 이 교재는 AI(Claude)와 함께 만들었습니다. 비용·제도는 2026-10-22 기준이며 바뀔 수 있으니 실제 진행할 때 다시 확인합니다.

목차

1. 오늘의 질문
2. 앱과 플랫폼은 무엇이 다른가
3. 앱을 만드는 세 가지 길
4. 플랫폼을 이루는 여섯 가지 부품
5. 만드는 순서 7단계
6. 출시 전에 챙길 법·행정
7. 봉수 앱 로드맵 (2부 수업 순서)
8. 정리 문제
9. 이제 실습으로

1. 오늘의 질문

"배달앱 같은 플랫폼을 우리가 만들 수 있을까?" — 만들 수 있습니다. 다만 한 번에 다 만드는 게 아니라, 작은 부품을 하나씩 붙여서 만듭니다. 오늘은 그 부품과 순서를 지도로 먼저 봅니다.

2. 앱과 플랫폼은 무엇이 다른가

플랫폼 = 앱 여러 개 + 가운데 서버 하나. 손님 앱에서 주문하면 서버에 한 줄이 쌓이고, 사장님 앱은 그 줄을 읽어서 "접수"를 누릅니다.

 손님 화면 ──주문──▶ ┌─────────┐ ◀──읽기── 사장님 화면
                     │  서버   │
 라이더 화면 ◀─배차── │ + 데이터 │ ──통계──▶ 관리자 화면
                     └─────────┘

3. 앱을 만드는 세 가지 길

• 맥이 없어도 ② Expo 방식은 클라우드에서 아이폰 앱을 빌드할 수 있어서 길이 막히지 않습니다.
• 등록비(2026-10 기준 확인 필요): 애플 개발자 프로그램 연 99달러, 구글 플레이 개발자 등록 1회 25달러.

결론: 웹앱으로 먼저 만들어 손님 반응을 보고 → 잘되면 같은 데이터·서버에 스토어 앱을 붙인다. 서버와 데이터는 그대로 두고 화면만 하나 더 만드는 것이라 처음부터 다시 만들 필요가 없습니다.

4. 플랫폼을 이루는 여섯 가지 부품

오늘 연습판에는 ①만 있고, ②③ 대신 내 브라우저 저장소를 씁니다. 그래서 다른 휴대폰에서는 주문이 안 보입니다. 이 한계가 바로 다음 강(서버)을 배우는 이유입니다.

5. 만드는 순서 7단계

1. 문제와 사용자 정하기 — 누가, 무엇이 불편한가. (예: 배달 수수료가 비싸다 → 가게·손님)
2. 화면을 종이에 그리기 — 손님 화면 3장, 사장님 화면 2장. 코드보다 먼저.
3. 데이터 표 설계 — 주문 한 줄에 어떤 칸이 필요한가: 번호·메뉴·금액·상태·시간. (3강 판다스 표와 같은 생각)
4. 시제품(웹앱) — 버튼이 실제로 눌리는 최소판. ← 오늘 실습
5. 서버·데이터베이스 붙이기 — 여러 사람이 같은 주문을 보게.
6. 시험 운영(베타) — 아는 가게 1~2곳, 실제 주문 10건. 틀린 숫자는 데이터부터 확인.
7. 출시와 운영 — 도메인·앱스토어 등록, 문의 대응, 매출·오류 기록.

봉수 원칙과 같습니다: 한 번에 하나만 바꾸고, 바꿀 때마다 숫자로 확인한다.

6. 출시 전에 챙길 법·행정

7. 봉수 앱 로드맵 (2부 수업 순서)

8. 정리 문제

1. 앱과 플랫폼의 가장 큰 차이 한 가지는? → 가운데 서버가 있어 여러 사람이 같은 데이터를 본다.
2. 봉수가 웹앱부터 시작하는 이유 두 가지는? → 비용이 거의 없고, 고치면 바로 반영된다(심사 없음).
3. 주문 한 건에 꼭 필요한 칸 다섯 개는? → 번호·메뉴·금액·상태·시간.
4. 연습판 주문이 다른 휴대폰에서 안 보이는 이유는? → 서버가 아니라 내 브라우저에만 저장하기 때문.

9. 이제 실습으로

4강_교재_앱만들기1_동네주문_20261022.md 1단계부터 진행합니다 — lesson04\app.html 더블클릭.

금융데이터분석전문가 과정 · 4강 (2부 2-1강) · 앱 만들기 ① — 주문 한 건은 데이터 한 줄이다

저자 조봉수 · 봉수 SSGlobal(주) · ΦΡΥΚΤΩΡΙΑ ΠΛΗΡΟΦΟΡΙΩΝ · 2026-10-22 실습 폴더: lesson04 (연습판 app.html 1개 + 정답 answers/app_answer.html 1개)

AI 이용 고지: 이 교재와 연습판은 AI(Claude)와 함께 만들었습니다. 연습판은 수업용 예시 앱이며, 가게·메뉴는 예시입니다.

목차

1. 오늘의 질문
2. 3강에서 가져오는 것
3. 수업 진행표 (약 70분)
4. 1단계 — 더블클릭으로 앱 열기
5. 2단계 — 메뉴 가격 바꾸기
6. 3단계 — 메뉴 한 줄 더하기
7. 4단계 — '포장 주문' 할인 만들기
8. 5단계 — 주문 한 건이 데이터 한 줄인지 눈으로 보기
9. 6단계 — 내 손으로: '배달 출발' 버튼 만들기
10. 면접 대비 / 현업 적용 체크리스트
11. 숙제

1. 오늘의 질문

배달앱은 복잡해 보이지만 뼈대는 세 가지뿐입니다. 데이터(메뉴·주문 표), 화면(그 표를 그리는 것), 동작(버튼을 누르면 표를 바꾸고 다시 그리는 것). 오늘은 이 세 가지를 대표님 손으로 직접 고쳐 봅니다.

2. 3강에서 가져오는 것

오늘 언어는 파이썬이 아니라 자바스크립트입니다. 앱 화면은 브라우저가 돌리고, 브라우저는 자바스크립트를 읽기 때문입니다. 문법은 다르지만 생각하는 방식은 같습니다.

3. 수업 진행표 (약 70분)

규칙은 똑같습니다. 한 번에 하나만 바꾸고, 저장(Ctrl+S) → 브라우저 새로고침(F5)으로 확인합니다.

4. 1단계 — 더블클릭으로 앱 열기

1. 탐색기에서 lesson04\app.html을 더블클릭합니다. 브라우저(크롬·엣지)에서 열립니다.
2. 같은 파일을 오른쪽 클릭 → '연결 프로그램' → 메모장으로도 엽니다.
3. 메뉴에 +를 눌러 담아 보고, 주문하기를 누르고, 아래 접수판에서 '접수'를 눌러 봅니다.

메모장 화면에는 [데이터], [계산], [화면], [동작] 네 덩어리가 있습니다. 앱 전체가 이 네 덩어리입니다.

5. 2단계 — 메뉴 가격 바꾸기

메모장에서 이 줄을 찾습니다.

{ id: "m3", name: "떡볶이",   price: 6000 }

6000을 6500으로 바꾸고 저장 → 브라우저 F5. 떡볶이가 6,500원이 됩니다. - 코드의 다른 곳은 하나도 안 고쳤는데 화면, 장바구니, 합계가 모두 바뀌었습니다. 데이터 한 칸을 바꾸면 화면은 따라온다 — 이것이 앱의 원리입니다. - 숫자에는 쉼표(6,500)를 넣지 않습니다. 쉼표는 '다음 칸'이라는 뜻이라 에러가 납니다.

6. 3단계 — 메뉴 한 줄 더하기

// [3단계] 주석 자리에 라면을 넣습니다.

  { id: "m3", name: "떡볶이",   price: 6000 },
  { id: "m4", name: "라면",     price: 5000 }

• 떡볶이 줄 끝에 쉼표 ,를 꼭 붙입니다. 줄과 줄 사이는 쉼표로 이어집니다. 빠뜨리면 화면이 하얗게 비고, F12 콘솔에 빨간 SyntaxError가 나옵니다(3강에서 본 그 에러입니다).
• id는 겹치면 안 됩니다. m4처럼 새 번호를 씁니다.

7. 4단계 — '포장 주문' 할인 만들기

가게가 배달비를 아끼는 가장 쉬운 방법은 포장 할인입니다. 두 곳을 고칩니다.

① 화면에 체크칸 넣기 — <!-- [4단계] … --> 줄 자리에:

<label><input type="checkbox" id="pickup" onchange="draw()"> 포장 주문 (배달팁 0원, 1,000원 할인)</label>

② 계산 바꾸기 — cartTotal() 안의 // [4단계] 줄 자리에:

  let discount = 0;
  if (document.getElementById("pickup").checked && sub > 0) {
    fee = 0;
    discount = 1000;
  }
  return { sub: sub, fee: fee, total: sub + fee - discount };

그리고 원래 있던 return { sub: sub, fee: fee, total: sub + fee }; 줄은 지웁니다(return이 두 개면 앞의 것만 실행됩니다).

확인: 원조 김밥 1 + 떡볶이 1, 포장 체크 → 합계 9,000원 (4,000+6,000−1,000, 배달팁 0원). 체크를 풀면 12,000원.

8. 5단계 — 주문 한 건이 데이터 한 줄인지 눈으로 보기

주문을 하나 넣은 뒤 브라우저에서 F12 → '콘솔(Console)' 탭을 열고 칩니다.

orders

[{no: '2210', items: '원조 김밥×1, 떡볶이×1', total: 12000, status: 'new', time: '…'}]처럼 나옵니다. - 대괄호 [ ]는 목록(표), 중괄호 { } 하나가 주문 한 건(표의 한 줄)입니다. 판다스 표의 한 줄과 똑같습니다. - 사장님이 '접수'를 누르면 바뀌는 것은 이 줄의 status 한 칸뿐입니다: "new" → "accepted". - 실제 배달 플랫폼도 같은 구조입니다. 다른 점은 이 줄을 내 브라우저가 아니라 서버 저장소에 넣는다는 것 하나라서, 손님 휴대폰과 사장님 화면이 같은 줄을 봅니다.

9. 6단계 — 내 손으로: '배달 출발' 버튼 만들기

지금은 '접수 대기 → 조리 중'까지만 있습니다. '조리 중 → 배달 중'을 직접 만들어 봅니다. 힌트만 드립니다. 1. accept 함수를 복사해 ride 함수를 만들고, "accepted" 대신 "riding"을 넣습니다. 2. 접수판 그리기에서 o.status === "accepted"일 때 <button onclick="ride('…')">배달 출발</button>이 나오게 합니다. 3. 상태 글자(label)에 "riding"이면 "배달 중"이 나오게 합니다.

막히면 F12 콘솔의 빨간 글씨를 끝까지 읽습니다. 정답은 정해 두지 않았습니다 — 방법이 여러 가지라서, 내일 대표님 코드를 같이 보며 고치겠습니다.

10. 면접 대비 / 현업 적용 체크리스트

면접 대비 - 질문 "앱의 화면과 데이터를 어떻게 분리합니까?" - 답: 메뉴와 주문을 데이터(배열)로 두고, 화면은 그 데이터를 그리는 함수 하나(draw)로만 만듭니다. 버튼은 데이터를 바꾸고 draw를 다시 부릅니다. 그래서 가격 한 칸을 바꾸면 화면 전체가 맞게 따라옵니다. - 질문 "할인 계산 같은 돈 계산은 어디에 둡니까?" - 답: 화면이 아니라 계산 함수 한 곳(cartTotal)에 둡니다. 같은 금액을 여러 곳에서 따로 계산하면 서로 어긋납니다.

현업 체크리스트 - [ ] 돈 계산은 한 함수에만 있는가 - [ ] 데이터를 바꾼 뒤 화면을 다시 그리는가 - [ ] 주문 한 건에 번호·시간·상태가 다 있는가 - [ ] 실제 손님의 주소·전화번호는 연습판에 넣지 않았는가

11. 숙제

1. 메뉴에 '품절' 칸(soldOut: true)을 만들고, 품절 메뉴는 + 버튼 대신 '품절' 글자가 나오게 하기.
2. 접수판 위에 '오늘 주문 수'와 '오늘 매출'을 표시하기 (orders.length, for로 total 더하기).
3. 다음 강 예고: 2-2강 — 주문을 서버 저장소에 넣기. 손님 휴대폰과 사장님 화면이 같은 주문을 보게 만듭니다.

연습판은 서버 없이 브라우저에만 저장합니다. 브라우저 기록을 지우면 연습 주문도 사라집니다. 확인: 2026-10-21 버디가 클라우드 헤드리스 브라우저로 연습판과 정답판을 실행 — 연습판 김밥1+떡볶이1 = 12,000원, 정답판 포장 = 9,000원, '접수' 후 '조리 중' 전환, 스크립트 오류 0.