https://youtu.be/--ec9f0_QnU

Google AI Studio 시연을 보고...

지난 5월 20일 있었던 Google I/O 2025에서 Google AI Studio에 대한 내용이 있었습니다.
그 내용은 다음과 같습니다.
 
미국 자연사 박물관에 AI Studio로 만든 갤러리 웹앱이 있었습니다.

이걸 3D Sphere 형태로 보여주자는 brilliant 한 idea가 있었습니다.
이걸 스케치한 게 다음 내용입니다.

이 스케치를 AI Studio에 업로드하고, prompt를 짧게 입력했습니다.
단 37초 만에 다음과 같은 결과가 나왔습니다.

스케치의 내용처럼 sphere는 회전, 좌우 틸트, 줌인등의 효과를 완벽하게 구현했습니다.
이를 본 참석자들의 환호와 박수가 쏟아졌습니다.
 

v0.dev로 똑같이 구현할 수 있을까?

시연에 나온 AI Studio의 UI가 동작하는 방식은 Vercel의 v0.dev와 거의 유사했습니다.
그렇다면 v0.dev에서도 구현이 되지 않을까? 하는 의문이 생겼습니다.
그래서 한번 시도해 보았습니다.
 

v0.dev로 Photo Sphere Web App을 만들기

진행 순서는 다음과 같습니다.

• 1단계 : 갤러리 웹앱을 만듭니다.
• 2단계 : 스케치를 이용한 회전하는 원형 갤러리로 업그레이드 합니다.

1단계 : 갤러리 웹앱

• v0.dev에서 새 프로젝트를 만듭니다.
• 프로젝트 제목은 Photo Sphere로 합니다.
• 우선 갤러리를 만들기 위해 다음 프롬프트를 입력합니다.

로컬 폴더에 있는 이미지들을 자동으로 읽어와서 보여주는 
갤러리 웹앱을 만들어줘.

• 코드 생성이 완성되면 v0.dev 우측 상단의 다운로드 버튼을 누르고 소스를 다운로드 합니다.
• 로컬 프로젝트 폴더에서 압축을 풀고 에디터에서 폴더 열기를 합니다.
• yarn install을 실행해서 프로젝트 패키지를 설치합니다.
• yarn dev를 실행해서 서버를 start 시킵니다.
• 브라우저에서 http://localhost:3000을 입력하면 아래와 같이 갤러리 웹앱이 보입니다.

• public/images 폴더에 사진을 추가하고 브라우저를 새로 고침하시면 추가된 이미지가 보입니다.

2단계 : 스케치로 개발하기

• v0.dev의 프롬프트 창에 아래 이미지를 업로드합니다.

• 아래 프롬프트를 입력합니다.

tree.js를 사용해서 업로드한 스케치와 같이 지금 코드를 업데이트 해줘

• 저는 한번에 되지 않아 여러 차례 수정을 해주어야 했습니다. 아마도 영문 prompt로 했다면 좀 더 빨리 되지 않았을까 하는 생각도 드네요.
• 최종 결과 화면은 다음과 같습니다.

완벽하지는 않지만 구글I/O 2025에서 AI Studio가 보여준 화면과 유사한 형태의 결과가 나왔습니다.
스케치를 보고 사용자가 무엇을 원하는지를 정확하게 분석을 해내는 모습이 인상적이었습니다.
 

결론

요즘 AI가 빠른 속도로 발전하고 있고, 성능도 점점 좋아지고 있습니다.

까딱 잘못하면 시대의 흐름에 뒤쳐질 수 있습니다.

이제 AI를 다루는 것도 프로그램 개발 능력 중 하나가 된 것 같습니다.

이 글의 유튜브 영상 링크입니다.
https://www.youtube.com/watch?v=XXurwjs307s

유튜브 영상을 시청하다 보면 기록으로 남겨 놓고 싶은 영상들이 있습니다. 최신 AI 기술을 활용하면 이런 과정을 쉽게 자동화할 수 있습니다.

자동화 구성 요소

이 자동화는 Cline, MCP, Gemini, Obsidian을 활용하여 이루어집니다.

구성 요소 설치

1. Cline: Visual Studio Code의 확장 프로그램으로, 플러그인으로 쉽게 설치할 수 있습니다.
2. LLM 연동: Cline에 Gemini와 같은 다양한 LLM(Large Language Model)을 연동합니다.
3. MCP Server 설치: Cline에 MCP Server를 설치하여 AI Agent 환경을 구성합니다.
4. YouTube Subtitles MCP 설치: 유튜브 스크립트를 가져오기 위해 MCP에서 YouTube Subtitles 도구를 설치합니다.

