출시되는 일러스트 스타일은 하나
Dimesum은 네 후보 스타일을 모두 그린 뒤 아름다움이 아니라 그림의 모든 색이 토큰이 될 수 있는지를 기준으로 하나를 골랐습니다.
일러스트레이션 스타일 네 가지. 그중 테마를 입힐 수 있는 것은 하나였습니다. Dimesum은 단 하나의 기계적인 기준으로 브랜드 아트 방향을 정했습니다. 그림 속 모든 색을 토큰으로 바꿀 수 있는가? 세 후보는 통과하지 못했고, 가장 예쁜 것이 가장 크게 무너졌습니다.
네 가지 아키타입은 docs/design/brand/ART-STYLES.md에 담겨 있으며, 창업자가 모은 레퍼런스마다 하나씩 대응합니다. 우리는 그것들을 두고 논쟁하는 대신 넷 모두 그렸습니다. Dimesum이 보유한 세 가지 소재를 각 아키타입 고유의 손길과 팔레트로 한 번씩 그려낸 것입니다. make ui-art-styles가 4x3 대조 시트를 만듭니다.
make ui-art-styles가 ui/dumplings/styles/에 기록한 네 가지 습작으로, 각 아키타입의 만두가 그 찜기 위에 놓여 있습니다. 팔레트는 레퍼런스에서 픽셀 단위로 샘플링했으며, 더 스티커 열만 테마에서 파생되었습니다.제품 아트에서는 생성 가능성이 아름다움을 이깁니다
제품 아트는 다시 생성되고, 마케팅 아트는 한 번만 그려집니다. Dimesum은 18개의 색 팔레트를 제공하며, 같은 만두가 목록 행의 24px에서도 온보딩 화면의 200px에서도 버텨야 합니다. 새 팔레트마다 일러스트레이터가 필요한 스타일은 두 역할 어느 쪽도 감당할 수 없습니다.
그래서 관문은 생성 가능성입니다. 평면 채움 위에 균일한 둥근 끝 선을 두면 도형마다 정확히 두 가지 색이 있고, 둘 다 토큰으로 이름이 붙습니다. 토큰 값을 바꾸면 제품 속 모든 그림이 한 번에 테마가 바뀌며, 다시 그릴 필요도 두 번째 에셋도 없습니다.
네 아키타입 중 셋은 각기 다른 이유로 무너집니다
더 캐스트는 따뜻한 회화풍입니다. 실제 질감이 살아 있는 엮은 찜기, 호박색 바탕, 그리고 팔다리가 달려 젓가락 통을 기어오르는 만두들이 있습니다. 넷 중 매력이 가장 큽니다. 그래도 출시할 수는 없습니다. 칠해진 하이라이트는 정지점 두 개와 중심 위치를 가진 그러데이션이지 바꿔 끼울 수 있는 헥스 값이 아니며, 음영은 24px에서 뭉개집니다.
더 포스터는 플랫 기하학풍으로, 엮은 매트 위에 올리브와 금색을 씁니다. 윤곽선이 전혀 없어서 형태는 색만으로 구분됩니다. 아름답지만 구조적으로 치명적입니다. 테마를 바꾸면 채움이 움직이면서 경계까지 함께 가져가 버리기 때문입니다. 얼굴은 몸통 너비의 약 8% 크기라, Dimesum이 쓰는 24px에서 48px 크기에서는 빈 자리로 보입니다.
더 스프레드는 모던 에디토리얼이며 우리 고유의 손길에 가장 가깝습니다. 평면 채움 위에 얇고 균일한 어두운 윤곽선을 두르고, 디테일은 음영이 아니라 작은 반복 표시로 담아냅니다. 차이는 선이 아니라 소재에 있습니다. 위에서 내려다본 상 전체를 그리는데, 상에는 목록 행에 넣을 수 있는 단위가 없습니다. Dimesum에게 필요한 것은 장면 스타일이 아니라 캐릭터 스타일입니다.
더 스티커는 깔끔한 카와이 벡터이며, 우리가 출시하는 것입니다. 균일한 얇은 윤곽선, 평면 채움, 점 눈, 큼직한 산호색 볼터치, 음영 없음. 그 안의 모든 색이 토큰이라 18개 팔레트 전부가 공짜로 테마를 입히고, 24px에서도 200px에서도 버티며, 2px 둥근 선을 쓰는 24px Lucide 아이콘과 같은 손길입니다.
| 아키타입 | 형태를 구분하는 방식 | 색이 자리하는 곳 | 24px에서 버티는가 | 판정 |
|---|---|---|---|---|
| 더 캐스트 따뜻한 회화풍 | 따뜻한 회색 윤곽에 칠해진 음영 | 그러데이션과 하이라이트 | 아니오, 음영이 뭉개짐 | 마케팅 전용 |
| 더 포스터 플랫 기하학풍 | 윤곽선 없이 색 대비만 | 평면 색 네 가지에 검정 | 아니오, 8% 크기 얼굴이 빈 자리로 보임 | 채택하지 않음 |
| 더 스프레드 모던 에디토리얼 | 평면 채움 위 얇고 균일한 윤곽선 | 평면 채움, 디테일은 반복 표시로 | 장면 스타일, 작은 단위 없음 | 마케팅 사이트 전용 |
| 더 스티커 깔끔한 카와이 벡터 | 평면 채움 위 균일한 얇은 윤곽선 | 토큰 채움, 토큰 선 하나 | 예, 몸통, 봉우리, 두 개의 눈 점 | 제품에 출시 |
결정적 질문: 색이 토큰이 될 수 있는가?
평면 채움은 색에 이름을 붙일 수 있게 하고, 이름 붙이기가 18개 팔레트를 공짜로 만듭니다. 더 스티커의 만두는 채움 토큰 하나에 선 토큰 하나입니다. 볼터치는 평면 파스텔이 아니라 불투명도 0.42의 rust-600이라, 자기만의 색을 지정하는 대신 그 스킴이 가진 따뜻한 색조가 무엇이든 빌려옵니다. 대나무 찜기는 각 테마의 gold-600에서 섞어낸 하나의 톤 사다리라, 밝은 테두리는 그 금색에 종이색 22%를 더한 것이고 바닥은 잉크 38%를 더한 것이며, 모든 스킴에서 그렇습니다.
채택하지 않은 두 스타일은 그 편집을 견디지 못합니다. 더 캐스트의 하이라이트는 그러데이션 정지점에 구워져 있어, 몸통에 테마를 다시 입히면 크림색 덩어리가 그 위에 그대로 얹혀 있습니다. 더 포스터에는 그림을 붙들어 주는 선이 없어서, 두 채움이 서로 가까워지는 순간 그 사이의 경계가 더는 존재하지 않게 됩니다.
나란히 비교해야만 잡힌 세 가지 수정
그림은 혼자 두면 언제나 괜찮아 보입니다. 아래의 모든 수정은 같은 방식으로 찾아냈습니다. 후보를 PNG로 렌더링하고, 레퍼런스를 같은 픽셀 크기로 잘라낸 다음, 둘을 한 이미지에 붙였습니다.
입은 20u 너비로 그려져 레퍼런스 옆에 놓이는 순간 웃는 얼굴처럼 보였습니다. 이를 10u로, 28u 눈 간격의 3분의 1로 줄이자 캐릭터는 다시 만두가 되었습니다. 눈 원반도 동시에 줄여, r5에서 너비보다 높이가 큰 3.4u 타원으로 바꿨습니다.
IoU로 레퍼런스 마스크에 맞춘 윤곽선은 0.880을 기록했고, 손으로 그린 최선의 시도는 0.781이었습니다. 맞춘 쪽은 뾰족한 왕관처럼 보였습니다. 면적 겹침은 매끄러움을 보지 못하므로, 더 높은 점수가 더 나쁜 그림이었습니다. 출시되는 것은 직접 그린 곡선으로 잰 비율입니다. 종횡비는 레퍼런스의 1.039에 대해 1.041이고, 모든 구간이 3차 곡선이며, 어디에도 모서리가 없습니다.
정작 중요하게 여기는 것을 보지 못하는 지표는 최적화하지 마십시오. 작업에 점수를 매기되, 눈으로도 보십시오.
오므린 매듭은 윤곽을 깨뜨려야 합니다. 우리의 첫 만두는 매끈한 돔 위에 얇은 선 세 개를 얹은 모습이었고, 리뷰는 한 단어로 돌아왔습니다. 머리카락. 끊기지 않은 곡선 위에 그린 선은 머리카락으로밖에 보이지 않는데, 형태 어디에도 만두피가 오므려졌다는 신호가 없기 때문입니다. 봉우리는 높이의 위쪽 8%에서만 갈라집니다. 더 깊이 자르면 토끼 귀가 되는데, 이는 잡히기 전에 두 번 출시되었습니다.
채택하지 않은 셋에서 우리가 간직한 것
스타일을 채택하지 않는 것이 그것을 지우는 것은 아닙니다. 더 캐스트는 연출 본능을 간직합니다. 소품, 흘러넘침, 사물과 상호작용하는 캐릭터로, 일러스트레이터가 개입하고 아무것도 테마가 바뀌지 않는 곳에 쓰입니다. 더 스프레드는 사이트를 위한 붉은 바탕의 자신감과 캐릭터가 아닌 사물에 얼굴을 부여하는 자유를 간직합니다. 더 포스터는 구성마다 색 네 가지라는 절제를 간직합니다.
습작 자체는 출시되지 않습니다. ui/dumplings/styles/는 refs/와 같은 위상을 가집니다. 원본이 아니라 인용이며, 제품 계층은 이를 가져올 수 없습니다. 생성기는 문서 자체의 제목에서 아키타입 목록을 파싱하므로, ART-STYLES.md에 추가된 다섯 번째 아키타입은 다음 빌드에서 시트에 나타나고, 그릴 수 없는 제목은 빌드를 실패시킵니다.
이것이 정리하는 규칙
한 스타일이 출시되고, 나머지는 인용입니다. 가장 마음에 드는 후보를 골라 토큰 값만 바꿔 다시 칠해 보십시오. 그러데이션 정지점, 칠해진 하이라이트, 또는 색 대비로 만든 경계가 그 편집에서 살아남는다면, 그 스타일은 추가하는 테마마다 일러스트레이터가 필요합니다. 다음 단계는 무드보드가 아니라 대조 시트입니다. 모든 후보를 24px와 200px로 한 이미지에 그리고, 둘 다에서 여전히 읽히는 것을 고르십시오.
자주 묻는 질문
제품 일러스트 스타일은 무엇으로 정하나요?
아름다움이 아니라 생성 가능성으로 정합니다. 제품 아트는 테마와 크기마다 생성기가 다시 그리므로, 관건은 그림 속 각 색이 바꿔 끼울 수 있는 토큰으로 이름 붙는가입니다. Dimesum은 18개 팔레트를 제공하므로, 칠해진 그러데이션을 담은 스타일이라면 일러스트레이터가 18번 필요할 것입니다.
Dimesum은 왜 따뜻한 회화풍 스타일을 택하지 않았나요?
칠해진 하이라이트는 정지점 두 개와 중심 위치를 가진 그러데이션이지 바꿔 끼울 수 있는 헥스 값이 아닙니다. 몸통에 테마를 다시 입혀도 크림색 하이라이트는 새 색 위에 그대로 남습니다. 같은 음영은 목록 행에서 만두가 나타나는 크기인 24px에서 뭉개지기도 합니다.
윤곽선이 없는 스타일은 왜 테마 변경을 견디지 못하나요?
윤곽선이 없는 스타일에서는 형태가 색 대비만으로 구분되므로, 경계가 어디에도 그려져 있지 않습니다. 어두운 스킴을 위해 두 채움을 서로 가깝게 옮기면 그 사이의 가장자리가 존재하기를 멈춥니다. 균일한 선은 채움이 어떻게 되든 실루엣을 유지하며, 그래서 Dimesum은 이를 요구합니다.
일러스트가 작은 크기에서 잘 읽히는지 어떻게 확인하나요?
제품이 실제로 쓰는 크기로 모든 후보를 렌더링해 한 이미지에 넣으십시오. Dimesum은 24px, 72px, 200px를 확인합니다. 몸통 너비의 약 8%로 그린 얼굴은 24px에서 48px 사이에서 빈 자리로 보이며, 이것이 의견이 아니라 시각적 증거로 네 아키타입 중 하나를 배제한 이유입니다.
수치 점수로 그림을 직접 보는 일을 대신할 수 있나요?
아니요. IoU로 레퍼런스 마스크에 맞춘 윤곽선은 0.880을 기록해 손으로 그린 최선의 시도 0.781을 앞섰지만, 점수가 더 높은 쪽은 뾰족한 왕관처럼 보였습니다. 면적 겹침은 매끄러움이나 개성을 보지 못합니다. 비율 오류를 잡기 위해 작업에 점수를 매기되, 같은 픽셀 크기로 레퍼런스 옆에 두고 비교하십시오.