> ## Content Index
> Fetch the complete content index at: https://blog.secondbrush.co.kr/llms.txt
> Use this file to discover other available public pages before exploring further.

# 🔎 #106. ChatGPT로 러프한 손그림으로부터 코드 생성하기
- URL: https://blog.secondbrush.co.kr/dailyprompt-106/
- Published: 2023-10-05T00:00:00.000Z
- Updated: 2026-02-20T07:15:02.000Z
- Description: 눈이 달린 ChatGPT, 이미지를 보고 코딩을 합니다
- Author: Soyeong Choi
- Tags: Daily Prompt, ChatGPT, Automation, Design, #maily:import

![첨부 이미지](https://cdn.maily.so/202308/dailyprompt/1692556638460177.png)

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

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

---

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

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

![첨부 이미지](https://cdn.maily.so/pu7nzk3nosa9ho6vatyt2lf1k7eq)

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

![첨부 이미지](https://cdn.maily.so/dyq4vixqjqwm5z00951s2rpfhj57)

**프롬프트:**

recreate this website in HTML

**프롬프트 입력결과:**

![첨부 이미지](https://cdn.maily.so/7v8izg7ygufnlawztcfo6mziur3m)

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

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

![첨부 이미지](https://cdn.maily.so/21wi0yby3sde2r0n19a3atffmt4i)

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

![첨부 이미지](https://cdn.maily.so/1sxxcw05ct3v10c3la160d8m2dnt)

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

![첨부 이미지](https://cdn.maily.so/wwergwn3t5p7nji5in2g4boq50h0)

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

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

챗GPT가 [보고, 듣고, 말하는 것이 가능](https://openai.com/blog/chatgpt-can-now-see-hear-and-speak?ref=blog.secondbrush.co.kr)해지면서 거의 대부분의 업무를 보조할 수 있게 되었다는 생각이 듭니다. OpenAI의 AGI(Artificial general intelligence, 범용 인공지능)는 이미 개발이 완료되었고 내년에 런칭할 것이라는 [루머](https://twitter.com/Yampeleg/status/1706107474825146696?ref=blog.secondbrush.co.kr)도 존재하는데, 이번 업데이트를 경험하면서 AGI의 런칭이 정말 머지않았다는 느낌마저 들었습니다.

---

## 오늘의 Midjourney 프롬프트

**프롬프트 제공:** [@jae\_hong\_\_an](https://www.instagram.com/jae%5Fhong%5F%5Fan/?ref=blog.secondbrush.co.kr)

**프롬프트:** 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

[![첨부 이미지](https://cdn.maily.so/2ugm2liy4xssu806wjdbz3fy1kxm)](https://www.secondbrush.co.kr/class/03?ref=blog.secondbrush.co.kr)

**프롬프트 입력 결과:**

![첨부 이미지](https://cdn.maily.so/wkyey89yiasj1zv94yd4pznwu5ly)

---