자동화 작동 방식

사용 환경 설정이 완료되면, 사용자의 요청에 따라 AI가 스스로 어떤 도구들을 활용할지 판단하여 요청을 수행합니다.

* AI Agent: 기존 AI Workflow와 달리, AI Agent는 AI가 스스로 처리 방식을 판단하여 유연하게 작업을 수행합니다.
* 자동 처리: 유튜브 링크와 간단한 프롬프트만 입력하면, AI Agent가 모든 과정을 자동으로 처리합니다.
* 결과 저장: 처리된 결과는 Cline이 Markdown 파일로 생성하여 Obsidian에 저장합니다. 모든 과정이 사람의 개입 없이 자동으로 처리됩니다.

사용 예시

"코딩 없이 웹사이트 개발하기 v0.dev" 영상(https://www.youtube.com/watch?v=YxEZkQi3M5w)을 예시로 자동화 과정을 설명합니다.

프롬프트 예시:

https://www.youtube.com/watch?v=YxEZkQi3M5w 
이 영상의 내용을 Markdown 문법으로 정리해서 
0.Inbox 폴더에 "코딩없이 웹사이트 개발하기 v0.dev"란 제목으로 저장해줘. 
문서 제일 상단에는 youtube link도 넣어줘.

처리 과정:

1. 프로젝트 열기: VSCode에서 폴더 열기를 선택한 후 Obsidian 최상위 폴더를 선택합니다.
2. 도구 활용 판단: AI가 YouTube Subtitles MCP Server의 `download_youtube_url` 도구를 사용한다고 판단하고 승인을 요청합니다.
3. 자막 추출: 승인 후, YouTube에서 자막이 응답으로 옵니다.
4. 문서 생성: 마지막으로 AI가 내용을 정리하여 Markdown 문서를 생성하고 Obsidian에 저장합니다.

생성된 문서 내용 (예시):

코딩 없이 웹사이트 개발하기 v0.dev

YouTube Link: https://www.youtube.com/watch?v=YxEZkQi3M5w

영상 요약

이 영상은 AI를 활용하여 코딩 없이 웹사이트를 개발하는 방법, 특히 Vercel의 V0.dev 서비스를 소개합니다.

1. 바이브 코딩 (Vibe Coding) 이란?

* 정의: 키보드로 직접 코드를 입력하는 대신, 특정 분위기나 느낌을 가진 화면을 자연어로 요청하여 AI가 이를 해석하고 코드를 생성하는 개발 방식입니다.
* 장점:
* 개발 지식이 부족해도 개발이 가능합니다.
* 기술적인 측면보다 핵심 서비스에 집중할 수 있습니다.
* 기획-디자인-개발의 전통적인 방식 대신, 프롬프트 입력만으로 AI가 적절한 기술과 디자인 트렌드를 적용하여 서비스를 개발합니다.

2. V0.dev 소개

* 개발사: Next.js 프레임워크를 만든 Vercel에서 개발했습니다.
* 특징:
* Next.js 프레임워크 기반의 코드 생성 AI로, UI 개발에 강점을 가집니다.
* 높은 코드 품질과 디자인 완성도를 자랑하여 실제 프로젝트에 바로 적용 가능합니다.
* 개발 시간을 크게 단축할 수 있습니다.
* 백엔드 개발자가 프론트엔드 지식이 부족해도 풀스텝 개발 및 서비스 런칭이 가능합니다.
* 에러 발생 시, 에러 코드를 입력하면 AI가 분석하여 코드를 수정해줍니다.

3. V0.dev 사용 예시 (테크 블로그 사이트 제작)

* 목표: 현대적인 디자인의 프로그래밍 테크 블로그 사이트 제작.
* 프롬프트 예시: "현대적인 디자인의 프로그래밍 테크 블로그를 만들어줘. 상단에 Hardyshop 섹션을 만들고, 그 아래에 최신 글을 이미지와 요약과 함께 그리드 형식으로 보여줘. 사이드바에 카테고리와 뉴스레터 구독 폼을 추가해줘."
* 제작 과정:
1. V0.dev 사이트 접속 후, `Projects`에서 `Create new project` 클릭.
2. `Create Blog Site` 버튼 클릭 후, 준비된 프롬프트 복사/붙여넣기.
3. AI가 프롬프트를 해석하여 코드를 생성 (약 2~3분 소요).
4. 생성된 사이트는 헤더, 로고 내비게이션, 검색 기능, 핫 이슈 섹션, 최신 글 그리드, 사이드바 등으로 구성되며, Shad CN UI 컴포넌트, 반응형 디자인, 호버 효과, 일관된 색상 구성 등이 적용됩니다.
5. 생성된 코드는 `page.tsx`를 메인으로 컴포넌트 단위로 잘 분리되어 있습니다.
* 추가 기능 적용:
* 다크 모드 추가 (예: `darklight mode toggle feature` 구현 요청).
* V0.dev 내에서 바로 배포 및 서비스 런칭이 가능합니다.

4. 향후 학습 내용

* V0.dev에서 생성된 소스 코드 다운로드 및 로컬 실행 방법.
* 백엔드 API 연결 방법.
* AWS 등 실제 서비스를 활용한 서비스 설정 방법.

이 글은 유튜브 영상으로 제작되었습니다.
https://youtu.be/YxEZkQi3M5w?si=7sQx_Gpz8kgioPTl

코딩 없이 웹사이트 개발이 가능할까요?

물론입니다. 요즘 "바이브 코딩"이라는 단어 들어보셨죠?
이게 직접 코드를 입력하지 않고 코드를 개발하는 방법입니다.
AI를 이용하는 것이죠.
코드를 입력하는게 아니라 AI에게 Prompt를 입력해서 개발을 진행하는 것을 바이브 코딩이라고 합니다.

바이브 코딩이란?

"내가 어떤 분위기의 화면을 원한다, 어떤 느낌의 구성으로 만들고 싶다."
이런 ‘의도’를 AI에게 자연어로 전달하면, 그걸 코드로 바꿔주는 새로운 프로그래밍 방식입니다. 

기존 프로그램 개발 방식과의 차이점은 다음과 같습니다.

기획-디자인-코딩과 같은 형태에서, 프롬프트 입력 만으로 개발이 가능해졌습니다.

v0.dev

이렇게 바이브코딩을 지원하는 AI 중 하나가 Vercel에서 나온 v0.dev입니다.

Vercel은 Next.js 프레임워크를 만든 곳입니다.

따라서 v0.dev를 사용하면 next.js 프레임워크로 제작된 코드가 생성됩니다.

v0.dev는 굉장히 높은 수준의 디자인과 코드 품질을 보여줍니다.

그래서, 구현된 코드를 실전에 적용해 바로 사용이 가능합니다.

데모 프로젝트

v0.dev에서 테크블로그 사이트를 만드는 프로젝트를 진행해보겠습니다.

https://v0.dev 에 방문하여 새로운 프로젝트를 만들고,

다음과 같이 프롬프트를 입력합니다.

모던한 디자인의 프로그래밍 테크 블로그를 만들꺼야.
상단에 Hot Issue 섹션을 만들어줘
그 아래는 이미지와 요약이 포함된 최신 기사를 그리드 형태로 보여줘.
사이드바에는 카테고리와 뉴스레터 구독 신청 기능을 넣어줘.

단지 이것만으로 AI가 아래와 같이 완성된 사이트를 만들어주었습니다.(2~3분 소요)

추가로 "다크모드"를 요청하면 2분내로 아래와 같은 결과물을 만들어주었습니다.

결론

이제 비개발자도 바이브코딩으로 웹사이트를 개발할 수 있게 되었습니다.

그것도 빠르고, 좋은 품질의 결과물을 만들 수 있습니다.

물론 문제가 생겼을때는 개발자가 훨씬 유리하고 빠르게 해결을 할 수 있습니다.

이제 기술 보다는 "어떤 것을 만들 것인가?" 훨씬 중요한 시대가 되었습니다.

Frontend 개발시에 Device 종류를 알아야 하는 경우가 있습니다.
예를들면, Device 종류가 Mobile 인지 PC 인지에 따라 CSS를 다르게 처리하는 등의 일입니다.

이때 device를 알기 위해서는 @nuxtjs/device 라는 패키지를 사용합니다.

Nuxt3에서 @nuxtjs/device의 셋팅 방법과 사용방법에 대해 알아봅니다.

@nuxtjs/device 패키지 설치

npm 또는 yarn으로 @nuxtjs/device 패키지를 설치합니다.

# npm 사용시
npm install @nuxtjs/device

# yarn 사용시
yarn add @nuxtjs/device

nuxt.config.ts 설정

modules에 @nuxtjs/device를 추가하고, device 설정을 추가합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/device'],
  
  // 기본 device 설정
  device: {
    refreshOnResize: true,  // 창 크기 변경시 디바이스 감지 새로고침
    defaultUserAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36',  // 기본 User Agent
    detectOnInitialize: true  // 초기화시 디바이스 감지
  }
})

