- 웹 앱과 모바일 앱의 차이점에 대해 알아보기
- 웹 앱 코딩 및 구축을 위한 다양한 옵션에 대해 알아보기
- 웹 앱 구축에 필요한 소프트웨어 설치
이 단원의 활동은 다음과 같습니다:
웹 앱
테크노베이션 프로젝트의 경우, 다음과 같은 옵션이 있습니다. 모바일 앱 또는 웹 앱.
이전에 테크노베이션에 참여한 적이 있고 새로운 도전을 찾고 있는 참가자나 코딩 경험이 있는 신규 참가자는 테크노베이션 프로젝트를 위한 웹 앱 제작을 고려해볼 수 있습니다.
많은 참가자가 추천 앱 빌더 중 하나인 앱 인벤터 또는 툰커블을 사용하여 모바일 앱을 만들기로 선택합니다. 코딩이 처음이거나 앱 인벤터 또는 Thunkable을 사용하여 앱을 코딩하고 싶은 경우 이 강의를 건너뛸 수 있습니다!
웹 앱 제작에는 텍스트 기반 코딩이 포함되며 App Inventor 또는 Thunkable을 사용한 블록 기반 코딩보다 더 고급입니다.
모바일 앱, 웹 앱, 프로그레시브 웹 앱의 차이점을 살펴보는 것부터 시작하겠습니다.
모바일 앱
- 휴대폰에서 기본적으로 실행되는 프로그램
- 장치에 다운로드 및 설치
- 는 GPS, 카메라 등 휴대폰의 기능에 액세스할 수 있습니다.
- 플랫폼별(iOS 또는 Android)
- 운영 체제에 맞게 특정 언어로 코딩된 경우
웹 앱
- 는 모바일 앱과 매우 유사합니다.
- 인터넷 브라우저에서 실행
- 특정 기기(iOS 또는 Android) 전용이 아닌 경우
- 은 일반적으로 HTML, CSS, 자바스크립트, 파이썬으로 코딩됩니다.
- 오프라인 상태에서는 실행할 수 없습니다.
프로그레시브 웹 앱
- 모바일 앱과 웹 앱의 하이브리드인 특별한 유형의 웹 앱입니다.
- 브라우저에서 실행
- 일반 모바일 앱처럼 모바일 장치에 설치할 수도 있습니다.
- 사용자가 오프라인 상태에서도 실행 가능
웹 앱은 웹사이트와 다르다는 점에 유의하세요. 웹사이트는 HTML과 CSS를 사용하여 코딩된 정적입니다. 웹 앱은 사용자 입력 및 기타 외부 상호 작용에 따라 동적이며 변화합니다. 테크노베이션 프로젝트의 경우 웹사이트는 허용되지 않습니다.
웹 앱을 만들기 위한 몇 가지 초보자용 옵션을 살펴보겠습니다.
모바일 앱에서 다루는 앱 제작 플랫폼과 가장 큰 차이점은 블록 기반 언어 대신 텍스트 기반 프로그래밍 언어를 사용하여 웹 앱을 만든다는 점입니다.
웹 앱을 만드는 데 사용되는 두 가지 주요 언어가 있습니다.
자바스크립트
Javascript, 또는 JS는 스크립팅 언어입니다. 즉, 모바일 앱처럼 컴파일되는 대신 런타임에 코드가 실행됩니다. 이는 마치 배우가 공연이 진행될 때마다 대본을 읽는 것과 같습니다.
자바스크립트는 종종 HTML 및 CSS와 결합하여 웹사이트를 만듭니다. HTML과 CSS는 정보를 표시할 수는 있지만 변경되지 않는 정적 웹사이트를 만드는 데 사용됩니다. 자바스크립트는 상호작용을 추가하고 외부 요인에 따라 웹사이트가 변경 및 업데이트되는 기능을 추가합니다. 그리고 동적인 대화형 웹사이트는 본질적으로 웹 앱입니다.
파이톤
Python 은 매우 인기 있는 범용 프로그래밍 언어입니다. Python은 프로그래밍 언어인 동시에 이자 스크립팅 언어이므로 컴파일하여 실행할 수 있을 뿐만 아니라 런타임에 실행할 수도 있습니다.
초보 코더도 쉽게 접근할 수 있는 간단하고 다재다능한 언어로 알려져 있습니다. 소프트웨어 개발의 다양한 측면에서 사용됩니다. 한 가지 영역은 웹 개발입니다. 다른 하나는 머신 러닝입니다. 따라서 Python은 고급 AI 웹 앱을 학습하고 개발하는 데 훌륭한 옵션입니다.
이 커리큘럼에서는 파이썬으로 웹 앱을 만드는 데 중점을 둡니다. Python을 사용하여 웹 앱을 쉽게 빌드하기 위해 다음과 같은 프레임워크를 사용합니다. Streamlit. Streamlit을 사용하면 적은 코드로 강력한 대화형 웹 앱을 구축할 수 있습니다. 데이터와 관련된 앱에 특화되어 있으며, Python 머신러닝 라이브러리를 사용하여 앱에 AI를 쉽게 통합할 수 있습니다.
다음은 몇 가지 주요 기능입니다.
- 블록 기반 코딩 경험이 많고 새로운 도전을 원하는 분들에게 좋은 옵션입니다.
- 텍스트 기반 코딩을 해본 적이 있는 분들에게 좋습니다.
- 널리 사용되는 매우 다양한 언어
- 컴퓨터에 소프트웨어를 설치해야 합니다.
- Python 및 관련 라이브러리
- 코드 편집기
- 스트림릿은 브라우저에서 실행할 수 있는 옵션이 있습니다.
- 이 커리큘럼에서는 이 옵션을 다루지 않습니다.
- AI를 함께 사용할 수 있습니다.
- 머신러닝 모델 구축 및 사용에 가장 많이 사용되는 언어
- 이 커리큘럼에서는 모델 제작을 위해 Jupyter Notebook을 사용합니다.
시작하기
테크노베이션 프로젝트를 위한 웹 앱을 코딩하려면 다음이 필요합니다:
- 컴퓨터 또는 노트북
- 인터넷 액세스
Mac 또는 Linux에서는 터미널 창을, Windows에서는 터미널 또는 명령 프롬프트를 사용하는 데 어느 정도 익숙해야 합니다. 경험이 없거나 터미널 창이 무엇인지조차 모르는 경우에는 활동을 진행하기 전에 이 초보자 동영상을 확인하세요.
사용 중인 운영 체제에 맞는 동영상을 시청하세요.
웹 앱 개발을 위한 두 가지 옵션을 다뤄보겠습니다. 컴퓨터나 노트북에서 코딩하거나 클라우드에서 모든 것을 코딩할 수 있습니다. 두 가지 옵션 중 하나를 선택할 수 있지만, 한 가지 옵션을 선택하여 테크노베이션 프로젝트를 통해 계속 사용하는 것이 좋습니다. 위의 터미널 명령어 사용법을 알고 있으면 어느 옵션을 선택하든 유용하게 사용할 수 있습니다.
각각의 장단점은 다음과 같습니다.
컴퓨터에서
장점:
- 파일이 컴퓨터에 저장됩니다.
- 인기 있는 IDE인 Visual Studio Code 사용 방법 알아보기
- 터미널 창 사용, 패키지 설치 등에 대해 많이 배우게 됩니다.
- 사용 소프트웨어의 완벽한 제어 및 선택
- 항상 인터넷에 접속할 필요 없이 코딩 가능
단점:
- 팀과 함께 파일 및 코드를 공유하기 쉽지 않음
- 패키지 설치가 매우 번거롭고 설정하는 데 많은 시간이 걸릴 수 있습니다.
- 컴퓨터 충돌 시 파일 손실 가능성
클라우드에서
장점:
- 파일은 클라우드에 저장됩니다.
- 컴퓨터에 아무것도 설치할 필요가 없습니다.
- 포트폴리오를 위한 Github 자동 링크
- 팀으로 쉽게 공유하고 코딩하기
단점:
- 로컬에서 소프트웨어를 사용해 본 경험이 없는 경우
- 인터넷 연결에 대한 의존성
컴퓨터에서 로컬로 코딩할지, 클라우드에서 코딩할지에 따라 활동 A 또는 활동 B를 선택합니다.
활동 A: 컴퓨터에서 파이썬 시작하기
소프트웨어 설치 및 코드 스타터 앱
- 1단계: Python 설치하기. 다음은 Window, Mac 또는 Linux에 대한 좋은 지침입니다 .
- 2단계: 코드 편집기와 Streamlit 설치하기. 이 동영상에서는 Visual Studio Code를 설치한 다음 스트림릿을 설치하여 코드 편집기에서 실행하는 방법을 보여드립니다.
- 3단계: 이 동영상에 따라 VS 코드 환경에서 매우 간단한 Streamlit 웹 앱을 실행합니다.
- 첫 번째 웹 앱의 스크린샷을 찍어 멘토에게 메모와 함께 보내 축하해 주세요!
활동 B: 클라우드에서 파이썬 시작하기
주요 용어 검토
- 웹 앱 - 모바일 앱처럼 보이지만 인터넷 브라우저에서 실행되며 HTML, CSS, 자바스크립트 또는 파이썬을 사용하여 코딩된 애플리케이션입니다.
돌아보기
텍스트 기반 코딩에 도전하게 된 것을 축하합니다! 다음은 팀 및 멘토와 함께 생각해 볼 수 있는 몇 가지 반성 질문입니다.
추가 리소스
파이썬 및 스트림릿 작업에 대한 도움말은 문서와 지원센터를 참조해야 합니다. 다음은 시작하기에 좋은 몇 가지 자료입니다.
- Python.org 초보자 가이드에는 더 많은 파이썬을 배울 수 있는 좋은 링크가 있습니다.
- Streamlit의 앱 갤러리
- Nileg Production의 전체 Streamlit 강좌 재생 목록
