Logomarks / 로고마크

Logomarks

David Sherlock이 디자인한 3,797개의 무료 기하학적 로고마크로, 모두 하나의 표준으로 그려졌습니다: https://logomarks.ai (CC0, 공개 도메인). 이 스킬은 해당 세트에 속하는 새로운 마크를 디자인하고, 기존 마크를 확인, 편집 및 재사용하는 방법입니다. (프로젝트에 사용할 기존 마크를 선택하고 설정하려면 Logomarks 선택기 스킬을 사용하세요.)

이 폴더의 내용:

• SKILL.md: 이 파일.
• scripts/kit.mjs: 세트를 만드는 데 사용된 지오메트리 키트 (모양, 실제 부울, 직조, 등각 큐브 및 등각 솔리드). npm install polygon-clipping이 필요합니다 (package.json이 포함되어 있음).
• scripts/fit.mjs: 모든 SVG 마크를 표준에 맞게 크기를 조정하고 확인합니다. 종속성이 없습니다.
• scripts/examples.mjs: 키트로 재구성된 세트의 6개의 실제 마크.
• examples/: 피팅된 출력 파일.

기존 마크 사용하기

사이트는 정적 API 역할을 합니다. 설치할 것이 없습니다:

• https://logomarks.ai/marks.json: 각 마크의 name, slug, file, tags (round, square, letter, number, symmetric, radial, solid, light, wide, tall, new) 및 그려진 크기.
• https://logomarks.ai/svg/<slug>.svg: 마크 자체.
• https://logomarks.ai/marks/<slug>: 해당 페이지. PNG, 파비콘 및 브랜드 목업 다운로드 제공.
• https://logomarks.ai/logomarks.zip: 전체 세트.

처음부터 디자인하기 전에 기존 마크(또는 그 리믹스)가 브리프에 맞는지 확인하세요. marks.json을 가져와 태그와 이름으로 필터링하세요.

표준 (변경 불가)

• viewBox="0 0 512 512".

• 마크의 가장 긴 변이 정확히 448이고, 중앙에 위치: 32의 여백, 실제 외곽선 기준으로 측정. 넓은 마크는 너비가 448이고 더 짧음; 높은 마크는 높이가 448입니다. 절대 눈대중으로 크기 조정하지 말고 fit.mjs를 실행하세요.

• 지오메트리를 측정하고, 캔버스는 측정하지 마세요. 빌드하는 동안 마크가 0-512 범위를 벗어날 수 있습니다 (등각 솔리드와 높은 스택이 일반적으로 그렇습니다). 피팅 단계에서 실제 외곽선을 측정하기 때문에 괜찮습니다. 마크를 viewBox 안에서 렌더링하여 범위를 찾지 마세요: viewBox 밖의 것은 해당 렌더링에서 보이지 않으며, "피팅"은 이를 외부에 남겨두고 최종 파일이 가장자리에서 잘립니다. fit.mjs는 모든 점과 곡선을 측정하므로 어디에 그려진 마크든 처리합니다. fit.mjs --check는 여전히 캔버스를 벗어나는 마크는 실패로 표시합니다.

• 전체 파일:

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
    <path fill-rule="evenodd" d="…"/>
  </svg>
  

• currentColor로 채워진 패스만 사용. 획은 사용하지 마세요 (확장해야 함), <g>, transform, style, 마스크, 클립 패스, ID 또는 텍스트도 사용하지 마세요. 구멍은 실제 구멍이어야 합니다 (evenodd 또는 반전 winding), 배경색으로 칠해진 모양이 아니어야 합니다.

• 좌표는 소수점 한 자리까지.

워크플로우

1. 브리프를 읽으세요. 이름, 사업 내용, 분위기(차분함, 기술적, 장난기, 프리미엄) 및 마크가 사용될 위치(앱 아이콘, 파비콘, 간판). 작은 크기로 사용하면 부품이 적고 굵은 마크가 유리합니다.
2. 하나의 패밀리를 선택하세요 (아래 참조). 하나의 마크에 여러 패밀리를 혼합하지 마세요.
3. 4-6개의 한 줄 아이디어를 작성하세요. 각각은 하나의 아이디어여야 합니다: "S자형 채널로 분할된 디스크", "S, 점, 광선이 있는 디스크"가 아니어야 합니다. 레터마크는 이름의 이니셜을 사용합니다.
4. 키트로 가장 좋은 2-3개를 빌드하세요: 프리미티브를 부울 연산과 결합하고 write()를 호출하는 짧은 스크립트입니다. 매우 간단한 마크에만 수동으로 패스 데이터를 작성하세요 ("수동으로 패스 작성" 참조).
5. 피팅: node scripts/fit.mjs out/가 모든 마크를 표준에 맞게 크기 조정합니다.
6. 검토: 체크리스트를 기준으로 검토하세요. 각 마크를 32px 및 512px로 렌더링하여 확인하세요. 실패하는 것은 모두 제거하고 생존한 것을 반복하세요.
7. 전달: 각 마크에 대해 짧고 고유한 이름(한 두 단어: "Cube Window", "Moonrise"), 한 줄 아이디어 및 SVG를 제공하세요.