플러그인 생성

plugins 폴더에 device.ts 파일을 생성합니다.

export default defineNuxtPlugin((nuxtApp) => {
  const device = useDevice()

  // 디바이스 정보를 전역 상태로 관리하고 싶을 때
  const deviceStore = useState('device', () => ({
    isMobile: device.isMobile,
    isTablet: device.isTablet,
    isDesktop: device.isDesktop,
    userAgent: device.userAgent
  }))

  return {
    provide: {
      deviceInfo: deviceStore
    }
  }
})

사용 방법

device 정보를 가져올 Vue 소스에서 deviceInfo를 선언합니다.

const { $deviceInfo } = useNuxtApp();

$deviceInfo.isMobile 을 사용하여 mobile 여부를 체크할 수 있습니다.

<div class="mobile-css" v-if="$deviceInfo.isMobile"/>

Amazon linux version 2 와 Amazon linux 2023 에서 docker 설치 방법에 살짝 차이가 있습니다.

이 글은 Amazon linux 2023에 docker를 설치하는 방법에 대해 알아보겠습니다.

1. 패키지를 업데이트 합니다.

sudo yum update -y

2. Docker community edition을 설치합니다.

sudo yum install -y docker

3. Docker service 를 시작합니다.

sudo service docker start

4. ec2-user를 사용하지 않고도 docker를 실행할 수 있도록 docker 그룹에 sudo를 추가합니다.

