실행과 프리뷰

코드 모드에서 프로젝트를 돌려 보는 길은 두 가지입니다. 아래쪽 터미널 탭 줄의 「▶」 단추와 위쪽 「프리뷰」입니다. 앱은 프로젝트의 pubspec.yaml 을 훑어 무엇을 실행할 수 있는지를 스스로 찾고, 그 프로젝트의 정식 러너 명령을 터미널 탭에서 돌립니다. Flutter · Jaspr 앱은 그 결과를 프리뷰 패널 안에서 보여 줍니다. 터미널 자체는 코드 모드에 있습니다.

실행 대상 찾기

실행 대상은 프로젝트를 열 때 한 번 찾습니다. 프로젝트 폴더에서 아래로 3단계까지의 폴더에서 pubspec.yaml 을 읽고, 이름이 . 으로 시작하는 폴더와 build · node_modules · Pods · android · ios · macos · windows · linux · web · test · integration_test · lib 폴더는 들어가 보지 않습니다. 찾아낸 뒤에는 파일을 감시하지 않습니다. 열어 둔 채 터미널에서 새 프로젝트를 만들었다면 프로젝트를 다시 여세요. 대상이 하나도 없을 때에 한해 Run 메뉴의 실행 명령(Windows · Linux 는 「«실행: <이름>»」, macOS 는 보이는 탭이 실행 탭이 아닐 때의 「다시 실행」)이 한 번 더 찾기는 합니다.

패키지 하나에서 앱 대상은 하나만 잡히고(아래 순서대로 처음 맞는 것), 패키지에 test/ 폴더가 있으면 테스트 대상이 따로 하나 더 잡힙니다. 그래서 앱이면서 테스트도 있는 패키지는 대상이 둘입니다.

• 판정 순서는 풀스택 → Jaspr → Flutter → Dart 입니다. 단추는 풀스택 → Flutter → Jaspr → Dart → 테스트 순서(풀스택이 맨 앞, 테스트가 맨 뒤)로 늘어서고 같은 종류 안에서는 폴더 경로순입니다.
• 프로젝트 폴더에 .fvmrc 파일이나 .fvm 폴더가 있으면 위 명령의 flutter · dart 앞에 fvm 이 붙습니다(fvm flutter · fvm dart).
• Flutter 앱은 데스크톱 창으로 뜨는 것이 아니라 웹 서버로 실행되어 프리뷰에 보입니다. Flutter 웹이 지원하지 않는 기능은 프리뷰에서 동작하지 않을 수 있습니다.

「▶」로 실행하기

「▶ 종류: 이름」 단추는 아래쪽 「터미널」 탭 줄의 오른쪽에 서고, 처음 네 개까지만 나옵니다. 나머지는 macOS 의 「Run」 메뉴에서 고릅니다(Windows · Linux 의 창 안 메뉴에는 대상별 항목이 없고, 「«실행: <이름>»」이 맨 앞 대상을 실행합니다). macOS 의 「실행」(⌘ R)도 맨 앞 대상을 실행합니다. 대상이 하나도 없으면 「▶」 단추가 서지 않습니다. 그 채로 Run 메뉴의 실행 명령을 누르면(macOS 의 「실행」은 대상이 없으면 눌러지지 않고 「다시 실행」은 눌러집니다) 한 번 더 찾아본 뒤에도 없을 때 상태 표시줄에 「실행할 대상을 찾지 못했습니다 (pubspec.yaml)」가 나옵니다.

• 실행 전 점검: 필요한 명령이 PATH 에 있는지 먼저 확인합니다. 명령은 풀스택이 serverpod(스크립트를 쓰면 bash), Flutter 앱이 flutter, Jaspr 와 Dart 가 dart, 테스트가 flutter 또는 dart 입니다. FVM 을 쓰면 Flutter 앱 · Jaspr · Dart · 테스트는 fvm 이 되고(fvm flutter · fvm dart) 풀스택은 그대로입니다. 없으면 띄우지 않고 그 탭에 「실행할 수 없습니다」와 「flutter 명령을 PATH 에서 찾지 못해 실행하지 않았습니다. 설치하거나 로그인 셸의 PATH 에 추가한 뒤 다시 실행하세요.」 같은 사유를 남깁니다. serverpod 는 dart pub global activate serverpod_cli 로 설치하라는 안내가 붙습니다. 점검 자체가 돌지 못하면 막지 않고 띄웁니다.
• 어디서 도나: 풀스택 · Dart · 테스트는 터미널 탭 줄에 「▶」의 이름(예: 「풀스택: my_server」)을 가진 실행 탭이 생겨 거기서 돕니다. Flutter · Jaspr 는 프리뷰 패널이 열리고 「프리뷰: 이름」 탭이 생깁니다. 실행 탭은 대화형입니다. 핫 리로드(r) · 재시작(R)이나 Serverpod 의 조작은 내가 키로 누르고, 앱이 대신 입력하지 않습니다.
• 이미 돌고 있으면: 같은 대상을 또 누르면 새 세션을 만들지 않고 도는 탭으로 옮겨 갑니다. 포트와 빌드 폴더가 겹쳐 두 번째 세션이 첫 번째를 망가뜨리기 때문입니다.
• 중지와 다시 실행: 실행 탭이 보일 때 「■ 중지」(돌 때만)와 「↻ 다시 실행」이 나옵니다. 중지해도 탭과 출력은 남고 탭 이름에 「(종료 N)」이 붙습니다. 「↻ 다시 실행」은 같은 자리에서 새 세션으로 바꾸므로 이전 출력은 보이지 않습니다. 풀스택을 중지하면 그것이 띄운 동반 프리뷰도 함께 끝나고, 동반 프리뷰 탭에서 「■ 중지」를 눌러도 풀스택 실행 전체가 멈춥니다.
• 풀스택의 순서: 서버가 「Server running.」을 알리면 서버의 pubspec.yaml 에 serverpod: 아래 flutter_apps 로 적힌 동반 Flutter 앱을 프리뷰로 띄웁니다(앱마다 auto_launch 가 false 가 아닐 때, dart-define · flavor 도 그대로 넘깁니다). 2분 안에 서버가 준비되지 않거나 준비되기 전에 끝나면 「실행 준비 실패: …」를 탭에 남기고 멈춥니다. 서버가 준비된 뒤 동반 Flutter 앱을 프리뷰로 띄우다 실패해도(예: 앱 폴더에 web 폴더가 없을 때) 같은 문구로 멈추고 새로 띄운 서버도 끝냅니다.
• 실행 환경: 터미널과 같은 규칙으로 앱 환경 변수의 일부만 넘깁니다(코드 모드의 터미널 NOTE).

