사용 가이드로 건너뛰기
Critique Composition작성자 owl-listener

Critique Composition 스킬.

렌더링된 레이아웃이 불균형하거나 연결되지 않은 듯 보이는 이유를 설명하세요.

  • 구도
  • 위계
소스 검토 · critique-compositionSKILL.md
작업 렌더링된 레이아웃이 불균형하거나 연결되지 않은 듯 보이는 이유를 설명하세요. 결과물 네 가지 명시적 차원으로 구성된 구도 검토. 시작 전 확인 이 스킬은 실제 렌더링된 구도를 비평하며 브리프만 보고 문제를 만들어내지 않습니다.
편집 요약 · 소스 검토일 2026-11-02 · 생성된 예제가 아닙니다

01 기능 소개

렌더링된 레이아웃이 불균형하거나 연결되지 않은 듯 보이는 이유를 설명하세요

렌더링된 화면의 균형, 여백, 리듬, 지각적 그룹화를 구체적인 관찰과 실행 가능한 레이아웃 수정안으로 점검하세요.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Critique Composition은 렌더링된 화면의 공간적 특성을 살펴봅니다. 시각적 무게, 빈 공간, 반복 간격, 지각적 그룹화를 통해 배치가 불안정하거나 단절돼 보이는 이유를 설명합니다. 기본 위계는 이해되지만 배치가 여전히 어색할 때 특히 유용합니다.

보고서는 균형, 여백, 리듬, 게슈탈트라는 네 차원에서 관찰, 문제, 수정안을 구분합니다. 따라서 ‘페이지가 어색하다’는 말을 지나치게 밀집된 영역, 관련 내용과 떨어진 컨트롤, 이유 없이 간격이 바뀌는 반복 패턴에 대한 구체적인 논의로 바꿉니다.

예상 산출물

  • 네 가지 명시적 차원으로 구성된 구도 검토.
  • 구체적인 공간 문제와 연결된 중립적 관찰.
  • 각 차원의 실행 가능한 수정안과 심각도 평가.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    전체 구도 읽기

    렌더링된 화면에서 시각적 무게가 어떻게 분포하는지 살펴봅니다. 대칭 또는 비대칭이 의도적인지, 구도의 무게중심이 어디에 있는지 고려합니다.

  2. 02
    간격과 리듬 점검

    섹션 사이의 큰 간격과 그룹 내부의 작은 간격을 비교합니다. 일관되지 않은 패딩, 어긋나는 반복, 밀집 영역과 빈 영역 사이의 갑작스러운 전환을 찾습니다.

  3. 03
    지각적 그룹화 확인

    근접성, 유사성, 전경과 배경의 분리, 연속성, 폐쇄성을 검토합니다. 관련 콘텐츠에서 떨어져 보이거나 무관한 컨트롤과 묶여 보이는 요소를 찾습니다.

  4. 04
    목적에 맞는 수정안 작성

    균형, 여백, 리듬, 게슈탈트마다 관찰, 문제, 구체적 수정안을 제시합니다. 각 차원을 평가하되 집중 검토를 설명 없는 전면 재설계로 바꾸지 않습니다.

02 활용 상황

언제 사용하면 좋을까요

이 스킬은 실제 렌더링된 구도를 비평하며 브리프만 보고 문제를 만들어내지 않습니다.

적합한 경우

  • 배치가 불안정해 보일 때콘텐츠는 있지만 무게, 간격, 그룹화 때문에 구도를 읽기 어려울 때 적합합니다.
  • 범위를 좁힌 개선승인된 디자인 방향을 유지하며 공간 배치를 수정하고 싶을 때 적합합니다.

확인할 한계

  • 실제 화면 필요이 스킬은 실제 렌더링된 구도를 비평하며 브리프만 보고 문제를 만들어내지 않습니다.
  • 명확한 검토 범위소스는 강조와 시선 흐름 분석을 별도의 시각적 위계 비평으로 안내합니다.
  • 제안은 검증 필요간격 수정안을 구현한 뒤에도 실제 화면을 확인해야 합니다.

준비할 입력

  • 렌더링된 화면화면과 관련 뷰포트 또는 콘텐츠 상태를 제공하세요.
  • 디자인 맥락의도한 균형, 그룹화, 확립된 시각적 방향을 설명하세요.
  • 간격 시스템수정안이 참조해야 할 기존 그리드와 간격 값을 제공하세요.

03 핵심 결정

중요한 판단 기준

  1. 구체적인 공간 언어

    피드백은 레이아웃을 어색하게 만드는 관계를 명시합니다.

  2. 차원별 분리

    여백과 리듬을 시각적 무게와 독립적으로 평가할 수 있습니다.

  3. 실행 가능한 비평

    모든 문제에 제안하는 변경을 함께 제시합니다.

04 예시 브리프

목적을 좁힌 요청으로 시작하세요

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

소스와 설정 확인

화면과 관련 뷰포트 또는 콘텐츠 상태를 제공하세요.

업스트림 소스 파일
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-composition/SKILL.md

아래 참고 링크에서 원본 사용 지침을 확인할 수 있습니다. 사용 전에 리포지터리의 설정 요건을 확인하세요. 설치 명령어가 아닙니다.

결과물 하나부터 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
critique-composition으로 렌더링된 프로젝트 개요 화면을 검토해주세요. 현재 콘텐츠와 시각적 방향을 유지하고 균형, 여백, 리듬, 지각적 그룹화에 집중하세요. 밀집되거나 떨어져 있거나 의도보다 시각적으로 무거운 구체적인 영역을 찾으세요. 반복되는 카드와 섹션의 간격을 기존 간격 척도와 비교하세요. 차원마다 중립적으로 관찰하고 그 영향을 설명하며 구체적인 조정을 제안하세요. 통과, 경미한 문제, 중대한 문제로 평가하세요. 이번 검토에서 페이지를 재설계하지 말고, 보지 못한 뷰포트에 의존하는 판단은 표시하세요.

결과 확인

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 관찰은 눈에 보이는 구체적인 공간 관계를 설명합니다.
  • 수정안은 무관한 스타일이 아니라 확인한 차원을 다룹니다.
  • 확인하지 않은 뷰포트와 구현하지 않은 제안을 명확히 표시합니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스와 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
owl-listener
스킬 파일
SKILL.md
라이선스
MIT
검토한 스냅샷
2026-11-02 · 9a6930cf84a8
편집 소스 요약
렌더링된 레이아웃이 불균형하거나 연결되지 않은 듯 보이는 이유를 설명하세요.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 궁금한 점

위계 검토를 대체하나요?

구도에 집중합니다. 소스는 강조와 시선 흐름을 별도 비평 대상으로 다룹니다.

리듬에는 무엇이 포함되나요?

일관된 시각적 리듬을 만드는 반복 간격, 크기, 행, 카드, 섹션 구분을 살펴봅니다.

보고서는 어떤 형식인가요?

네 차원마다 관찰, 문제, 수정안과 통과/경미/중대 평가를 제공합니다.

OpenDesign

작업 요청과 디자인 결과물을 한곳에 모으세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-composition/SKILL.md