sudo usermod -a -G docker ec2-user

5. ssh 창을 닫고 다시 접속합니다.(권한 적용)

6. ec2-user 없이 sudo가 docker 명령을 수행할 수 있는지 확인합니다.

docker ps

7. 아래와 같은 결과가 나오면 셋팅이 정상적으로 완료된 것입니다.

Nestjs에서 e2e 테스트 수행에는 성공했지만 다음과 같은 메시지가 나오면서 테스트가 종료되지 않는 문제가 발생했습니다.

Jest did not exit one second after the test run has completed.
'This usually means that there are asynchronous operations 
that weren't stopped in your tests. 
Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

오류 메시지에 친절하게도 --detectOpenHandles를 사용하라고 나옵니다.

이 옵션을 추가해서 실행해 보았습니다.

에러 메시지는 사라졌지만 여전히 커서가 깜빡이면서 종료가 되지 않습니다.

이때 추가적으로 --forceExit 옵션을 사용하면 테스트 완료 후 정상적으로 종료가 됩니다.

npm test:e2e --detectOpenHandles --forceExit

드라마나 영화를 보면 주인공은항상 위기를 겪는다.

하지만 이런 상황에서도 주인공은 절대 좌절하거나 포기하지 않는다.

설령 포기하더라도 어떤 계기가 찾아오게 되고,

이 어려운 과정을 극복하기 위해 온갖 역경을 이겨나간다.

이것이 결국 이 스토리의 중심이 되고, 그 과정을 통해 주인공의 캐릭터가 명확하게 그려진다.

해리포터가 평범한 마법사로 살았다면 지금 같은 스토리는 절대 만들어지지 않았을 것이다.

때로는 다치기도 하고, 엄청난 시련을 겪기도 하지만 그것을 이겨냈을때 비로소 해피엔딩에 다다르게 된다.

이건 비단 드라마와 영화에만 국한되지 않는다.

스포츠에서도 무난하게 이기는 경기보단 대 역전극을 이뤘을때 더 많은 감동을 받게된다.

우리의 삶도 마찬가지가 아닐까?

억지로 드라마 같은 스토리를 만들라는 얘기는 아니다.

하지만 우리의 인생은 충분히 힘들고, 어렵다.

지금 우리의 삶이 위기를 겪고 있다면,

그 어떤 때보다도 고통스럽고 견디기 힘들다면,

