🔎 #106. ChatGPT로 러프한 손그림으로부터 코드 생성하기

구독자님, 안녕하세요?
매일 1개의 프롬프트를 배달해드리는 Daily Prompt입니다.

오늘은 이미지를 읽는 ChatGPT의 멀티모달 기능(GPT-4V(Vision))*을 활용해 러프한 웹페이지 드로잉에서 코딩을 생성하는 법을 다룹니다.
* ChatGPT 유료 구독자 대상으로 기능이 순차적으로 오픈되고 있습니다.

GPT-4에서 이미지를 업로드하여 코드 생성하기

채팅창 옆 사진첩 아이콘을 클릭하여 이미지를 업로드할 수 있습니다.

아래와 같이 제가 손으로 그린 웹페이지 이미지를 업로드하였습니다.

프롬프트:

recreate this website in HTML

프롬프트 입력결과:

ChatGPT가 준 HTML 코드를 실행해본 결과:

파란펜으로 그렸더니 코드에도 파란색을 적용시켰습니다.

이번에는 CSS 코드로 변환해달라고 요청해보았습니다:

ChatGPT가 준 CSS 코드를 실행해본 결과:

결론적으로, 제가 업로드한 이미지에 충실하게 코드를 짜주었습니다. 조금 더 복잡한 웹페이지 이미지도 코드를 생성해줄지는 좀 더 테스트해봐야겠지만, 이미지에서 코딩까지 가능하다는 점을 발견한 것만으로도 의미있었습니다.

새삼 우리가 가진 오감 중 시각이 차지하는 비율이 높다는 걸 깨닫습니다. ChatGPT가 볼 수 있으니(?) 더 쉽게 더 많은 대화를 진행할 수 있게 되었습니다. 업데이트 전에는 이미지에 대한 설명을 인간이 직접 프롬프트에 입력해야 했었는데, 이제는 이미지 업로드 하나로 해결이 됩니다.

챗GPT가 보고, 듣고, 말하는 것이 가능해지면서 거의 대부분의 업무를 보조할 수 있게 되었다는 생각이 듭니다. OpenAI의 AGI(Artificial general intelligence, 범용 인공지능)는 이미 개발이 완료되었고 내년에 런칭할 것이라는 루머도 존재하는데, 이번 업데이트를 경험하면서 AGI의 런칭이 정말 머지않았다는 느낌마저 들었습니다.

오늘의 Midjourney 프롬프트

프롬프트 제공: @jae_hong__an

프롬프트: High-fashion cosmetics floating in a "green sea" of bokeh background. Use Canon EOS-1D X Mark III, isolate the product in sharp focus against a dreamlike, pastel-toned background --ar 16:9 --c 5 --style raw

프롬프트 입력 결과: