[강의자료] 내 폰에 설치되는 '진짜' 앱 만들기! 디자인부터 스토어 출시까지 (Adalo 기초)

"기능은 좋은데... 디자인이 너무 안 예뻐요." 😭 지난 1, 2주차 수업을 들으면서 이런 아쉬움이 있으셨나요? 그렇다면 이번 3주차 강의가 정답입니다!

이번 시간에는 디자인 자유도가 가장 높은 노코드 툴, **Adalo(아달로)**를 배웁니다. 마치 파워포인트(PPT)를 하듯 요리조리 화면을 배치하면, 어느새 '당근마켓' 같은 중고거래 앱이 뚝딱 완성됩니다.

 

[3주차 강의 포인트]

• 🎨 내 맘대로 디자인: 버튼 위치, 색상, 폰트까지 자유롭게!
• 🔐 완벽한 기능: 회원가입, 로그인, 글쓰기, 좋아요 기능 구현
• 📱 스토어 출시: 구글/애플 앱스토어에 올릴 수 있는 '진짜 앱' 만들기

[3주차] 디자이너처럼 꾸미고 스토어 출시까지! '진짜' 앱 만들기 (Adalo)

1. 강의 개요

• 강의 목표: PPT를 만들듯이 자유롭게 UI를 디자인하고, 회원가입과 글쓰기 기능이 작동하는 '중고거래 커뮤니티 앱'을 만든다.
• 타겟 대상: 나만의 예쁜 앱을 만들고 싶은 대학생 및 일반인
• 소요 시간: 120분 (2시간)
• 활용 도구: Adalo (아달로)
• 핵심 개념: UI/UX 디자인 기초, Database 관계 설정, Action(로직) 구현

2. 타임테이블 (총 120분)

시간세부 내용비고

00:00 ~ 00:20	[이론] UI/UX의 세계 & Adalo 소개 - 좋은 앱 디자인이란? (토스, 당근마켓 사례) - Adalo의 특징: PPT처럼 그리면 앱이 된다 - 1, 2주차 툴과의 결정적 차이 (디자인 자유도)	시각적 자극
00:20 ~ 00:50	[실습 1] 화면 그리기 (Front-end) - 로그인/회원가입: Adalo가 제공하는 마법의 'Welcome Screen' - 홈 화면: 리스트(List) 배치하고 네비게이션 바(Bar) 만들기 - 상세 화면: 상품 사진 크게, 가격 굵게, 설명 넣기	디자인 실습
00:50 ~ 01:00	[휴식]
01:00 ~ 01:40	[실습 2] 생명 불어넣기 (Database & Logic) - DB 설계: Users(사용자), Items(상품) 컬렉션 만들기 - 글쓰기 기능: '+' 버튼 누르면 입력창 뜨고 '등록' 누르면 저장 - Action 연결: 리스트 클릭 → 상세 페이지 이동 (Link)	핵심 로직
01:40 ~ 01:50	[심화] 스토어 출시 맛보기 - PWA(웹앱) vs Native App(스토어 앱) 차이 - 구글 플레이/애플 앱스토어 개발자 등록 비용 및 절차 안내	현실적 조언
01:50 ~ 02:00	[마무리] 내 앱 시연 및 Q&A - 미리보기(Preview) QR코드로 폰에서 실행해보기 - 다음 주 예고 (AI 활용)

3. 상세 강의 시나리오

1교시: PPT처럼 그리는 앱 디자인 (50분)

1. 오프닝 (20분)

• 강사 멘트: "지난주까지 만든 앱은 기능은 좋았지만, 솔직히 조금 투박했죠? 오늘은 '당근마켓'이나 '인스타그램'처럼 예쁜 디자인의 앱을 내 손으로 직접 그려보겠습니다."
• 도구 소개: Adalo는 전 세계에서 가장 인기 있는 '디자인 중심' 노코드 툴입니다.

2. 로그인 & 메인 화면 디자인 (30분)

• 설명: "앱의 첫인상은 로그인 화면에서 결정됩니다."
• 실습 가이드:
  1. Adalo 접속 및 'Native Mobile App' 프로젝트 생성.
  2. Add Component: 왼쪽 상단 + 버튼을 눌러 텍스트, 이미지, 버튼을 드래그 앤 드롭해봅니다.
  3. Screen 추가: 빈 화면을 추가하고 이름을 'Home'으로 설정.
  4. 네비게이션: 하단에 'Tab Bar'를 추가하여 그럴듯한 앱의 뼈대를 만듭니다.

2교시: 데이터가 흐르는 진짜 앱 구현 (60분)

3. 데이터베이스(DB) 구축 (20분)

• 설명: "그림만 그리면 그냥 그림판이죠. 데이터를 담을 그릇을 만들어야 합니다."
• 실습 가이드 (Database 탭):
  1. Users: 기본 제공됨 (이메일, 비번, 닉네임, 프로필사진).
  2. Items (상품): Collection 추가 -> 이름, 가격(Number), 사진(Image), 설명(Text), 판매자(Relationship with Users).
  3. 관계 설정: "한 명의 판매자가 여러 상품을 올릴 수 있다" (1:N 관계) 설명.

4. 기능(Action) 연결하기 (20분)

• 설명: "버튼을 눌렀을 때 무슨 일이 일어날지 설정하는 단계입니다."
• 실습 가이드:
  1. 글쓰기: 홈 화면에 + 버튼(Floating Action Button) 추가 -> Link to 'Form Screen'.
  2. 데이터 연결: 폼(Form) 컴포넌트를 넣고, 연결할 대상을 'Items'로 선택. (자동으로 입력창이 생김!)
  3. 상세 보기: 홈 화면의 리스트를 클릭 -> Add Action -> Link to 'Detail Screen'.
  4. Magic Text: 상세 화면의 라벨을 선택하고 'Magic Text' 기능으로 Current Item > Price 등을 연결.

5. 스토어 출시 가이드 & 마무리 (20분)

• 설명: "이렇게 만든 앱은 실제로 구글/애플 스토어에 올릴 수 있습니다. 다만, 비용과 심사가 필요합니다."
• 안내: 구글($25/평생), 애플($99/매년) 개발자 등록 비용 및 Adalo 유료 플랜 설명.
• 활동: Preview 버튼을 누르고 QR코드를 찍어, 실제 회원가입부터 글 작성까지 되는지 테스트.

4. 강사를 위한 팁 (Teacher's Note)

1. 영어 메뉴 주의: Adalo는 메뉴가 영어입니다. "왼쪽의 플러스 버튼", "오른쪽의 연필 아이콘" 처럼 위치와 아이콘 모양으로 설명해주면 쉽습니다.
2. 이미지 준비: 예쁜 앱을 만들려면 예쁜 사진이 필수입니다. 'Unsplash' 같은 사이트에서 미리 샘플 상품 사진(자전거, 노트북 등)을 다운받아 두라고 하세요.
3. 회원가입 에러: Adalo 미리보기에서 회원가입 테스트를 할 때, 비밀번호가 너무 짧으면 에러가 날 수 있습니다. "비밀번호는 6자리 이상 추천"이라고 안내해주세요.

 

 

디자인 똥손도 금손 되는 앱 만들기! 🎨 PPT처럼 그리면 앱이 완성되는 '아달로(Adalo)'의 마법✨ 로그인, 글쓰기 기능이 있는 '진짜 앱' 만들러 오세요! 이번 주 3주차 강의 Start! 🚀 #노코드 #앱디자인 #아달로