이것은 우리의 스토리를 멋지게 만들어가는 과정이라고 생각해 보자.

먼 훗날 내 인생 이야기의 완성을 위한 커다란 밑거름이라고....

Dart로 첫 번째 프로그램을 만들고 실행하는 법에 대해 알아보겠습니다.
에디터는 Visual Studio Code(VSCode)를 사용합니다.
 

Flutter Extention 설치

VSCode에 Flutter extention을 설치합니다. Flutter extention을 설치하면 Dart도 같이 설치가 됩니다.
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Dart Project 생성

VSCode에서 Command Pallete를 실행합니다.
VSCode의 메뉴에서 "보기-명령 팔레트"를 선택하거나, 단축키 Command+Shift+P를 누릅니다.

Command Pallete에 "Dart"를 입력합니다.

다음 화면에서 "Cosole Application"을 선택합니다.

다음 화면에서 프로젝트 폴더명을 입력 합니다.
저는 "dart_first_app"라는 폴더명을 사용했습니다.

입력 후 "Select a folder to create the projec in"을 클릭합니다.

폴더 생성 후 프로젝트 명을 입력합니다.
저는 "dart_first_app"이라고 입력하였습니다.

이제 첫번째 프로젝트가 완성되고 아래와 같은 화면이 나옵니다.

Dart 프로젝트 실행

프로젝트 우측 상단의 실행 버튼을 클릭합니다.

프로젝트가 정상적으로 실행되면 아래와 같이 "Hello World" 로그가 나옵니다.

 
이렇게 Dart 첫번째 프로젝트가 완료되었습니다.

Flutter의 개발 언어로 잘 알려진 Dart에 대해 알아보겠습니다.

이 글은 dart 의 공식 홈페이지를 참조하여 작성 하였습니다.

https://dart.dev/

Dart 의 장점

아래는 Dart 공식 홈페이지에 가면 가장 먼저 보이는 배너입니다.

"Instant hot reload" 라는 것을 강조하고 있습니다.

이것은 프로그램을 개발 할 때 코드가 변경되는 즉시 반영이 된다는 뜻입니다.

컴파일과 빌드를 요구하는 다른 언어들은 전체 코드를 빌드하는데 일정 시간이 소요됩니다.

개발시 UI 관련 코드를 변경하고 바로 확인할 수 있다는 것은 큰 장점입니다.

• 개발 효율의 증가 - 시간 단축
• 빠른 피드백 - 테스트나 디버깅에 유리

다른 장점들에 대해서도 설명하고 있습니다.

• Approachable
  • 친숙한 언어이다 - 다른 언어에서 사용한 문법과 유사한 형태를 가지고 있어 언어에 쉽게 접근할 수 있습니다.
  • 강력한 Type 언어이다 - 명확한 type 정의를 사용하여 사전에 오류를 막을 수 있습니다.
  • NULL Safe 언어이다 - 변수에 null을 할당할 수 없습니다. 따라서 실행 중 null point exception과 같은 오류에서 자유로워질 수 있습니다.
• Productive development
  • Dart는 개발 생산성을 높여주는 언어입니다.
  • Hot reload를 제공하여 개발 속도를 높이고, 빠르게 실험해 볼 수 있습니다.
  • 여러 Editor와 통합 환경을 제공함으로 개발 편의성을 높였습니다.
• Portable and fast on all platforms
  • 여러 platform에서 동일한 코드로 실행되는 언어입니다.
  • iOS, Android 같은 모바일 환경 뿐만 아니라, desktop, web, server등의 다양한 환경에서 작동 가능합니다.

Dart의 단점

• Native App과 똑같지는 않습니다. 즉 iOS, Android 등 Native 가 가지고 있는 고유한 형태의 app 보다는 범용적인 형태의 app 개발에 유리합니다.
• 개발 생태계가 크지 않습니다. 다른 성숙한 언어들에 비해 커뮤니티, 오픈소스, 플러그인 등이 많지 않습니다.
• 브라우저에서 개발시 transpile 해야 하므로 성능이나 디버깅에 제한이 있을 수 있습니다.

결론

• Flutter와의 통합으로 크로스플랫폼 개발을 할 수 있습니다. 복잡한 기능이 아니라면 적은 비용으로 iOS, Android용 앱을 모두 개발 할 수 있습니다.
• 간결한 문법으로 쉽게 접근이 가능하고, 다양한 Editor를 사용할 수 있습니다. 복잡하지 않은 기능의 앱을 빠르게 개발 하고자 한다면 Dart를 사용해 보는 것도 좋은 선택지가 될 것 같습니다.