세트가 선호하는 것

소유자의 리뷰에 따르면: 하나의 네거티브 공간 아이디어와 굵고 균일한 간격을 가진 볼드한 솔리드 마크; 등각 솔리드 및 큐브; 하나의 반복 요소로 만들어진 디테일 마크; 미니멀한 도트 및 픽셀 마크; 귀여운 도자기 피규어 동물. 무엇보다도, 현대적인 테크, AI 또는 테크웨어 브랜드처럼 보이는 모든 것: 정밀하고, 엔지니어링된, 약간 미래지향적인. 맞물린 밴드, 모듈식 타일(가장 좋아함), 모노라인 및 멀티라인 드로잉, 모따기 및 비스듬한 절단, 정밀한 링과 궤도, 그리드 시스템, 스텐실 및 유틸리티 문자, 글리치 슬라이스, 모노그램. 그러나 UI, 네트워크, 칩 또는 회로 아이콘, 신경망 노드 그래프, 뇌, 또는 알려진 AI 마크(육각형 매듭, 별표, 네 점 반짝임)와 비슷한 것은 절대 안 됩니다.

패밀리

세트의 모든 마크는 하나의 패밀리에 속합니다. 하나를 선택했으면(워크플로우 2단계), 빌드하기 전에 references/families.md에서 해당 섹션을 읽으세요: 어떻게 구성되었는지, 512 캔버스에서의 숫자, 시도하고 제외된 것들. 이 파일에서 따옴표로 지정된 섹션("Iso solids", "Glitch editions")도 거기에 있습니다.

패밀리: Bold negative space; Swiss grid; Stencil letters; Monograms; Serif letters and monograms (batch 230); Letter badges; Woven; Iso cubes; Iso solids; Overlaps (XOR); Line (monoline); Multiline (tracks); Oblique; Dot grids; Animals; Animals in the house styles; Leaf and seed; Halftone solids; Dither taper (batches 167, 186); Detailed; Inflated; Glitch slices; Shear and Wire letters (batches 112–113); Inline letters (batch 124); Rail and Trace letters (batch 166); Echo letters (batch 202); Tech brand marks (batch 213); Modular; Orbits; Letter symbols, symbols, hidden creatures and forms (batch 168); Techwear (batch 107); Industry marks (batches 95–97); Tried and dropped (batch 51); Folded (origami); Fold seams and straps (batch 170); Iso · Planes (batch 215); Bold · Emblems (batch 216); Bold · Y2K (batch 232); Letters · Blackletter and Bold · Shatter (batch 231).

키트 (scripts/kit.mjs)

모양은 512 캔버스의 다각형 세트입니다 (y축 아래 방향, C = 256이 중심).

