CH 24 · 브루탈리즘 개인 사이트: 하나의 프롬프트로 HTML 생성

전체 글자 수약 970자소요 시간약 20분선행 학습CH 03, CH 04난이도따라 하기 가능

본 장의 목표

이 장에서는 HTML, CSS, JavaScript 작성법을 가르치지 않습니다 — 그것은 dsh가 대신 작성해 줍니다. 여러분이 해야 할 일은 단 하나, "내가 원하는 것"을 명확히 밝히는 것입니다. 구체적인 예시 — 브루탈리즘 스타일의 개인 사이트 — 를 통해 프롬프트 작성부터 페이지 생성, 만족할 때까지의 미세 조정까지 전 과정을 함께 진행합니다. 이 장을 마치면 dsh를 활용해 정적 웹페이지를 처음부터 생성하는 방법과, 결과를 받은 뒤 어떻게 반복 개선하고 미세 조정하는지 알게 됩니다.

1단계: 작업 영역 준비하기

컴퓨터의 깨끗한 디렉터리(예: E:\software-workspace\DeepSeek harness demo\HTML)를 하나 골라, dsh에서 해당 디렉터리를 작업 영역(workspace)으로 설정합니다.

왜 별도의 디렉터리가 필요할까요? dsh가 생성한 파일은 작업 영역에 저장되는데, 다른 프로젝트와 같은 디렉터리에 섞이면 금방 어지러워지기 때문입니다. 이 장에서는 index.html 파일 하나가 생성되므로, 별도 디렉터리를 사용하는 편이 관리하기 쉽습니다.

2단계: 프롬프트 작성하기

이 단계가 본 장에서 가장 핵심적인 부분입니다. 단순히 "개인 사이트를 만들어 줘"라고만 하면 안 됩니다 — 그러면 템플릿 냄새가 강한 뻔한 페이지가 나올 가능성이 높습니다. 그렇다고 스타일 세부 사항을 전부 적을 필요도 없습니다 — 브루탈리즘 스타일이 어떤 모습인지 dsh가 스스로 찾아볼 것입니다.

아래 프롬프트는 그대로 사용할 수 있습니다(여기서는 이름으로 supermortal을 예시로 들었으니, 본인 이름으로 바꾸어 사용하십시오):

Help me make a Brutalism-style personal site, single-file HTML (CSS and JS inlined in index.html).

First go learn about the typical features and visual style of Brutalist web design, then do it in that style.

Page content:
- Top: name supermortal + a one-sentence self-introduction
- Middle: three sections — About me, Project list, Contact
- Project list has at least 3 projects, each with a name, one-sentence description, a link (use # as placeholder)
- Bottom: copyright + a "back to top" button

Technical requirements:
- Pure HTML + CSS + vanilla JS, no frameworks
- Responsive, also viewable on mobile
- All text content uses placeholder text, I'll modify later
- Write the file directly to the current workspace, filename index.html

After writing, open it in the browser to verify the page renders normally, then tell me where the file is.

이 프롬프트의 발상은 이렇습니다. 스타일은 dsh가 스스로 조사하게 하고(브루탈리즘의 전형적 특징을 검색할 것입니다), 콘텐츠 구조와 기술 요건은 사용자가 정합니다(페이지에 어떤 내용을 담을지, 어떤 기술을 쓸지). 이 두 가지만 주어지면 dsh는 추측할 필요 없이 곧바로 산출물을 만들 수 있습니다.

이 프롬프트를 dsh의 입력창에 보내고 실행이 끝나기를 기다립니다. dsh가 직접 스타일을 조사하고, 직접 파일을 작성하고, 직접 브라우저에서 검증한 뒤, 결과를 직접 알려 줍니다.

3단계: 결과 확인 후 미세 조정하기

dsh 실행이 끝나면 작업 영역에 index.html 파일이 하나 추가되어 있습니다. 더블 클릭하여 브라우저에서 열어 결과를 확인합니다.

첫 번째 결과물이 100% 만족스럽지는 않을 가능성이 큽니다. 예를 들어 제가 처음 실행했을 때는 콘텐츠가 너무 크고, 좌우에 너무 붙어 답답해 보였습니다.

이때 프롬프트를 수정하여 처음부터 다시 만들 필요 없이, 어디가 잘못되었는지 dsh에게 직접 알려 주면 됩니다. 제가 사용한 미세 조정용 프롬프트는 다음과 같습니다.

The content is too large, can be slightly smaller, and move the content slightly toward the center, don't crowd against the sides, the page should be more substantial

dsh가 직접 index.html을 수정합니다. 수정이 끝난 뒤 브라우저를 새로 고침하여 효과를 확인합니다.

이 장에서 배운 것

아래 항목들을 스스로 완수할 수 있다면 합격입니다.

• [ ] dsh가 정적 웹페이지를 생성하도록 만드는 프롬프트를 작성할 수 있다
• [ ] 스타일 묘사는 dsh가 스스로 조사하도록 맡길 수 있으며, 전부 적어 줄 필요가 없다는 것을 알고 있다
• [ ] dsh가 만든 페이지를 받은 뒤 어떻게 미세 조정하는지 알고 있다(어디가 잘못되었는지 직접 말하면 되며, 새 프롬프트로 처음부터 다시 시작할 필요는 없다)