Multi Modal Awesome

 Chat GPT를 이용하면서 최근에 가장 좋은 점은 4o 부터 본격적으로 지원되고 있는 Multi modal 이다. 오늘 업무 문서를 작성하며 그 편리함을 체험한 경험을 공유하고자 한다. 

 

 이에 앞서서 먼저 Multi modal이 무엇인지 간략하게 설명하자면, 여러가지 유형의 데이터들을 이용하여 인공지능을 학습 시킴으로 다양한 유형의 데이터에 대하여 유의미한 해석을 하고 그것을 바탕으로 추론하여 결과를 도출하는 기술이다. 모달(Modalites)은 양식이라는 의미로 예를 들어 사과는 시각적으로 붉은색 또는 푸른 색이고 시각적으로는 우리가 인지하는 동그란 모양, 맛 또는 향으로는 약간 새콤하고 많이 달콤함 등 다양한 양식의 정보를 가지고 있다. 이러한 각각의 형태의 입력을 통하여 사과를 학습시킴으로 해당형태의 요청에 대하여서도 사과라는 개념을 추론하여 관련 결과를 생성해 낼 수 있는 기술이다. 

 

he various modalities associated with the concept of “apple”. Image credit: Intel Labs © 2022 Intel Corporation.

 

 다시 오늘의 경험으로 돌아오면, 업무를 위하여 VueJS 프로그램을 작성하였고 그것에 대한 메뉴얼 및 사용법에 대하여 문서를 작성하고 있었다. 그중에 프로젝트 구조에 대하여 설명하는 내용을 작성해야 하고 보통은 command에서 tree를 이용하여 폴더 구조를 덤프하고 그것을 옮겨 적으면서 정리를 하였는데 오늘은 왠지 GPT님께 작성을 요청하고 싶어 졌다 그래서 바로 VS Code 상의 폴더 구조를 캡처 도구 로 캡처하고 이미지를 복사해서 넣은 다음, 다음과 같은 promt 를 통하여 작업을 요청했다. 

 

 "이미지는 VueJS 프로젝트 구조인데 표를 통하여 폴더 이름과 설명으로 정리 해줘"

 

업로드한 이미지는 일반적인 VueJS 프로젝트의 폴더 구조였다. 그래도 몇가지 폴더는 새로 생성하였다. 

요청한 폴더 구조 이미지

 

결과는 짜짠~!

"

여기 이미지에 있는 Vue.js 프로젝트 폴더 구조를 표로 정리해 드리겠습니다:

폴더/파일 이름	설명
.vscode	프로젝트에 대한 VS Code 설정 파일을 저장하는 폴더
dist	프로젝트 빌드 후 생성된 배포 파일들이 저장되는 폴더
node_modules	프로젝트의 모든 종속성 패키지들이 설치되는 폴더
public	정적 파일을 보관하는 폴더. index.html 파일 등과 같이 직접 제공되는 파일들이 위치
src	애플리케이션의 소스 코드가 위치하는 주요 폴더
└─ assets	이미지, 스타일 파일 등 정적 자원을 저장하는 폴더
└─ components	Vue 컴포넌트들을 보관하는 폴더
└─ components/dialog	다이얼로그 관련 컴포넌트를 보관하는 폴더
└─ components/form	폼 관련 컴포넌트를 보관하는 폴더
└─ components/layout	레이아웃 관련 컴포넌트를 보관하는 폴더
└─ components/pagination	페이지네이션 관련 컴포넌트를 보관하는 폴더
└─ components/table	테이블 관련 컴포넌트를 보관하는 폴더
└─ composables	Vue 3 Composition API와 관련된 기능들을 보관하는 폴더
└─ modules	기능 모듈들을 보관하는 폴더
└─ modules/axios	Axios와 관련된 설정 및 헬퍼 함수들을 보관하는 폴더
└─ modules/directives	커스텀 디렉티브 관련 코드를 보관하는 폴더
└─ modules/utils	유틸리티 함수들을 보관하는 폴더
└─ router	Vue Router 설정 및 라우트 파일들이 위치하는 폴더
└─ stores	상태 관리를 위한 파일들이 위치하는 폴더 (ex. Vuex 또는 Pinia 상태 관리)
└─ views	각 페이지(뷰) 컴포넌트들이 위치하는 폴더
App.vue	애플리케이션의 최상위 Vue 컴포넌트
main.js	애플리케이션 진입 파일로 Vue 인스턴스를 생성하는 파일
.env.development	개발 환경에 대한 환경 변수 파일
.env.local	로컬 환경에 대한 환경 변수 파일
.env.localhost	로컬호스트에 대한 환경 변수 파일
.gitignore	Git에서 무시할 파일 및 폴더 목록
.prettierrc	코드 포맷팅 설정 파일 (Prettier 설정)
index.html	애플리케이션의 메인 HTML 파일
jsconfig.json	JavaScript 프로젝트 설정 파일
package-lock.json	정확한 의존성 버전을 보장하는 파일
package.json	프로젝트 메타데이터와 의존성을 정의하는 파일
README.md	프로젝트에 대한 설명과 사용법 등을 작성하는 파일
vite.config.js	Vite 빌드 도구의 설정 파일

이 구조는 Vue 3와 Vite 기반 프로젝트의 표준적인 폴더 구조를 잘 보여주고 있습니다.

"

 

이렇게 깔끔하게 설명한 표를 생성해주었다.

 

 내가 깊은 인상을 받은 것은 깔끔한 OCR의 부분과 설명에 대하여 거의 완벽하게 추론 해서 설명한 부분이다. 별다르게 설명하지 않아도 학습되어 있는 데이터를 기반으로 vuejs라는 힌트만으로 맘에 쏙드는 설명을 생성해 주었다. 

  

 계속해서 더 좋은 기능들이 추가되겠지만 멀티모달은 업무에 유용한 기능이다. 텍스트로 주저리 주저리 설명하지 않아도 캡처를 통하여 필요한 데이터를 입력하고 프롬프트로 그에 필요한 요청만 전달 하면 유용한 결과를 생성해 주기 때문에 프롬프트에 Context 데이터를 장황하게 넣는 수고와 그것을 정리하는 수고를 덜 수 있어서 매우 유용하다. 

 

 Chat GPT를 사용한다면 다양한 형태의 데이터를 입력하여 요청해 보는 것을 추천 한다.