DeepSeek-V4가 이미지를 읽지 못한다고요? 제가 읽게 만들었습니다

멀티모달 (Multimodal) 모델을 기다리지 마세요, 지금 바로 사용할 수 있습니다.

서론

이런 답답한 순간을 경험해 보신 적이 있나요? OpenCode에서 deepseek-v4로 코딩을 하고 있는데, 코드에서 에러가 발생했습니다. 에러 화면을 스크린샷으로 찍어 DeepSeek에 보내고 싶은데, 문득 DeepSeek가 이미지를 읽지 못한다는 사실이 떠오르는 순간 말이죠.

솔직히 말해서 deepseek-v4는 저렴하고, 사용하기 쉬우며, 컨텍스트 창 (Context window)이 깁니다. 이미 저의 주력 코딩 모델이 되었습니다. 하지만 6월 중순 기준으로 DeepSeek는 아직 멀티모달 (Multimodal) 버전을 출시하지 않았습니다. 이는 에러 스크린샷 읽기, 차트 해석, 또는 시각적 디자인으로부터 페이지 재현하기와 같이 이미지가 포함된 그 어떤 작업도 수행할 수 없음을 의미합니다.

저만 답답한 것이 아닙니다. 제 친구들도 모두 간절히 기다리고 있습니다.

하지만 저는 방법을 찾아냈습니다. OpenCode에서 deepseek-v4가 멀티모달 에이전트 (Multimodal agent)를 호출하여 간접적으로 이미지를 읽을 수 있는 능력을 갖추게 해주는 observer라는 작은 플러그인을 개발했습니다.

한 달 넘게 다듬은 끝에, 이 플러그인은 이제 제 일상 업무에서 발생하는 모든 이미지 관련 코딩 작업을 처리하고 있습니다. 오늘 저는 이 플러그인을 어떻게 만들었는지 공유하고자 하며, 이것이 여러분에게도 도움이 되기를 바랍니다.

이 글에서 언급된 플러그인 코드와 에이전트 정의는 글 마지막에 있습니다. 자유롭게 가져가서 사용하세요.

실제 결과 데모

긴 튜토리얼로 들어가기 전에, 여러분은 아마 이 플러그인이 얼마나 잘 작동하는지, 그리고 시도해 볼 만한 가치가 있는지를 가장 궁금해하실 것입니다. 그래서 플러그인이 작동하는 몇 가지 스크린샷을 보여드리겠습니다.

1. 에러 스택 트레이스 (Error stack traces) 해석

가장 간단한 작업부터 시작해 보겠습니다. deepseek-v4가 에러 스택 트레이스의 스크린샷을 해석하고 핵심 정보를 찾아내도록 하는 것입니다. 저는 업무 중에 마주쳤던 에러 스크린샷을 무작위로 하나 골랐습니다:

그런 다음 OpenCode Desktop에서 deepseek-v4-pro를 사용하여 이 이미지를 plan 에이전트에 보내고 해결책을 제시해 달라고 요청했습니다:

보시다시피, plan 에이전트(agent)는 스크린샷 정보를 바탕으로 답변을 제공했습니다.

2. 차트 해석하기

또 다른 멀티모달 (multimodal) 활용 사례는 문서의 차트를 해석하는 것입니다. 이 예시를 위해 저는 한 기업의 연간 매출 차트를 스크린샷으로 찍어 테스트했습니다. 여기서도 deepseek-v4-pro와 함께 plan 에이전트를 사용했습니다. 추가적인 도전을 위해, 에이전트에게 차트의 수치들에 대한 몇 가지 핵심 통찰(insights)을 제공해 달라고 요청했습니다:

에이전트는 차트에서 수치를 읽어내고 몇 가지 핵심 통찰을 제공했습니다:

3. 디자인으로부터 HTML 페이지 개발하기

프론트엔드 (frontend) 개발에서 멀티모달 능력에 대한 가장 큰 수요는 시각적 디자인을 재현하는 것입니다. 여기서는 deepseek-v4-flash를 사용하는 build 에이전트가 페이지를 재현할 수 있는지 확인하기 위해 복잡한 페이지 요소가 포함된 디자인을 찾아보았습니다:

재현된 페이지는 다음과 같습니다:

한 가지 확실한 것은, deepseek-v4-flash 모델이 프론트엔드 코드를 생성했으며, 단 한 번의 프롬프트(prompt)만으로 이 결과를 얻었다는 점입니다. 100% 일치하지는 않았지만, 몇 번의 대화를 더 거치면 완벽해질 때까지 미세 조정(tweak)할 수 있습니다. deepseek-v4-flash는 매우 저렴하다는 점을 명심하세요.

이 모델은 kimi k2.6 또는 qwen3.7 plus와 같은 멀티모달 (multimodal) 모델보다 몇 배, 심지어 10배 더 저렴합니다. 이들은 체급 자체가 다릅니다.

물론, 페이지의 특정 섹션을 자르고 주의가 필요한 영역을 표시한 뒤, DeepSeek에게 다음과 같이 수정하도록 요청할 수도 있습니다:

에이전트(agent)는 표시된 영역을 인식하고, 귀하의 요청에 따라 기본 에이전트(primary agent)에게 수정 계획을 전달합니다.

4. 손으로 그린 스케치로부터 HTML 페이지 생성하기

어쩌면 당신도 저처럼 디자인 기술이 전혀 없을지도 모릅니다. 문제없습니다. 우리는 거친 스케치를 손으로 그릴 수 있고, 에이전트는 이를 이해할 수 있습니다. 예를 들어, 최근 프로젝트에서 저는 몇 가지 웹 페이지 디자인 스케치를 손으로 그렸습니다:

그 후 deepseek-v4-flash가 페이지를 재현하는 것을 도와주었습니다:

인상적이지 않나요?

상세 구현 과정 안내

다음으로, 여러분은 다음 내용을 알게 될 것입니다:

1. 제가 이 플러그인(plugin)과 에이전트(agent)를 어떻게 설계했는지.
2. 왜 그런 방식으로 설계했는지.

계속 읽으려면 제 전체 기사를 클릭하세요.