프리뷰

프리뷰는 내 컴퓨터에서 실행한 앱의 화면을 앱 안에서 보여 주는 패널입니다. 호스팅하는 미리보기가 아니라, 러너가 알려 준 내 컴퓨터의 로컬 주소(localhost · 127.0.0.1)를 창 안에 그릴 뿐입니다.

열고 닫기

• 상단 막대의 「프리뷰」가 패널을 열고, 다시 누르면 접습니다. 터미널 탭 줄의 「프리뷰」와 Flutter · Jaspr 「▶」도 패널을 엽니다.
• 패널 안의 앱 선택 목록에서 앱을 고르고 「프리뷰 실행」을 누릅니다. 처음에는 첫 번째 앱이 골라져 있고, 주소를 기다리거나 화면을 그리는 동안에는 「프리뷰 실행」이 눌러지지 않습니다.
• 창이 넓으면 작업 영역 오른쪽에, 좁으면 「좁은 창에서는 프리뷰를 아래에 나눠 표시합니다」라는 안내와 함께 아래에 놓입니다. 경계를 끌어 크기를 조절합니다. 「탭으로 보기」는 패널 대신 편집기 탭(「프리뷰 · 상태」)에 놓고, 「오른쪽에서 보기」는 되돌립니다. 「프리뷰 접기」는 패널을 숨길 뿐 러너는 멈추지 않습니다. 멈추려면 「■ 중지」를 누릅니다.
• 앱이 하나도 없으면 「프리뷰할 Flutter/Jaspr 앱을 찾지 못했습니다 (pubspec.yaml).」가 나옵니다.

상태 표시

패널 위의 상태 글이 지금 단계를 알려 줍니다. 주소는 러너가 출력으로 알려 준 것을 읽어 옵니다.

장치 크기와 새로고침

도구 줄(이름표 「미리보기」)에는 세 장치 단추가 있습니다. 처음에는 「데스크톱」이 골라져 있습니다.

폰과 태블릿은 기준 크기를 넘지 않는 선에서 패널에 들어가도록 줄어들고, 앱이 보는 화면 크기도 그만큼 달라집니다. 주소가 있을 때 나오는 「새로고침」은 화면만 다시 읽습니다. 앱의 핫 리로드가 아닙니다.

프리뷰 테마

도구 줄의 해/달 아이콘이 프리뷰의 밝기를 바꾸고, 「Customize」가 「프리뷰 테마」 패널을 엽니다. 패널에는 테마 검색, 미리 만든 테마(CoUI Light · CoUI Dark · Ocean · Forest · High Contrast Light · High Contrast Dark), Light · Dark, 색(Primary · Foreground · Secondary · Accent · Base · Error · Border), 글자 크기 배율(100% · 115% · 130%), 모서리 배율(각진 모서리 · 기본 · 둥근 모서리)이 있습니다.

바꾼 값은 이 세션의 프리뷰에만 적용되고 프로젝트 파일은 바꾸지 않습니다. 앱에도 적용되는지는 앱이 달려 있는지에 따라 갈립니다. 앱이 window.cocodePreviewTheme 연결(버전 1, setTheme 함수)을 열어 두었으면 「연결된 앱과 프레임에 즉시 적용 · 앱 상태 유지」이고, 그렇지 않으면 「앱 테마 연결 없음 · 아래 설정은 프레임에만 적용됩니다」라서 바깥 틀만 바뀝니다. 밝기 아이콘의 설명도 각각 「앱과 프레임 밝기」 · 「프레임 밝기 (앱 연결 없음)」으로 달라집니다.

운영체제별 차이

자주 겪는 문제

다음 단계

이제 설정 화면을 살펴봅니다. 가장 먼저 쓰는 항목은 AI 공급자입니다.