함수	생성 결과
circle(cx, cy, r), ellipse(cx, cy, rx, ry, deg)	원
rect(x, y, w, h), rr(x, y, w, h, r | [tl, tr, br, bl])	직사각형, 둥글거나 부분적으로 둥근
squircle(cx, cy, R, n)	슈퍼타원: 배지의 부드러운 사각형 (n 4.5)
regular(cx, cy, r, sides, deg), roundPoly(points, cut)	정다각형; 모서리가 둥근 모든 다각형
poly([[x, y], …])	모든 다각형
annulus(cx, cy, r, w)	너비 w의 링; r은 중심선이며 외곽 가장자리가 아님
sector(cx, cy, r, a0, a1), arcBand(cx, cy, r, w, a0, a1, round)	파이 조각; 두꺼운 호, 선택적으로 둥근 끝
lens(cx, cy, length, width, deg)	베시카 / 잎
drop(centre, r, tip)	눈물방울
pill(a, b, w), bar(a, b, w)	둥글거나 사각형 끝이 있는 선, 모양 또는 간격 절단용
stroke(points, w), sample(f, t0, t1, n)	두꺼운 폴리라인 (가변 너비 허용) 및 곡선을 따라 점
weave(strands, w, gap), ring(cx, cy, r)	위-아래 가닥
iso(edge), cubes(list, edge, ox, oy, gap)	등각 투영 점; 큐브 배열
isoPrism, isoBlock, isoRing, isoPile	등각 솔리드 ("Iso solids" 참조)
dedupe(points)	stroke() 전에 중복 점 제거
grow(shape, d), soften(shape, r1, r2)	실제 라운드 오프셋 (음수는 축소); 내부 모서리는 r1, 외부 모서리는 r2로 둥글게 (부푼 형태)
robust()	스크립트 상단에서 한 번 호출: polygon-clipping이 오류를 던질 때마다 미세 지터로 재시도
grown(shape, w), over(back, front, w)	모양에 2w 밴드를 더한 것 (빼서 부분을 자유롭게 잘라냄); front가 back 앞에, w만큼 자유롭게 잘림
egg(cx, cy, rx, ry, deg, k)	달걀, 피규어 몸체용
slices(shape, cuts, shifts, { deg, g })	글리치 슬라이스: 간격 g로 밴드로 자르고, 각 밴드는 절단선을 따라 이동
BADGE, knockout(kind, letter), clearance()	일곱 가지 배지 모양; 중앙에 위치하고 제거된 문자, 가장자리에서 50보다 가까워지면 축소
PIX7, pixels(rows, p), checker(rows)	덩어리진 8비트 알파벳; 하나의 단색으로 된 픽셀 글리프; 모서리만 접촉
dsegs(segments, t, g)	뾰족한 끝이 있는 디스플레이 세그먼트, 균일한 간격으로 분리
SKEL, skelSolid(k, H, T)	하나의 기하학적 산세리프체 중심선; 사각형 끝으로 채워진 획
tracks(pts, { n, pitch, w }), fillet(pts, r), balloon(pts, w0, w1)	평행 트랙; 둥근 모서리의 폴리라인; 벌룬 획
filletClosed(pts, r), trackLoop(pts, { n, pitch, w })	모든 모서리가 필렛 처리된 닫힌 다각형 (모서리당 r 허용); 닫힌 외곽선 주위의 세 개 트랙 (동물의 경우 피치 42)
walk(at, deg, steps)	터틀 경로: ['L', length] 및 ['A', turn°, radius] 단계, 정확한 반경의 호 (열린 트랙 동물)
seeded(str)	시드된 Math.random: 마크당 설정하여 robust()의 지터와 배치가 바이트 단위로 동일하게 재생성
svgShape(svgText), pathRings(d)	마크의 SVG(또는 패스 데이터)를 다시 모양으로 읽기: 곡선 및 호 샘플링, evenodd 또는 nonzero 구멍 처리
glitchMark(svgText, { kind, cuts, shift, deg })	기존 마크의 글리치 에디션 ("Glitch editions" 참조)
U, D, I, X	합집합, 차집합, 교집합, 배타적 합집합
rot(shape, deg, cx, cy), rotN(shape, n), move, scale, flipX	변환; rotN은 중심을 기준으로 반복
polar(r, deg, cx, cy)	각도의 점 (0° = 오른쪽, 90° = 아래쪽)
segmentLines(lines, { t, box }), segments(nodes, strokes, o)	세그먼트 문자: 각 획이 고유한 세그먼트, 이등분선을 따라 분리된 조인트
isoPieces(pieces, u)	단위 큐브 조각, 이음매 없는 면, 조각과 접힌 부분 사이에만 간격 (Iso Lock)
blocks(list, W, H), nest(W, H, n, sides, cut)	균일한 간격으로 단색 블록이 타일링된 직사각형 (Golden and the Blocks); 벗겨진 세분화
linkage(bars, pins)	핀으로 고정된 캡슐, 각각 이전 것 위에
write(file, shape), svg(shape)	출력

간격 자르기: 간격 너비의 bar() (또는 얇은 annulus())를 빼세요. 해자에 부품 띄우기: 확대된 복사본을 뺀 다음 부품을 다시 추가하세요 (Hex Gem). polygon-clipping이 "Unable to complete output ring" 오류를 던지면 모양이 정확한 가장자리를 공유하는 것입니다: 하나를 0.01만큼 이동하세요. 그래도 충분하지 않으면 전체 빌드를 외곽선 과 깊이에 미세 지터로 재시도하거나 (1e-4에서 ~0.02까지 몇 번 시도), 사각형의 합집합 대신 하나의 깔끔한 외곽선으로 면을 다시 그리세요. "Degenerate segment at [NaN, NaN]"은 폴리라인에 중복 점이 있다는 의미입니다: dedupe()를 사용하세요. 키트 헬퍼(stroke(), pill(), grown())도 부울을 호출하므로 자체 코드의 지터가 도달할 수 없습니다: 대신 robust()를 한 번 호출하면 내부 실패가 자체적으로 재시도됩니다.

