레퍼런스 AI웹서비스 제작노트 -9 | 섹션을 조합하는 무드보드, AI가 만들어주는 와이어프레임

 

섹션을 하나하나 모아놓고 보니 이런 생각이 들었다.
이걸 조합해서 페이지 하나처럼 쌓아 볼 까하는 ㅎㅎ

그래서 무드보드를 만들었다.
그리고 욕심이 나서 AI 와이어프레임까지 붙여봤다 

 

무드보드는 디자인 시작 전에 참고할 이미지를 한곳에 모아 본다 생각하면 된다.
보통은 핀터레스트나 피그마에 이미지를 붙여서 만든다.

 

찐망고 레퍼런스의 무드보드는 조금 다르다.
섹션을 위에서 아래로 쌓아서 페이지 한 장처럼 본다.
헤더 → 메인 비주얼 → 서비스 소개 → 후기 → 푸터 이런 식으로.

 

수업에서 사이트 리뉴얼 과제를 할 때 바로 디자인부터 하지 않는다.
분석을 꽤 길게 한다.

1. 현재 사이트 분석: 이 회사가 무슨 사업을 하는지, 웹사이트가 어떤 역할인지, 주로 누가 들어오는지
2. 문제 찾기: 정보 찾기가 어려운지, 보여줘야 할 걸 뒤로 미뤄놨는지
3. 레퍼런스 사이트 분석: 같은 업종이나 잘 만든 사이트는 이 문제를 어떻게 풀었는지
4. 디자인 씽킹: 사용자 입장에서 뭐가 불편한지 정리하고 해결 방향 정하기
5. IA·사이트맵: IA는 정보를 어떤 메뉴, 어떤 단계로 나눌지 정하는 정보 구조고, 사이트맵은 그걸 페이지 목록으로 그린 지도다
6. 메인 콘텐츠 구조: 메인에 어떤 콘텐츠를 어떤 순서로 넣을지 정하기
7. 디자인: 그다음에 각 자리에 어떤 디자인을 넣을지 고르기

예를 들어 삼양식품 리뉴얼 과제라면
"기업 홍보 메시지가 제품보다 앞에 나와서 제품을 찾기 어렵다"는 문제를 찾고,
농심, 오뚜기는 어떻게 풀었는지 보고,
기업 영역과 소비자 영역을 나눈 IA를 짜는 식이다.

수강생 결과물 피드백은 GPT에 직접 만든 피드백 스킬로
분석 → 문제 정의 → 레퍼런스 → IA → 메인 구조가 논리적으로 이어지는지 본다.

 

이 흐름에서 6번, 7번을 도와주는 게 무드보드다.

① 메인 구성 정하기
쇼핑몰 메인, 기업 소개, 서비스 랜딩, 랜딩페이지 5단계 같은 구성 중에 고르거나 직접 짠다.

② 구성대로 채우기
구성에 맞춰 서로 다른 사이트에서 하나씩 자동으로 골라 쌓아준다.
한 사이트에서만 가져오면 그 사이트 캡처랑 다를 게 없어서다.

 

찐망고 무드보드도 똑같이 만들었다.

 

① 메인 구성 정하기
쇼핑몰 메인, 기업 소개, 서비스 랜딩, 랜딩페이지 5단계 같은 구성 중에 고르거나 직접 짠다.

② 구성대로 채우기
구성에 맞춰 서로 다른 사이트에서 하나씩 자동으로 골라 쌓아준다.
한 사이트에서만 가져오면 그냥 그 사이트 캡처랑 다를 게 없어서다.

채운 다음엔 섹션마다

• 다른 걸로: 같은 카테고리의 다른 사이트로 바꾸기
• 순서 바꾸기
• 빼기

레퍼런스를 보다가 마음에 드는 섹션은 '무드보드에 담기'로 바로 넣을 수도 있다.

 

 

만든 무드보드는 링크로 보낼 수 있다.
휴대폰에서는 카톡이나 문자로 바로 보내는 버튼이 뜬다.
카톡으로 보내면 미리보기에 섹션 개수랑 흐름(헤더 → 메인 비주얼 → …)이 나온다.

여기서 버그가 하나 있었다 😅

 

링크를 받은 사람이 열면
받은 사람이 원래 만들어둔 무드보드가 지워지고 보낸 사람 것으로 바뀌었다.

그래서 받은 사람 화면을 따로 만들었다.

• 맨 위에 "공유받은 무드보드입니다" 표시
• 내 무드보드로 가져오기: 원할 때만 가져옴
• 내 것 보기: 내 무드보드로 돌아가기

링크만 열어서는 아무것도 덮어쓰지 않는다.

 

어디까지 허용할지 고민이 많았는데
남의 사이트 캡처를 조합한 걸 그대로 결과물로 쓰면
저작권 문제가 생길 수 있다.

그래서 참고용 무드보드까지만 하기로 했다.

