디자인 톤 ①: 톤·무드·모서리 고르기

웹사이트의 페이지마다 색이 조금씩 다르면 하나의 사이트라는 느낌이 약해집니다. 디자인 톤은 사이트 안 페이지들이 같은 색상 톤과 같은 모서리 둥글기를 쓰도록 맞춰 주는 기능입니다. 이 글에서는 디자인 톤 창을 여는 위치, 색상 톤과 무드를 고르는 방법, 모서리 둥글기와 적용 페이지를 정하는 방법을 순서대로 안내합니다. 이미 만든 페이지의 색을 바꾸거나 다시 만드는 방법은 별도 글에서 다룹니다.

1. 디자인 톤은 어디에 있나요

웹사이트 상세 화면 오른쪽 위의 버튼 줄에서 FunnelBrain 일괄 생성 옆에 있는 디자인 톤 버튼을 누르면 웹사이트 디자인 톤 창이 열립니다. 퍼널 상세 화면에도 같은 버튼과 창이 있고, 그곳에서는 창 제목이 퍼널 디자인 톤으로 나옵니다.

2. 색상 톤 고르기

창 맨 위에서 색상 톤을 정합니다. 방법은 두 가지입니다.

• 새 톤 자동 추천: 사이트 이름과 페이지 제목으로 성격을 가늠해 후보를 추리고, 그중 팔레트 하나를 뽑아 줍니다. 마음에 들지 않으면 다시 적용해서 다른 팔레트를 뽑을 수 있습니다.
• 또는 무드 고르기: 따뜻함, 신뢰, 활기, 자연, 고급, 산뜻, 차분, 대담, 임팩트, 모노팝 열 가지 무드 카드 중 하나를 고릅니다. 카드의 세 가지 색은 그 무드의 대표 팔레트 견본입니다. 무드를 고르면 그 무드 안에서 사이트 내용에 맞는 팔레트가 정해지며, 이때는 AI가 팔레트를 고릅니다. 자동 추천은 AI 없이 뽑습니다.

무드 오른쪽의 라이트와 다크 버튼으로 밝은 배경 계열과 어두운 배경 계열을 바꿔 볼 수 있습니다. 무드를 골라 둔 채로 전환하면 같은 무드의 짝이 자동으로 선택됩니다.

3. 모서리 둥글기 정하기

모서리 둥글기는 각진(2px), 약간(8px), 둥근(16px) 세 단계입니다. 카드마다 모서리 모양 견본이 있어 눈으로 비교하며 고를 수 있습니다. 컨테이너, 컬럼, 카드, 입력칸에 적용되고 버튼과 배지는 지금처럼 둥글게 유지됩니다. 따로 고르지 않은 사이트는 약간이 기본값입니다. 색은 그대로 두고 모서리만 바꿀 수도 있고, 그 반대도 됩니다.

4. 적용 페이지와 적용 방식

적용 페이지에는 사이트의 페이지가 체크 상자와 함께 나열됩니다. 체크된 페이지가 이 톤을 따르고, 체크를 뺀 페이지는 독립 톤 표시가 붙어 자기 톤을 유지합니다. 오른쪽 위의 모두 선택과 모두 해제로 한꺼번에 바꿀 수 있고, 다시 체크하면 이 톤을 따릅니다. 에디터에서 직접 만든 페이지에는 기획서 없음 표시가 함께 붙습니다.

그 아래 적용 방식의 기본값은 저장만입니다. 앞으로 만드는 페이지부터 이 톤을 쓰고, 지금 있는 페이지는 그대로 둡니다. 나머지 두 방식은 기존 페이지를 직접 바꾸는 기능이므로 별도 글에서 다룹니다.

5. 적용하고 다시 열어 보기

1. 색상 톤(자동 추천 또는 무드), 모서리 둥글기, 적용 페이지를 정합니다.
2. 적용 방식을 저장만으로 두고 아래 톤 적용을 누릅니다. 그만두려면 취소나 오른쪽 위의 닫기 아이콘을 누릅니다.
3. 저장되면 안내 창이 나타나고, 색상 톤을 저장했다면 적용된 대표색과 강조색이 함께 표시됩니다.

저장한 뒤 창을 다시 열면 맨 위에 현재 톤 유지 항목이 생기고 기본으로 선택됩니다. 색은 그대로 두고 모서리나 적용 페이지만 바꾸고 싶을 때 이 항목을 선택한 채 적용하면 됩니다.

6. 이렇게 활용해 보세요

• 페이지를 늘리기 전에 사이트의 색 방향부터 정해 두면, 이후 만드는 페이지가 같은 분위기로 이어집니다.
• FunnelBrain 일괄 생성에서 스타일을 자동으로 두면 저장해 둔 사이트 톤이 기획서의 색보다 먼저 적용됩니다. 일괄 생성은 별도 글에서 다룹니다.
• 이벤트 페이지처럼 따로 색을 쓰고 싶은 페이지는 체크를 빼서 독립 톤으로 두세요.

7. 알아 두실 점

• 톤 저장만으로는 이미 만들어 둔 페이지의 색이 바뀌지 않습니다. 기존 페이지에 반영하려면 적용 방식에서 다른 방식을 고르는데, 이는 별도 글에서 안내합니다.
• 무드를 고르고 적용할 때는 AI가 팔레트를 고르는 호출이 한 번 일어납니다. 자동 추천은 이 호출 없이 팔레트를 뽑습니다.
• 독립 톤으로 표시된 페이지는 이후의 톤 변경, 다시 만들기, 일괄 생성에서 제외됩니다. 따르게 하려면 다시 체크한 뒤 적용합니다.
• 모서리와 색 중 한쪽만 바꿔도 다른 쪽 설정은 그대로 유지됩니다.