grow()는 배치 64 이전에는 유용하지 않았습니다: 각 링을 마지막에 첫 번째 점이 반복된 상태로 단순화하여 링이 그 한 점으로 축소되어 원을 추가하거나 제거만 했습니다. 수정되었습니다; 이전 키트 사본이 있다면, grow(rect(0, 0, 100, 100), -10)이 그것을 보여줍니다.

크게, 양쪽 배경에서 확인하세요. 작고 밝은 배경의 썸네일은 오해의 소지가 있습니다: 열린 공간이 채워진 것처럼 보이거나, 얇은 조각이 숨을 수 있습니다. 마크를 출시하거나 보내기 전에 400px, 어두운 배경에 밝은 색으로 렌더링하세요.

수동으로 패스 작성하기

간단한 마크의 경우 패스를 직접 작성할 수 있습니다:

• 원은 두 개의 호입니다: M cx-r cy a r r 0 1 0 2r 0 a r r 0 1 0 -2r 0 z.
• 링은 fill-rule="evenodd"로 하나의 패스에 두 개의 원입니다. 내부 원이 구멍이 됩니다.
• Evenodd를 사용하면 겹치는 부분도 구멍이 됩니다. 겹치는 솔리드의 경우 키트에서 병합하거나 모든 솔리드를 시계 방향으로, 모든 구멍을 반시계 방향으로 그리는 기본 nonzero 규칙을 사용하세요.
• 그런 다음 fit.mjs를 실행하세요. 수동으로 448에 맞추려고 하지 마세요. 캔버스에 자르지 마세요: 그림의 일부가 0-512 밖에 있으면 fit.mjs가 다시 안으로 가져옵니다.

검토 체크리스트

다음 중 하나라도 실패하는 마크는 제거하거나 다시 작업하세요:

• 하나의 아이디어, "그리고" 없이 한 문장으로 설명 가능.
• 32px에서 읽을 수 있음: 간격이 좁아지거나 뭉개지지 않음. 10 단위보다 좁은 것 없음.
• 전체에 걸쳐 하나의 간격 너비와 하나의 획 두께 (또는 명확한 1:2 비율). 세트의 간격 유지 (분리된 부분 사이 22 단위): 사이트의 Gap, Weight 및 Soften 컨트롤은 각 마크의 부분과 간격을 측정하며, 균일할 때 가장 잘 작동합니다. 유일한 예외는 11의 접힘 또는 겹침 SEAM (Crease and Strap 마크, "Fold seams and straps" 아래)이며, 실루엣만으로 32px에서 읽을 수 있는 경우에만 해당합니다.
• 절대 아이콘처럼 읽히지 않음. 이것은 마크가 가장 많이 실패하는 규칙입니다. 질문: 아이콘 세트(Material, Lucide, SF Symbols)에 편안하게 들어갈까요? 그렇다면 아무리 잘 그려졌어도 제거하세요. 로고마크는 하나의 브랜드에 속하는 추상적이거나 양식화된 기호이지, 사물이나 행동의 픽토그램이 아닙니다. 특히, UI 아이콘이 아니어야 함: 화살표, 재생, 홈, 기어, 너트, 종, 자물쇠, 다운로드, 복사, 채팅 풍선, 지도 핀, Wi-Fi 아크, 차트 (파이 조각도 포함), 이미지/산과 태양, "출입 금지" 사선, 스피너 같은 점 링, 패키지 상자 없음. 일상적인 물건의 선화는 쉽게 아이콘으로 빠집니다: 컵, 병, 안경, 트로피, 탑햇, 로켓, 자전거, 보석은 모두 아이콘으로 읽힙니다.
• 실수로 신체 부위가 아님: 겹치는 링 사이의 아몬드 및 렌즈 모양 주의.
• 의미 있는 상징이 아님: 종교적, 정치적 또는 신비로운 상징 없음 (육각성, 오각성, 십자가, 초승달과 별, 삼위일체 매듭, 토리이, 토모에, 모든 방향의 만자).

(참고: SKILL.md 내용이 잘렸지만, 원문의 구조와 지침을 최대한 반영하여 번역했습니다.)