• 맨 위에 참고용 안내와 출처 목록 고정
• 섹션마다 '출처 ○○' 자동 표시
• "결과물에 그대로 쓰지 말 것" 안내

 

만들면서 생각한 사람들이 있다.

• 수강생, 웹디자인 입문자
• 과제 낼 때 참고 자료가 필요한 다른 강사들
• 프리랜서, 에이전시 기획자
• 외주 맡기는 대표님 ("이런 느낌으로 해주세요" 보여줄 때)

숙련 디자이너는 아마 안 쓸 거 같다. 이미 자기 방식이 있으니까.

 

와이어프레임은 색이나 이미지 없이 어디에 뭐가 들어가는지 배치만 잡은 설계도다.
보통 회색 상자랑 글자로 그린다. 만든 기능은 이렇다.

1. 무드보드에 쌓은 섹션 이미지를 AI가 본다
2. 디자인은 따라 하지 않고 구조만 읽는다 (제목이 어디, 버튼이 어디, 이미지가 몇 개)
3. 내가 입력한 브랜드 색, 폰트, 문구를 입혀서
4. HTML 페이지로 만들어준다. 이미지 자리는 회색 상자

HTML로 나오니까 브라우저에서 바로 열어볼 수 있다.

관리자 전용으로 둔 이유는 비용 때문이다.
AI는 토큰(AI가 읽고 쓰는 글자 단위) 만큼 돈이 나가는데
섹션 6개짜리 하나 만드는 데 약 3만 토큰, 한 번에 270원 정도 든다.
무료버전으로 공개를 할 까 하다가 현재 고민하는 중이긴 하다.

만들면서 느끼는데 요즘 유행하는 상세디자인 AI도 어떻게 만들어질지가 눈에 보인달까

 

처음 나온 와이어프레임은 문제가 많았는데

• 헤더가 두 번 나옴 (캡처에 헤더가 겹쳐 찍힌 걸 그대로 그림)
• 지도 위 화살표를 이상한 막대로 따라 그림
• 원본 이미지의 위치를 픽셀 단위로 베낌
• 아이콘 자리에 글자가 삐져나옴

AI한테 주는 지시문을 고쳤다.

- 원본 위치를 베끼지 말고 위에서 아래로 흐르는 레이아웃으로 짜기
- 겹쳐 찍힌 헤더, 떠 있는 퀵메뉴는 그리지 않기
- 지도나 장식 그래픽은 회색 상자 하나로

 

고치고 나니 자연스럽게 흐르는 레이아웃이 나왔다.

 

 

랜딩페이지는 광고나 링크를 눌렀을 때 처음 도착하는 한 장짜리 페이지다.
목적은 하나. 방문자가 문의, 신청, 구매 같은 행동을 하게 만드는 것.

수업 때 쓰는 랜딩 5단계 자료를 그대로 기능으로 옮겼다.

5단계: 히어로(첫 화면) → 브랜드 소개 → 특징·강점 → 서비스 → CTA(행동 유도 버튼)

워크시트: 누구를 위한 건지 / 강점 3가지 / 방문자가 해줬으면 하는 행동 / 슬로건

워크시트를 채우면 AI가 5단계 역할에 맞춰 와이어프레임을 짠다.

여기서도 문제가 있었다.

• 문의 버튼이 7번 나옴
• 수치랑 후기를 지어냄 ("만족도 98%", "정말 좋아요!" 같은 것)

없는 숫자랑 후기를 지어내면 큰일이다.

• 버튼은 히어로랑 마지막 CTA에만
• 숫자는 00%, 후기는 빈칸처럼 자리만 표시

로 바꿨다.

 

수업 예시로 쓰는 꾸블랙 창업 랜딩으로 돌려보니 5단계 흐름대로 깔끔하게 나왔다.

1. 레퍼런스로 페이지 구성 정하기
2. 무드보드로 섹션 배치해 보기
3. 회색 와이어프레임 뽑기
4. 컬러, 폰트, 여백을 정해서 피그마에서 새로 디자인

구조만 참고하고 색, 문구, 이미지, 그래픽을 다 바꾸면 새 디자인이 된다.
실제 사이트를 다시 디자인한 과제는 포트폴리오에 가상 리뉴얼(비공식)이라고 표기하게 한다.

 

 

처음엔 AI 상세페이지 생성기까지 생각했다.
근데 찾아보니 투자받은 팀들이 이미 많이 하고 있는 분야였다.

그래서 따로 서비스로 키우지 않고 관리자 실험으로 두기로 했다.
상세페이지보다는 랜딩페이지를 먼저.
재료(웹 섹션)랑 엔진이 이미 있으니까.

나중에 회원가입 → n회 무료 → 멤버십 구조로 열어볼까 고민 중이다.

 

다음 편은 운영하면서 다듬은 것들.
자동 캡처가 잘못 자른 섹션을 사람이 직접 자르고 나누는 기능을 추가하고

검색기능을 추가!

 

https://ref.jjinmango.kr/board