개요​

1. KADaP GPUaaS​

자동차데이터플랫폼 (KADaP; Korea Automotive Data Platform) 에는 AI 모델 개발 및 학습을 위한 KADaP GPUaaS 를 제공합니다.

기본적으로 jupyter lab 환경과 visual studio code 를 web ide 형태로 제공합니다.

제공되는 환경 외에 docker hub 에 저장되어 있는 container 환경을 로드하여 사용할 수 있는 기능을 제공합니다.

뿐만 아니라, web ide 에서 사용자가 추가 업데이트한 환경을 private image 로 저장해두고 지속적으로 로드하여 사용할 수 있습니다.

본 문서에서는 docker hub 에 저장된 public/private 이미지를 불러와 실행하는 방법과 사용자 정의 환경을 저장하는 방법에 대해 소개합니다.

구체적인 이해를 위해 Visual studio code server 를 docker container 로 직접 구성하고, KADaP GPUaaS 에서 사용할 수 있도록 docker hub 에 업로드 후 로드하여 사용하는 과정에 대해 설명합니다.

KADaP CLOUD 의 docker agent 환경에서 ubuntu 22.04 를 기반으로 진행합니다.

외부 서버에서 진행 시 docker agent 환경이 필요합니다.

Docker image 생성​

1. Dockerfile 작성​

1-1. Ubuntu 22.04 환경 구성​

CLI 환경에서 아래의 명령어를 통해 Dockerfile 을 생성하고 내용을 작성합니다.

vi Dockerfile

국내 미러를 사용하기 위해 kaist 미러를 사용하고, 서울 시간대로 구성합니다.

FROM ubuntu:22.04

ENV DEBIAN_FRONTEND=noninteractive

# 한국 미러로 변경 (kaist)
RUN sed -i 's|http://archive.ubuntu.com/ubuntu|http://ftp.kaist.ac.kr/ubuntu|g' /etc/apt/sources.list && \
    sed -i 's|http://security.ubuntu.com/ubuntu|http://ftp.kaist.ac.kr/ubuntu|g' /etc/apt/sources.list

