한국어

简体中文
English
日本語
繁體中文
Español
Français
Deutsch
العربية
Tiếng Việt

한국어

简体中文
English
日本語
繁體中文
Español
Français
Deutsch
العربية
Tiếng Việt

Appearance

디자인 Agent와 코딩 Agent로 웹사이트 설계하기 ​

이 장의 가이드 ​

이 장에서는 디자인과 개발이 AI를 통해 어떻게 완벽하게 협업할 수 있는지 보여 줍니다. 당신은 제품 관리자의 역할을 맡아 “디자인 Agent”에게 로고 디자인, 색상 구성, 페이지 레이아웃을 지휘하고, 이어서 “코딩 Agent”와 협업해 시각 디자인을 실행 가능한 코드로 바꿉니다. 창의적인 구상부터 웹사이트 공개까지, 전 과정에서 AI가 개발을 지원하는 흐름을 경험하고 한 사람이 하나의 팀이 되는 방식을 체험합니다.

1. 입문 가이드 ​

1. 튜토리얼 소개 ​

AI 디자인 Agent와 코딩 Agent를 사용해 처음부터 완전한 웹사이트를 만들어 봅시다.

  • 디자인 Agent: 로고, 웹페이지 레이아웃, 색상 구성, 기타 시각 요소를 만드는 역할을 합니다.
  • 코딩 Agent: 프롬프트에서 제시한 요구사항과 레이아웃에 따라 HTML/CSS/JS 같은 실제 코드를 작성하고 실행 가능한 웹사이트를 구축합니다.

2. 디자인 Agent와 코딩 Agent ​

  • 디자인 Agent: 당신이 제공한 프롬프트에 따라 이미지, 페이지 모델, 디자인 스타일을 생성하는 AI입니다.
  • Mastergo
  • Lovart
  • Figma MCP
  • 코딩 Agent: 프롬프트에서 요청한 기능과 레이아웃에 따라 실제 코드(HTML/CSS/JS 등)를 작성하는 AI입니다.
  • Z.AI
  • Trae
  • Cursor
  • Lovable

2. 디자인 Agent로 로고 만들기 ​

1. 로고를 디자인할 때 고려해야 할 핵심 요소 ​

로고는 웹사이트의 첫인상을 결정하는 핵심 요소 중 하나입니다. AI 디자인 Agent로부터 만족스러운 결과를 얻으려면, 프롬프트에서 원하는 로고 유형을 명확하게 설명해야 합니다.

  1. 브랜드 이름 / 텍스트
  • 로고 안에 반드시 나타나야 하는 글자입니다. 예: 웹사이트 제목, 브랜드 이름 등.
  1. 스타일(정서 / 분위기)
  • 로고가 전달하기를 원하는 전체적인 느낌이나 분위기입니다.
  • 예시: 미니멀, 귀여움, 간결함, 모던, 레트로, 미래감 등.
  1. 색상 구성(선택)
  • 로고의 색상이 전체 웹사이트의 전반적인 톤과 어울리게 하는 것이 좋습니다.
  • 구체적인 16진수 색상 코드나 대략적인 색조(차가운 색, 따뜻한 색 등)를 지정할 수 있습니다.
  • 예시: #171721(검정), #FF7130(오렌지).
  1. 형태(모양 / 구조)
  • 로고에 특정한 모양이나 구도가 필요한지 명확히 합니다.
  • 예시: 원형 안에 텍스트 배치, 아이콘 + 텍스트 조합, 아이콘 중심 로고 등.
  1. 아이콘 / 상징 요소(선택)
  • 로고 안에 나타나기를 원하는 그래픽이나 상징입니다.
  • 예시: 책 아이콘, 번개 기호, AI와 관련된 그래픽, 추상 기하 도형 등.

2. 로고 디자인 프롬프트 작성하기 ​

예시 프롬프트