Flutter 개발 환경 설정에 대해 알아봅니다.

이 글은 Flutter 공식 홈페이지의 Get Started 문서를 참조하였습니다.

https://docs.flutter.dev/get-started/install

플랫폼 선택

환경에 맞게 선택하시면 됩니다.
저는 맥을 선택하였습니다.

Type of app

다음으로는 어떤 종류의 앱을 만들 것인지를 선택해야 합니다.

저는 iOS를 선택하였습니다.

Software 설치

• Apple Sillicon을 사용하는 Mac일 경우 Rosetta 2 translation process를 설치해야 합니다.
  • Mac에서 intel 기반의 app을 실행할 때 필요한 유틸리티입니다.

sudo softwareupdate --install-rosetta --agree-to-license

• XCode 설치
  •  Swift 와 ObjectC code를 컴파일하고 디버깅 하기 위해 XCode를 설치합니다.
  • https://developer.apple.com/xcode/

• CocoaPods 설치
  • Native앱에 Flutter plugin 컴파일이 가능하도록 CocoaPods을 설치합니다. 
  • https://cocoapods.org/

• 아래 명령어를 사용하여 cocoapods를 설치합니다

sudo gem install cocoapods

• cocoapods 설치시 다음과 같은 오류가 발생할 수 있습니다.

ERROR:  Error installing cocoapods:
	ERROR: Failed to build gem native extension.

• 이때는 xcode-select를 인스톨 하면 됩니다.
  • xcode-select는 XCode의 명령줄 관리 도구입니다.

xcode-select --install

• 간혹 xcode-select도 아래와 같이 설치가 안될 경우가 있습니다.

xcode-select: note: Command line tools are already installed. 
Use "Software Update" in System Settings or the softwareupdate 
command line interface to install updates

• 이때는 software update를 download 하여 설치하면 해결 할 수 있습니다.
  • software update는 운영 체제와 관련된 모든 소프트웨어 업데이트를 자동으로 설치하는 기능을 수행합니다.
  • 따라서 다운로드 및 설치 시간이 좀 많이 소요됩니다.

softwareupdate --install -a

• 다운로드가 완료되면 "시스템 설정"에 업데이트가 표시되고, 업데이트를 클릭 하시면됩니다.
  • 업데이트가 완료되면 다시 CocoaPods를 설치합니다.

sudo gem install cocoapods

• 설치가 완료되면 다음과 같이 메시지가 표시됩니다.

Text Editor Settings

• Text editor는 Visual Studio Code, Android Studio, IntelliJ IDEA등을 사용할 수 있습니다.
• 저는 Visual Studio Code를 선택하였습니다.
• Visual Studio Code를 설치하고, 실행합니다.
• 아래 링크에 있는 Dart Extention을 추가합니다.
• https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
• Command Palette를 실행합니다. 단축키는 Command+Shift+P 입니다.
• Command Palette에서 "flutter"를 입력합니다.

• "Flutter:New Project"를 선택합니다.
• 이때 Flutter SDK가 설치 되어 있지 않으면 다운로드하여 설치하시면됩니다.
• 설치가 되어 있다면 위치를 지정해주면 됩니다.
• SDK 설치 후에 Command Palette에서 "Flutter:New Project"를 선택하고 "flutter-first" 라는 프로젝트를 생성합니다.

iOS 개발환경 설정

• XCode를 설치합니다.
• XCode의 버전에 맞는 command line tool을 설치합니다.

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

• XCode license에 동의 서명을 합니다.

sudo xcodebuild -license

iOS Simulator 설치

• iOS Simulator를 설치합니다.

xcodebuild -downloadPlatform iOS

• Simulator를 실행합니다

open -a Simulator

• XCode를 실행합니다.
• 메뉴에서 Windows - Devices and Simulators를 선택합니다.
• simulator 탭을 클릭하면 사용 가능한 리스트가 나옵니다.

• XCode에서 flutter_first 프로젝트를 엽니다.

• 탐색 창에서 flutter_first 프로젝트 아래 있는 ios를 선택하면 됩니다.

• XCode 상단의 파란색 실행 버튼을 클릭합니다.

• 아래와 같이 simulator가 실행됩니다.