# apt update + 최소 패키지
RUN apt-get update && \
    apt-get install -y \
      curl \
      ca-certificates \
      sudo \
      git \
    && rm -rf /var/lib/apt/lists/*

# 서울 시간대 설정
RUN ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime && \
    echo "Asia/Seoul" > /etc/timezone

ENV TZ=Asia/Seoul

1-2. Visual Studio Code Server 설치​

1-1 에서 작성한 Dockerfile 에 Visual Studio Code Server 를 설치하고 자동 실행되도록 아래의 명령어를 추가합니다.

# code-server 설치
RUN curl -fsSL https://code-server.dev/install.sh | sh

# 사용자 추가 (kadap)
RUN useradd -m kadap && echo "kadap ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers

USER kadap
WORKDIR /home/kadap

# config
RUN mkdir -p /home/kadap/.config/code-server
RUN echo "bind-addr: 0.0.0.0:8080" > /home/kadap/.config/code-server/config.yaml && \
    echo "auth: none" >> /home/kadap/.config/code-server/config.yaml && \
    echo "cert: false" >> /home/kadap/.config/code-server/config.yaml

RUN chown -R kadap:kadap /home/kadap/.config

EXPOSE 8080

CMD ["sh", "-lc", "code-server ."]

최종적으로 작성된 Dockerfile 은 아래와 같습니다.

FROM ubuntu:22.04

ENV DEBIAN_FRONTEND=noninteractive

# 한국 미러로 변경 (kaist)
RUN sed -i 's|http://archive.ubuntu.com/ubuntu|http://ftp.kaist.ac.kr/ubuntu|g' /etc/apt/sources.list && \
    sed -i 's|http://security.ubuntu.com/ubuntu|http://ftp.kaist.ac.kr/ubuntu|g' /etc/apt/sources.list

# apt update + 최소 패키지
RUN apt-get update && \
    apt-get install -y \
      curl \
      ca-certificates \
      sudo \
      git \
    && rm -rf /var/lib/apt/lists/*

# 서울 시간대 설정
RUN ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime && \
    echo "Asia/Seoul" > /etc/timezone

ENV TZ=Asia/Seoul

# code-server 설치
RUN curl -fsSL https://code-server.dev/install.sh | sh

# 사용자 추가 (kadap)
RUN useradd -m kadap && echo "kadap ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers

USER kadap
WORKDIR /home/kadap

# config
RUN mkdir -p /home/kadap/.config/code-server
RUN echo "bind-addr: 0.0.0.0:8080" > /home/kadap/.config/code-server/config.yaml && \
    echo "auth: none" >> /home/kadap/.config/code-server/config.yaml && \
    echo "cert: false" >> /home/kadap/.config/code-server/config.yaml

RUN chown -R kadap:kadap /home/kadap/.config

EXPOSE 8080

CMD ["sh", "-lc", "code-server ."]

2. Docker image 생성 및 업로드​

2-1. Docker build​

1 에서 작성한 Dockerfile 을 빌드하여 docker image 를 생성합니다.

Dockerfile 이 있는 디렉토리에서 아래 명령어를 실행합니다.

docker build --network=host -t {이미지이름:태그} .

2-2. Docker push​

2-1 에서 생성한 docker image 를 docker hub 에 push 합니다.

docker push <이미지이름:태그>

KADaP GPUaaS 에서 container 로드​

KADaP GPUaaS 에는 기본 제공되는 container 외에 사용자가 추가로 사용하고자 하는 container 를 로드하여 사용할 수 있습니다.

워크로드 생성 시 Pubilc Image 또는 Private Image 를 선택하여 docker hub 이미지를 로드할 수 있습니다.

info

Private Image 의 경우 docker hub 로그인을 위한 credential 정보를 입력해야 합니다.

1. 워크로드 설정​

2 에서 생성한 docker image 를 불러와 워크로드를 실행할 수 있습니다.

아래와 같이 Pubilc Image 를 선택하고 위에서 docker hub 에 업로드 한 이미지 이름 kadap/code-server:latest 를 입력합니다.

info

본 예시에서는 이미지 실행 명령어, 환경 변수 및 포트 추가하지 않아도 실행되도록 Dockerfile 을 작성하였습니다.
필요 시 실행 명렁어, 환경 변수 및 포트 추가하여 워크로드를 실행할 수 있습니다.

2. 워크로드 실행​

정상적으로 동작하는 이미지 로드 시 워크로드가 실행되고 code-server 에 접속할 수 있습니다.

워크로드 정상 동작 확인 후 연결 버튼을 클릭하여 워크로드에 접속합니다.

개요​

1. KADaP API​

자동차데이터플랫폼 (KADaP; Korea Automotive Data Platform) 에는 AI 및 자동차 산업에 특화된 API 를 이용할 수 있는 KADaP API 서비스를 제공하고 있습니다.

KADaP API 는 자동차데이터포털 계정으로 로그인 후 이용 가능하며, 필요한 API 에 대하여 사용 신청 후 사용 가능합니다.

사용자가 분석 및 개발한 결과물 (e.g., 알고리즘) 을 API 형태로 공유할 수 있는 API Gateway 기능을 제공합니다.

2. Open WebUI​

Open WebUI 는 Ollama 및 OpenAI 호환 프로토콜을 지원하는 AI 배포 솔루션입니다. 대규모 언어모델 (LLM) 과 상효작용을 위한 웹 기반 인터페이스로, 명령줄 도구 (CLI) 대신 그래픽 사용자 인터페이스 (GUI) 를 제공합니다. Docker/Kubernetes 또는 uv 를 통해 간편하게 설치할 수 있으며, GPU 지원 (CUDA) 및 Ollama 번들 이미지 등을 제공하여 쉽게 배포하고 관리할 수 있습니다.

본 문서에서는 KADaP CLOUD 환경에서 Docker 를 이용한 Open WebUI 설치 및 사용 방법에 대한 가이드를 제공합니다.

Open WebUI 설치​

Open WebUI 는 Docker 를 사용하여 빠르게 설치할 수 있습니다. Docker 사용하기 위해서는 현재 서버 또는 PC 내부에 Docker 에이전트가 설치되어 있어야 합니다.

1. Open WebUI 이미지 다운로드​

아래 명령어를 통해 최신 Open WebUI Docker 이미지를 가져옵니다.

docker pull ghcr.io/open-webui/open-webui:main

또는 제한적인 환경을 위해 사전 번들 모델을 제외한 간소화된 이미지 버전을 아래 명령어를 통해 가져올 수 있습니다. 이미지 크기는 작지만, 처음 사용할 때 필요한 모델 (whisper, 임베딩 모델) 을 별도로 다운로드 받아야합니다.

docker pull ghcr.io/open-webui/open-webui:main-slim

본 문서에서는 slim 모델이 아닌 원본 모델을 사용합니다.

2. 컨테이너 실행​

2-1. KADaP CLOUD 환경​

KADaP CLOUD 환경에서 기본 설정으로 컨테이너 실행을 위해서는 아래의 명령어를 이용합니다.

sudo docker run -d \
  --network=host \
  --add-host=host.docker.internal:host-gateway \
  -v open-webui:/app/backend/data \
  --name open-webui \
  --restart always \
  ghcr.io/open-webui/open-webui:main

볼륨 매핑 위치를 변경하려면 -v {볼륨 위치}:/app/backend/data 부분을 수정하면 됩니다.

간소화된 slim 버전의 이미지를 사용한다면 아래의 명령어로 컨테이너 실행할 수 있습니다. 기본 명령어의 실행 이미지만 변경하면 됩니다.

sudo docker run -d \
  --network=host \
  --add-host=host.docker.internal:host-gateway \
  -v open-webui:/app/backend/data \
  --name open-webui \
  --restart always \
  ghcr.io/open-webui/open-webui:main-slim

2-2. Ubuntu (WSL) 환경​

Ubuntu (리눅스) 서버 혹은 WSL 환경에서 기본 설정으로 컨테이너 실행을 위해서는 아래의 명령어를 이용합니다. 이 명령에는 컨테이너 데이터 저장을 위한 볼륨 매핑이 포함되어 있습니다.

sudo docker run -d -p 3000:8080 -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:main

볼륨 매핑 위치를 변경하려면 -v {볼륨 위치}:/app/backend/data 부분을 수정하면 됩니다.

간소화된 slim 버전의 이미지를 사용한다면 아래의 명령어로 컨테이너 실행할 수 있습니다. 기본 명령어의 실행 이미지만 변경하면 됩니다.

sudo docker run -d -p 3000:8080 -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:main-slim

Open WebUI 설정 및 챗봇 연결​

1. 클라우드 환경 설정​

KADaP CLOUD 와 KADaP API 연동을 위해서는 클라우드 내 hosts 파일 수정이 필요합니다. 아래 명령어를 통해 클라우드 서버의 hosts 파일에 접근할 수 있습니다.

sudo vi /etc/hosts

hosts 파일 내 아래의 내용을 추가하여 KADaP API 서버에 연결할 수 있도록 수정합니다.

10.10.50.100 api-gateway.bigdata-car.kr

내용을 추가했을 때 /etc/hosts 파일의 내용은 아래와 같은 형태가 됩니다.

127.0.0.1 localhost
10.10.50.100 api-gateway.bigdata-car.kr

# The following lines are desirable for IPv6 capable hosts
::1 ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
ff02::3 ip6-allhosts

2. 챗봇 만들기​

KADaP API 는 OpenAI 의 gpt, LG AI 의 EXAONE 을 포함한 약 600 여개의 LLM 모델을 API 형태로 지원합니다. 본 문서에서는 LG AI 의 EXAONE-3.5-7.8B-Instruct 모델을 API 로 연결하는 방법에 대해 설명합니다.

2-1. KADaP API 연결정보 확인​

KADaP API 상세정보에는 해당 API 를 외부에서 쉽게 연결할 수 있도록 연결정보를 제공하고 있습니다. API DOCS 바로가기 버튼을 통해 연결정보를 확인할 수 있습니다.

DOCS 페이지에서 해당 API 호출을 위한 endpoint, request body 등 정보를 확인할 수 있습니다.

2-2. Open WebUI 설정​

도커 이미지로 실행시킨 Open WebUI 에 접속합니다. Open WebUI 는 8080 포트를 통해 배포되며, KADaP CLOUD 사용자는 CLOUD 의 포트포워딩 기능을 사용하여 외부 포트를 할당받아 접속할 수 있습니다.

최초 접속 시 사용자 이름, 이메일, 비밀번호를 등록해야합니다. 해당 정보는 Docker 컨테이너의 /app/backend/.webui_secret_key 파일에 암호화되어 저장되고, 추후 접속 시 로그인을 위해 사용됩니다.

[챗봇 연결]​

로그인 후, 관리자 패널의 설정 페이지에 접속합니다.

연결 탭으로 이동 후 우측의 OpenAI API 연결 추가 (+) 버튼을 클릭합니다.

연결 추가 팝업 내 URL, Headers, 모델 ID 를 추가합니다.

URL 은 KADaP API 의 DOCS 에서 확인한 Server 주소 뒤에 /api/v1 을 붙여 입력합니다. Headers 에 DOCS 에서 확인한 개인 API key 를 "X-Api-Key" 이름으로 입력합니다. 모델 ID 는 DOCS 에서 확인한 Request body 의 model 이름을 입력합니다.

해당 예시는 KADaP API 의 EXAONE-3.5-7.8B-Instruct 모델에 대한 예시이며, 모델 명은 /.exaone 입니다.

OpenAI 의 모델을 사용한다면 gpt-4o 와 같은 모델 명을 입력할 수 있습니다.

연결 성공 시 OpenAI API 설정이 업데이트되었습니다. 알림과 함께 API 가 등록됩니다.

이제 홈 화면에서 등록한 모델을 사용하여 채팅할 수 있습니다!

웹 애플리케이션 배포를 위해서는 서버, 도메인, SSL 설정, CI/CD 구성, 캐시 최적화 등 많은 작업이 필요합니다.

Vercel은 이런 과정을 자동화하여, 개발자가 코드 작성에 집중하여 쉽고 빠르게 배포할 수 있도록 도와줍니다. Vercel은 Next.js를 만든 회사에서 운영하는 클라우드 플랫폼으로 React 및 Next.js 기반 웹 애플리케이션을 가장 효율적으로 배포할 수 있도록 설계되어있습니다.

2. Vercel의 주요 기능

2-1. 정적 및 동적 사이트 배포​

• Vercel은 Gatsby, Next.js, SvelteKit와 같은 웹 프레임워크로 개발한 정적 웹페이지를 쉽게 호스팅 할 수 있습니다.

  예를 들어 블로그나 랜딩 페이지처럼 내용이 거의 변하지 않는 사이트는 정정 사이트로, 로그인, 게시판, API 호출이 필요한 서비스는 동적 사이트로 운영 할 수 있습니다. Vercel은 두 타입 사이트를 하나의 플랫폼에서 모두 처리할 수 있습니다.

• Vercel의 큰 강점은 동적 사이트 또한 무중단 배포가 가능합니다.

  무중단 배포란 서비스의 중단 없이 새 버전을 배포하는 것으로, 사용자가 서비스를 이용하는 동안에도 업데이트가 가능합니다.

  

2-2. 자동 CI/CD 파이프라인​

• GitHub, GitLab, Bitbucker 등의 Git 리포지토리에 연동하여 배포 파이프라인이 자동화되어 코드 변경 시 마다 새로운 빌드와 배포가 가능합니다.

  

  Vercel은 Zero-Config 배포로 별도의 설정 파일이나 빌드 스크립트 작성 없이, 시스템이 소스 코드를 분석하여 필요한 빌드 및 최적화를 수행합니다. 따라서, 개발자의 수동 개입 없이 일관된 배포가 가능합니다. 이를 통해 배포 실수, 환경 차이로 인한 오류를 크게 줄일 수 있습니다.

• 브랜치 기반 배포를 지원하기 때문에 지정된 프로덕션 브랜치에 merge 되면 자동으로 프로덕션 사이트에 적용되고, 기타 브랜치에 merge할 경우 프리뷰 배포를 생성합니다.

• Vercel은 roll-back 기능도 제공하여 장애 발생시 이전 버전으로 재적용할 수 있습니다.

2-3. Edge Functions​

• Edge Functions은 사용자와 가장 가까운 위치에서 코드가 실행할 수 있게 만드는 서버측 TypeScript 함수입니다.

  일반적인 Serverless 함수가 AWS 리전 등 중앙에서 실행되는 반면, Edge Function은 전 세계에 분포된 Vercel 엣지 네트워크 상에서 배포할 수 있어 지연 시간을 줄이고 성능을 향상 시킬 수 있습니다.

• 로그인 토큰 검증, 국가/지역별 페이지 분기, 간단한 API응답 같은 작업에 사용한다.

Serverless?

개발자 또는 운영자가 직접 서버를 관리하지 않아도 되는 경우를 의미한다.

2-4. 이미지 최적화(Image Optimization)​

• Vercel은 이미지 최적화 기능을 플랫폼에 내장하여 제공하고 있습니다.

  <img> 태그 대신 <Image> 컴포넌트를 사용하면 별도의 설정 없이 자동으로 이미지 최적화 할 수 있습니다. 이미지는 요청에 맞게 리사이징/압축되며, CDN 엣지에 캐시되어 이후 요청 시 빠르게 제공됩니다.

2-5. 프리뷰 배포(Preview Deployments)​

• Git 브랜치나 Pull request에 대해서 자동으로 프리뷰용 배포 URL이 생성되며 반영된 웹사이트를 누구나 접속할 수 있습니다. 해당 기능은 프로덕션 환경과 동일한 조건에서 테스트를 진행할 수 있어 로컬에서 작업시 발생하는 문제를 조기에 발견할 수 있습니다.
• Vercel은 로컬, 프리뷰, 프로덕션 세 가지 환경을 지원합니다.
  이를 통해 개발 단계에서 사용하던 백엔드 API 엔드포인트와 프로덕션에서 엔드포인트를 분리할 수 있습니다.
• 디자이너, 기획자, QA 담당자에게 URL만 전달하면 즉시 결과물을 확인시킬 수 있어 협업 효율이 크게 향상됩니다.

3. 웹 호스팅/배포 유사 서비스

3-1. Netlify​

Vercel과 많은 공통점을 가진 플랫폼으로 Git 연동 자동 배포, Serverless Function, Edge Function, 브랜치별 프리뷰 배포 기능을 가지고 있습니다. 기본적으로 Jamstack 기능을 제공하며, 프론트엔드 개발자에게 초점을 맞추고 있습니다.

Jamstack 이란?
JavaScript, API, Markup 의 약자로 빠르고 안전하며 확장 가능한 웹사이트 구축을 위한 아키텍처 패턴입니다.

• Vercel은 React/Next.js 애플리케이션에 최적화되어 있어, 빌드 시 성능 최적화를 자동으로 적용하여 글로벌 Edge 네트워크로 배포 가능합니다.
• Netlify는 Jamstack 올인원 플랫폼으로 정적 사이트 배포, 사용자 인증, 서버리스 함수, 플러그인 생태계 등 폭넓은 부가 기능을 제공합니다.
• Netify는 광범위한 무료 플랜을 제공하는 반면 Vercel은 한 계정당 200개 프로젝트, 팀멤버 1인 제한이 있습니다.(Netlify 500개 사이트 호스팅 가능, 무제한 팀멤버)

3-2. AWS Amplify​

아마존 웹 서비스가 2018년에 출시한 풀스택 프론트엔드 플랫폼으로, AWS의 인프라와 서비스를 프론트엔드 개발자가 쉽게 활용할 수 있습니다.

AWS에서 개발한 플랫폼인 만큼, AWS의 다른 서비스들과 쉽게 연동할 수 있어 Database, Cognito 인증, S3 스토리지, AL/ML서비스까지 앱에 연동할 수 있습니다. 하지만, Amplify는 복잡한 설정과 AWS 지식을 요구하기 때문에 AWS를 잘 모르는 개발자에게는 부담이 될 수 있습니다.

3-3. cloudflare page​

CloudFlare에서 2020년에 출시한 정적 사이트 호스팅 및 Functions 서비스입니다.

CloudFlare는 세계 최대 CDN 네트워크 중 하나로, Cloudflare page는 압도적인 글로벌 분산 인프라와 비용 효율성을 제공합니다. Cloudflare page는 프리요금제에도 무제한 대역폭을 제공하고 있어, 웹 트래픽이 급증하더라고 추가 비용 없이 서비스를 지속할 수 있습니다.

3-4. Vercel / Netlify / Amplify / Cloudflare page 특징 및 비교​

• Vercel: Next.js에 최적화된 프론트엔드 배포 플랫폼
• Netlify: 다양한 부가기능을 제공하는 Jamstack 올인원 플랫폼
• Cloudflare Pages: 대역폭 무제한 CDN 기반 정적 호스팅

4. Vercel을 활용한 웹페이지 배포하기

4-1. Vercel Platform을 활용한 Domain 생성 및 배포​

1. Vercel 접속 및 Log In

   

2. 프로젝트 생성

   

   1. GitHub 계정 선택

   2. 배포할 Repository 선택

      배포할 repository가 없는 경우, Permission 변경

   3. 원하는 repository Import

3. 배포

   
   • 도메인 생성: https://react-dashboard-z2dj.vercel.app

4. 접속

   

4-2. CLI를 활용한 Domain 생성 및 배포​

1. Installing Vercel CLI

   # pnpm 설치
   npm install -g pnpm 
   
   # pnpm 환경변수 설정
   pnpm setup
   
   # vercel 설치 
   pnpm i -g vercel
   
   

2. Update Vercel CLI

   # update vercel CLI
   pnpm i -g vercel@latest
   
   # 버전 확인
   vercel --version
   

3. Deploying from source

   # Deploys the current Vercel project, when run from the Vercel Project root.
   
   vercel
   
   
   

4. 접속

   생성된 도메인 주소: https://argon-dashboard-react-omega.vercel.app/

   

React 프로젝트를 시작하기 위해서 반드시 Node.js가 필요합니다.

왜냐하면, Node.js 위에서 모든 빌드 도구와 패키지 관리가 동작하기 때문입니다.

본 글에서는 Ubuntu 환경에서 Node.js 설치 -> React 프로젝트 생성 -> 무료 대시보드 템플릿 실행까지 내용을 정리합니다.

0. JavaScript, Node.js, React의 관계​

글을 시작하기 전 JavaScript와 Node.js, React 관계에 대해 간단하게 소개합니다. React는 브라우저에서 실행되지만, 개발 과정에서 사용하는 빌드, 패키지 설치, 서버 실행은 모두 Node.js가 담당하고 있습니다.
따라서, React 개발을 위해서는 Node.js 설치가 필요합니다.

1. Node.js 설치​

Node.js의 필요성에 대해 알아보았으니 설치를 진행해보겠습니다.
저는 Linux에서 24.13.0 버전을 설치하였습니다.

1) nvm 다운로드 및 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

2) nvm 적용
source ~/.bashrc

3) nvm 설치 확인
nvm -v

4) Node.js 다운로드 및 설치
nvm install 24

5) 설치 Node.js 버전 확인 및 npm 버전 확인
node -v
npm -v

KADaP Cloud 사용시, ssh를 통해 VM 접속 후 동일한 방법으로 설치하시면 됩니다.

2. React 프로젝트 생성​

1 or 2 둘 중 하나 선택

1) npm create-react-app my-react-app
2) npm create vite@latest my-react-app

npm start
http://localhost:3000 접속 (KADaP Cloud 사용자: http://<vm ip>:3000)

3. 무료 React Dashboard Templete 실행하기​

오픈된 무료 Dashboard 템플릿을 통해 빠르게 개발 및 배포 할 수 있습니다.

아래는 대표적인 무료 React dashboard templete 입니다.

• Argon Dashboard React

  

• Material Dashboard React

  

• CoreUI React

  

• AdminLTE Reac

  

본 글에서는 Argon Dashboard로 시작해보겠습니다.

3.1 템플릿 가져오기(Git clone)​

git clone https://github.com/creativetimofficial/argon-dashboard-react.git

3.2 폴더 이동​

cd argon-dashboard-react

3.3 패키지 설치​

npm install

3.4 실행​

npm start (또는) npm run dev

연결 성공!

Antigravity는 MS VSCode를 기반으로 개발 되었습니다. 기본 개발 및 IDE관련 기능은 VSCode를 활용한 AI 코딩 부분은 우측 확장 기능(??)형식으로 제공하고 있습니다. 따라서 본 장에서는 VSCode에 대한 기본 내용을 포함 하고 있습니다.

Microsoft에서 2015년에 제작하여 무료로 배포 하고 있는 IDE 툴입니다. Windows, macOS, Linux 를 지웒고 있으면 홈페이지에서 무료로 다운 받을수 있습니다.

Antigravity를 설치하면 VSCode도 포함되므로 별도로 설치할 필요는 없습니다.

1. Tile & Menu Bar​

화면 상단에는 **Title Bar(타이틀 바)**와 **Menu Bar(메뉴 바)**가 있습니다.

• Title Bar는 현재 열려 있는 폴더나 파일의 이름을 표시하며, 작업 중인 프로젝트의 상태를 한눈에 파악할 수 있습니다.
• Menu Bar에서는 File, Edit, View, Run 등 주요 메뉴를 통해 VS Code의 거의 모든 기능에 접근할 수 있습니다.

2. Activitiry Bar (작업 막대)​

화면의 왼쪽 세로 영역에 있는 막대로, 프로젝트 탐색이나 소스 제어, 디버깅 같은 주요 활동을 전환하는 역할을 합니다.

대표적인 아이콘은 다음과 같습니다:

• Explorer (탐색기): 파일과 폴더 구조를 확인
• Search (검색): 프로젝트 전체 검색
• Source Control (소스 제어): Git 등 버전 관리
• Run & Debug (디버그): 코드 실행 및 디버깅 제어
• Remote Explorer: 원격 서버나 컨테이너 연결 관리
• Extensions (확장): 기능 확장 및 플러그인 설치

3. Status Bar​

화면 맨 아래에 위치하며, 현재 편집 중인 파일의 언어, 줄 번호, Git 브랜치, 오류 상태 등을 실시간으로 보여줍니다. 작업 환경의 상태를 빠르게 확인할 수 있어, 특히 협업이나 디버깅 시 매우 유용합니다.

4. Side Bar​

Activity Bar에서 선택한 기능에 따라 내용이 바뀌며, 다양한 작업 창을 제공합니다.

5. Editor​

VS Code의 중심 부분으로, 실제 코드를 작성하고 편집하는 공간입니다. 여러 파일을 동시에 열 수 있으며, 탭 형태로 관리됩니다. 문법 강조, 자동완성, 코드 포맷팅 등 다양한 기능이 제공되어 생산성을 높여줍니다.

6. Panel​

화면 하단에 위치하며, 출력(Output), 터미널(Terminal), 디버그 콘솔, 문제(Problems) 등의 정보를 확인할 수 있습니다. 예를 들어 빌드 에러 로그를 보거나, 명령어를 실행하는 터미널로 활용할 수 있습니다.

7. Agent (Antigravity)​

AI 코딩 관련 확장 기능, 기본 VSCode에는 이 영역이 없습니다.

VScode의 Agent (우측 영역)

1. 상단 메뉴​

다음 기능들을 수행 할 수 있습니다.

• 새 대화
• 대화 히스토리 보기
• 옵션 설정

1.1 옵션 설정 - Customization​

A. Rule​

지켜야 하는 원칙을 지정 할수 있습니다.

Global Rules와 Workspace Rule을 나누어서 지정 할수 있습니다.

• Global Rules : 모든 개발 과정에서 지켜야 하는 규칙을 지정 합니다. ~/.gemini/ antigravity/GEMINI.md에 저장 됩니다.

1. 모든 대답은 '한국어'로 해주세요. 
2. 코드를 수정할 때는 기존 스타일(Prettier 설정)을 반드시 따르세요. 
3. 모든 함수에 한글 주석 작성 필수 
4. 주석은 한글로 친절하고 구체적으로 달아주세요.

OR 

1.  **Language**: Always respond in **Korean (한국어)**.
2.  **Code Comments**: 주석도 반드시 **한국어**로 작성할 것.
3.  **Explanation**: 기술적인 용어는 영어를 병기하되(ex: 변수(Variable)), 설명은 쉽게 한국어로 풀어서 할 것.

• Workspace Rule : 해당 워크스페이스에 적용될 규칙을 지정 합니다.  ~/.agent/rules/{이름}.md에 저장 됩니다.

1. 당신은 고급 데이터 분석가 입니다.
2. python 언어를 주로 사용합니다. 
3. 모든 코드는 PEP 8 스타일 가이드 준수
4. main.py는 진입점만, 기능은 별도 파일로 분리

B. Workflow​

반복적으로 사용되는 절차를 저장 하여 호출 하여 사용할수 있습니다.

Global Workflow 와 Workspace Workflow 을 나누어서 지정 할수 있습니다.

• Global Workflow : ~/.gemini/antigravity/global_workflows에 저장 됩니다.
• Workspace Workflow :  .agent/workflows에 저장 됩니다.

저장된 이후 /로 호출 하여 사용 가능합니다.

1.2 옵션 설정 - MCP Server​

antigravity에서 제공하는 MCP들을 검색 하여 활용 할수 있습니다.

직접 코드를 입력하여 MCP 서버를 추가 할 수도 있습니다.

2. 채팅 창​

2.1 채팅 창 - '+'​

참고할 이밎, 코드, 파일 등을 지정 할때 사용합니다.

2.2 채팅 창 - Planinng / Fast​

• Planning : 실행 전에 체계적인 계획 수립 및 작업을 세분화 후작업 진행
• Fast : 계획 단계 생략 합니다. 단순 작업 및 명령어 실행

2.3 채팅 창 - AI 모델 선택​

3. 설정 창​

3.1 설정창 - Auto Execution​

터미널 명령어나 코드 실행 부분을 사용자 허가 후 실행(Always Review)할지, 자동 실행(Always procced)하지 설정 합니다.

3.2 설정창 - Review Policy​

계획된 작업을 사용자 허가 후 실행(Always Review)할지, 자동 실행(Always procced)하지 설정 합니다.

3.4 설정창 - Customization​

Global Rule을 수정 할수 있습니다.

전체 문서의 구성은 3단계로 되어 있습니다.

1. (개요) 바이브 코딩 용어, 바이브코딩을 위한 툴, 접속 환경 설정
2. (설정) 바이브 코딩을 위한 툴 설정 및 기능 설명
3. (분석) 바이브 코딩으로 타이타닉 데이터 분석 및 보고서 작성하기

1. 개요​

1.1 바이브 코딩​

바이브Vibe 코딩의 바이브는 느낌 란 의미로 코딩 하고자 하는 것을 문장으로 느낌을 전달 하면 코드는 생성형 AI가 생성한다는 의미 입니다.

2023년 OpenAI 창립자인 Andrej Karpathy 처음 개념을 언급한 이후, 2025년 2월 용어 사전 등재되고, 이후 2025년 중반 Copilot 데모로 상업적 가능성을 보였습니다.

1.2 생성형 AI​

바이브 코딩의 기술을 설명할때 등장하는 단어 중 하나는 생성형AI입니다. 생성형 AI는 기존 데이터를 학습하여 텍스트, 이미지, 오디오, 비디오 등 새로운 콘텐츠를 스스로 만들어내는 인공지능 기술 중의 하나 입니다. 우리가 익히 알고 있는 ChatGPT는 텍스트를 학습하여 답변을 하는 생성형AI 기술을 활용하는 대표적인 예 입니다. 그외 다양한 분야의 서비스 및 AI 모델명은 다음과 같습니다.

• 텍스트 : ChatGPT, Gemini, Llama 3
• 이미지 : Nano Banana, DALL-E 3, Midjourney
• 오디오 : Bark, ElevenLabs, MusicGen
• 비디오 : Sora, Google's Veo, Runway ML
• 코딩 : Copilot , Cursor, Tabnine

생성형 AI 중 텍스트(언어)를 기반으로 하는 LLM(Large Language Model)은 확률을 기반으로 한 끝말잇기와 비슷한 원리로 이해 하면 됩니다. 정보는 사전 학습한 지식이나 외부 검색(RAG)을 참고 하여 자연스런 문장을 생성 하는데 초점을 두고 있습니다.

잘된 끝말잇기로 문장 생성 예	잘못된 끝말잇기로 문장 생성 예

AI 입장에서는 사람의 언어(한글, 영어)와 컴퓨터 언어(C, Python)은 유사 하기 때문에 바이브 코딩도 가능한것입니다.

• 동해물과 백두산이 …..
• Print (hello….

2. 바이브 코딩 툴​

2.1 비교 분석​

다음은 2026년 1월 현재 많이 알려진 바이브 코딩을 위한 AI 코딩 도구 목록입니다.

가장 많은 사용자를 보유 하고 있는것은 MS가 인수한 Github의 Copilot입니다. 소스코드 저장소인 github의 공개된 방대한 데이터에도 접속할 수 있으니 좋은 성능을 보이지 않을까 합니다(개인의견).

본 타이타닉 생존율 분석 바이브 코딩하기에서는 구글의 Antigravity를 사용합니다. 후발 주자이기는 하지만 여러 AI 모델을 무료로 제공하고(현재까지는), 개발 툴로 익숙한 VS Code를 기반으로 하고 있어 선택 하였습니다.

2.2 Google Antigravity 설치 하기​

A. 윈도우 OS​

Google Antigravity의 공식 홈페이지 에 접속하여 다운로드 받을 수 있습니다. [다운로드 링크]

B. 리눅스 OS(ubuntu 22.04)​

리눅스 deb 기반 설치는 아래 명령어를 터미널에서 입력 하시면 됩니다.

$ sudo mkdir -p /etc/apt/keyrings
$ curl -fsSL https://us-central1-apt.pkg.dev/doc/repo-signing-key.gpg | \ sudo gpg --dearmor --yes -o /etc/apt/keyrings/antigravity-repo-key.gpg
$ echo "deb [signed-by=/etc/apt/keyrings/antigravity-repo-key.gpg] https://us-central1-apt.pkg.dev/projects/antigravity-auto-updater-dev/ antigravity-debian main" | \  sudo tee /etc/apt/sources.list.d/antigravity.list > /dev/null
$ sudo apt update && sudo apt install antigravity

[자동차 산업 클라우드 사용자]​

KADaP 사용자는 클라우드내 OS선택 메뉴에서 DevTools > Antigravity를 선택 하면 설치 없이 활용 가능 합니다.

3.4 원격 개발 서버 연결하기​

개발환경은 윈도우 보다 리눅스가 자유도 및 지원하는 패키지가 많아 본 문서에서는 리눅스 서버에서 개발을 진행 합니다.

Window 운영체제에서 리눅스 기반 개발 환경 구축 방법은 3가지가 있습니다.

• 방안 1 : 윈도우 OS 에 개발 라이브러리, 모듈을 설치 하여 활용 : 비추천, 지원SW 및 문제 해결 정보 적음
• 방안 2 : 윈도우 OS에 리눅스 OS를 설치(WSL) 하여 개발 라이브러리, 모듈을 설치 하여 활용 : 추천, 잠재적 위험 존재
• 방안 3 : 윈도우 OS에서 리눅스 OS로 접속(SSH) 하여 개발 라이브러리, 모듈을 설치 하여 활용 : 추천

방안 3 : 윈도우 OS에서 리눅스 OS로 접속(SSH) 하여 개발 라이브러리, 모듈을 설치 하여 활용을 위한 별도의 리눅스 서버구축은 다루지 않습니다.

A. Antigravity SSH 접속 설정 하기​

사전 준비 작업

1. 접속할 리눅스 서버의 ssh 서비스 설치 및 실행
2. 접속할 리눅스 서버의 키파일(*.pem)다운로드
3. 다운로드 한 키파일의 권한 변경 (윈도우 OS 사용자만) [참고]

# Powershell 관리자 권한 열기 
# PEM 파일 경로로 이동
cd C:\Users\사용자명\.ssh

# 현재 사용자만 Full Control 권한 설정
icacls server_key.pem /inheritance:r
icacls server_key.pem /grant:r "$env:USERNAME`:F"

# 권한 확인 (현재 사용자만 나와야 함)
icacls C:\Users\사용자명\.ssh\server_key.pem

1. Antigravity를 실행 합니다.
2. 좌측 메뉴 중 Remote Explorer를 선택 후 Add New(+) 아이콘을 클릭 합니다.
3. 새 창이 열린 후 아래 내용을 맞게 입력 합니다.

  Host 10.10.17.63  #표기될 이름
    HostName 10.10.17.63  #접속 할 서버 IP 
    User kadap  #서버 로그인 ID 
    IdentityFile "C:\Users\admin\Downloads\2-82_default.pem"  #로그인시 사용할 키 파일 위치 (중요)
    Port 22  # 서버 접속 Port 
    StrictHostKeyChecking accept-new # 신규 접속시 호스트의 키를 자동으로 추가하고 연결 허용

[자동차 산업 클라우드 사용자]​

자동차 산업 클라우드에서는 VM > 접속 정보 > 접속 인증 키(Key) : default 를 클릭하여 다운로드 받을수 있습니다.

키파일 다운로드	접속 설정파일

클라우드 서비스의 경우 가상머신의 생성시 동일한 IP주소를 할당 받을수도 있습니다. 아래 옵션을 추가 하면 쉽게 접속이 가능합니다.

    StrictHostKeyChecking no  #호스트 키 확인 완전 비활성화 (새/변경 모두 자동 통과)
    UpdateHostKeys yes  #키 변경 시 known_hosts 자동 업데이트

연결을 위해서는 좌측 메뉴 중 Remote Explorer를 선택 후 접속 할 서버의 두개의 아이콘 중 원하는 방식을 선택 하면 됩니다.

접속 완료후에는 하단의 SSH: {서버IP}가 활성화 됩니다.

여기까지 확인 되면 사용할 준비가 끝난것입니다.

다음시간에는 바이브 코딩을 위한 Antigravity에 대하여 툴 설정 및 기능에 대하여 설명 드리겠습니다.