"'My First Website'라는 브랜드 이름으로 미니멀 스타일의 로고를 디자인해 주세요.
검정색(#171721)과 오렌지색(#FF7130)을 사용하고, 텍스트를 원형 안에 배치해 주세요."
"'AIID'를 브랜드명으로 하는 로고를 디자인해 주세요.
전체 스타일은 미래적이고 깔끔하며 간결해야 하고, 주색은 파란색과 흰색입니다.
AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경 PNG로 내보내 주세요."

3. Agent에게 디자인 요청하기 ​

  • 위 프롬프트 입력 → Agent가 생성한 여러 디자인 시안을 비교합니다.

4. 최종 로고 확정하기 ​

  • 초안 중 가장 마음에 드는 버전을 선택해 다운로드합니다.

3. 웹사이트 구조 계획하기 ​

1. 기본 섹션 이해하기 ​

웹사이트를 실제로 만들기 전에 어떤 메뉴(섹션)를 포함할지 미리 계획하는 것은 매우 중요합니다. 메뉴 설계는 방문자에게 무엇을 보여 주고 싶은지, 그리고 방문자가 어떤 행동을 하길 원하는지에 따라 달라집니다. 일반적으로 웹사이트는 보통 Home / About / Contact 같은 기본 섹션으로 구성됩니다.

2. 먼저 구조 스케치 직접 그리기(선택) ​

웹사이트의 목표에 따라 간단한 메뉴 구조를 대략 작성해 볼 수 있습니다.

기본 메뉴 ​

  1. Home
    1. 방문자가 웹사이트에 들어온 뒤 처음 보게 되는 메인 페이지입니다.
    2. 보통 로고, 메인 비주얼 영역, 짧은 표어나 소개 문장을 포함합니다.
  2. About
    1. 당신이 누구인지, 또는 프로젝트 / 서비스의 목적을 소개합니다.
    2. 개인 포트폴리오: 자기소개 + 짧은 이력.
    3. 서비스형 웹사이트: 비전, 목표, 핵심 기능.
  3. Contact
    1. 이메일, 전화번호, 소셜미디어 링크 같은 연락 방법입니다.
    2. 간단한 문의 양식을 추가할 수도 있습니다.

선택 메뉴 ​

  1. Services / Projects

    1. 제공하는 서비스 또는 프로젝트 / 포트폴리오를 보여 줍니다.
    2. 보통 목록이나 카드 형태로 표시합니다.

  2. Gallery

    1. 이미지, 사진, 디자인 작업물을 보여 주는 데 사용합니다.

  3. Blog / News

    1. 글, 소식, 로그를 게시하는 데 사용합니다.

  4. FAQ

    1. 방문자가 자주 묻는 질문과 답변을 정리합니다.

3. 색상 구성 선택하기(선택) ​

이미 로고가 있거나 특정 색상 조합을 사용해 웹사이트를 디자인하고 싶다면, 프롬프트에 사용할 색상 코드를 직접 써도 됩니다.

예시: #171721, #872B97, #FF7130, #FF3C68

아직 색상 구성이 떠오르지 않는다면, 색상 조합 사이트나 검색 키워드를 통해 영감을 얻을 수도 있습니다.

  • Google에서 키워드로 색상 조합 검색하기

4. 웹사이트 디자인 프롬프트 작성하기 ​

예시 프롬프트

"Home, About, Contact 세 개 섹션으로 구성된 단일 페이지 웹사이트를 디자인해 주세요.
색상 #171721, #FF7130, #FF3C68을 사용해 주세요.
전체 스타일은 모던하고 간결해야 합니다."

4. 디자인 Agent로 웹사이트 디자인하기 ​

1. 프롬프트 입력 → 디자인 시안 생성 ​

  • 프롬프트에 계획한 구조와 선택한 색상 구성을 작성합니다.

Mastergo 프롬프트 예시

2. 디자인 시안 검토하고 수정 의견 제시하기 ​

자신의 필요에 따라 Agent에게 피드백을 줄 수 있습니다. 예:

  • “너무 화려해요. 전체 스타일을 더 간결하게 바꿔 주세요.”
  • “다른 글꼴로 바꿔 주세요.”
  • “색상 조합을 조정해 주세요.”
  • “여기 이 블록을 삭제해 주세요.”

3. 최종 디자인 확정하기 ​

디자인 시안을 여러 차례 수정해 만족한 뒤에는, 이 디자인을 코드로 변환하여 코딩 Agent가 이해하고 이어서 작업할 수 있게 합니다.

디자인을 코드로 바꾸는 방식은 플랫폼마다 다르지만, 보통 디자인 플랫폼 안에서 특정 플러그인을 설치하고 사용하는 방식으로 진행합니다.

Mastergo 예시

  1. Mastergo 플러그인 웹사이트를 열고 seal을 검색합니다.

  1. 디자인 페이지로 돌아가 사각형 아이콘(플러그인) 을 클릭합니다.

  1. 코드로 변환하고 싶은 디자인 영역을 선택하고 Generate 버튼을 클릭해 코드를 생성합니다.

5. 코딩 Agent로 웹사이트 만들기 ​

1. HTML/CSS/JS의 기본 개념 이해하기 ​

웹사이트는 본질적으로 세 가지 언어로 구성됩니다.

  • HTML(HyperText Markup Language) → 구조(뼈대)
  • CSS(Cascading Style Sheets) → 스타일(외관)
  • JavaScript(JS) → 기능(상호작용)

이 세 가지가 함께 작동하여 우리가 보는 완전한 웹페이지를 구성합니다.

  1. 🏗️ HTML(구조)
  • 페이지에서 “무엇을 보여 줄지” 정의합니다.
  • 텍스트, 이미지, 버튼, 링크 같은 요소를 배치하는 데 사용합니다.
  • 건축물의 벽체와 프레임과 비슷합니다.

예시

html
<h1>Hello!</h1>
<p>This is my first website.</p>
<a href="contact.html">Contact</a>
  1. 🎨 CSS(스타일)
  • “내용을 어떻게 보여 줄지” 결정합니다.
  • 글자 크기, 색상, 간격, 배경, 버튼 모양 등을 제어합니다.
  • HTML에 “옷”과 시각 스타일을 입혀 줍니다.

예시

css
h1 {
  color: #FF7130;   /* 글자 색상 */
  font-size: 36px;  /* 글자 크기 */
  text-align: center; /* 가운데 정렬 */
}

body {
  background-color: #171721; /* 배경 색상 */
  color: white; /* 기본 글자 색상 */
}
  1. ⚙️ JavaScript(JS)(기능)
  • 웹페이지가 사용자와 상호작용할 수 있게 합니다.
  • 버튼 클릭, 메뉴 펼치기, 이미지 캐러셀, 폼 제출 같은 동적 효과를 구현할 수 있습니다.
  • HTML/CSS가 정적인 뼈대와 외관이라면, JS는 웹페이지를 “살아 움직이게” 하는 두뇌입니다.

예시

javascript
function showAlert() {
  alert("The button has been clicked!");
}
html
<button onclick="showAlert()">Click me</button>

2. 코딩 Agent가 코드를 생성하게 하기 ​

예시 프롬프트

"Home, About, Contact 섹션을 포함한 단일 페이지 웹사이트의 HTML과 CSS를 작성해 주세요.
색상 #171721, #FF7130, #FF3C68을 사용해 주세요.
배경은 검정색, 글자는 흰색으로 해 주세요."

3. 웹사이트 실행하기 ​

초안 코드가 생성되면 Agent는 보통 프로젝트를 자동으로 시작하고, 생성된 웹사이트 페이지를 보여 줍니다.

Agent를 다시 시작했거나 웹사이트 화면이 나타나지 않는다면, 다음과 비슷한 프롬프트를 입력할 수 있습니다.

"Please activate the project"

Agent가 프로젝트를 다시 시작하고 미리보기 페이지를 열어 현재 효과를 확인하기 쉽게 합니다.

4. 간단히 수정하기 ​

자연어로 초안을 계속 미세 조정할 수 있습니다. 예:

  • “버튼을 조금 더 크게 만들어 주세요.”
  • “글꼴을 조금 더 굵게 해 주세요.”

5. 웹사이트 문구 내용 수정하기 ​

Agent가 생성한 첫 번째 웹사이트에는 보통 자동으로 생성된 자리표시자 텍스트가 포함됩니다. 실제 상황에 더 가깝게 만들려면, 미리 실제 내용을 준비한 다음 Agent에게 교체를 부탁할 수 있습니다.

적용 예시: AIID 웹사이트의 About 페이지 업데이트

  1. 먼저 About 페이지에 보여 주고 싶은 내용을 작성합니다. Agent가 이해하기 쉽도록 Markdown 형식으로 저장할 수 있습니다.

  1. 그런 다음 대화에서 Agent에게 해당 파일의 내용을 지정한 페이지에 적용하라고 말합니다.

  1. 내용이 적용된 업데이트 버전을 확인합니다.

6. 이미지 삽입하기 ​

특정 이미지(예: 로고, 배경 이미지 등)를 추가하고 싶다면, 먼저 이미지를 프로젝트 폴더에 업로드한 뒤 프롬프트에서 이 이미지를 페이지의 어느 위치에 사용할지 설명할 수 있습니다.

  • 예시:

  • 결과:

6. 디자인과 코드 통합하기 ​

1. 디자인 파일과 웹사이트 코드 통합하기(선택) ​

디자인 Agent에서 코드 파일을 다운로드했다면, 해당 파일들을 현재 프로젝트 디렉터리로 옮긴 다음 코딩 Agent에게 이 디자인 코드와 기존 프로젝트를 합쳐 달라고 요청할 수 있습니다.

  • 예시:

  • 결과: