사용 가이드로 건너뛰기
Micro-Interaction Spec작성자 Owl-Listener

Micro-Interaction Spec 스킬.

애니메이션 참고 자료만이 아니라 작은 인터랙션 뒤에 있는 동작 방식을 엔지니어링 팀에 전달하세요.

  • 인터랙션 디자인
  • UI 핸드오프
소스 검토 · Micro-Interaction SpecSKILL.md
작업 인터랙션 디자인 산출물 • 하나의 인터랙션에 대한 트리거 및 규칙 명세. • 타이밍과 이징 메모가 포함된 피드백 시퀀스. • 반복, 최초 사용, 접근성 동작. 시작하기 전에 특정 모션 라이브러리는 필요하지 않지만, 대상 기기에서의 테스트는 여전히 필요합니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

하나의 인터랙션을 빠짐없이 명세하기

트리거, 규칙, 피드백, 루프 또는 모드를 중심으로 구성된 집중형 인터랙션 핸드오프 형식입니다.

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

작업 방식

Micro-Interaction Spec는 작은 인터랙션 하나를 완결된 행동 단위로 설명합니다. 트리거가 시작하고, 규칙이 이후 흐름을 결정하며, 피드백이 결과를 전달하고, 루프 또는 모드가 반복과 시간에 따른 변화를 설명합니다. 이 구조는 토글, 즐겨찾기 동작, 당겨서 새로고침, 유효성 검사 신호, 길게 누르기에 적용할 수 있습니다.

모션은 결과물의 일부일 뿐입니다. 시각적 변화, 오디오, 햅틱은 가능한 피드백 채널이며 모든 플랫폼에서 보장되는 기능은 아닙니다. 소스는 로직과 함께 지속 시간, 이징, 접근성 고려 사항을 요구하므로, 세련된 애니메이션이 정의되지 않은 실패 상태나 반복 상태를 가리는 일을 막는 데 도움이 됩니다.

예상 산출물

  • 하나의 인터랙션에 대한 트리거 및 규칙 명세.
  • 타이밍과 이징 메모가 포함된 피드백 시퀀스.
  • 반복, 최초 사용, 접근성 동작.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    트리거 정의

    인터랙션이 제스처, 시스템 이벤트, 조건 중 무엇으로 시작되는지 명시합니다.

  2. 02
    규칙 작성

    피드백 방식을 고르기 전에 순서, 조건, 분기를 설명합니다.

  3. 03
    인지와 반복 명세

    사용자가 무엇을 보거나 느끼는지, 얼마나 지속되는지, 이후 시도에서 무엇이 달라지는지 설명합니다.

02 활용 상황

사용 시기

특정 모션 라이브러리는 필요하지 않지만, 대상 기기에서의 테스트는 여전히 필요합니다.

적합한 경우

  • 엔지니어링 핸드오프짧은 인터랙션이 프로토타입에서는 명확해 보여도 문서화된 동작이 없을 때 유용합니다.
  • 피드백 다듬기의미 있는 확인 피드백과 유용한 정보를 더하지 않는 장식을 구분하는 데 도움이 됩니다.

확인할 한계

  • 한 번에 하나의 인터랙션서로 의존하는 상태가 많은 컴포넌트에는 더 폭넓은 state-machine 모델이 필요합니다.
  • 기기 보장 없음햅틱 또는 오디오 피드백은 대상 플랫폼에서 지원되는지 확인하고 테스트해야 합니다.

준비할 입력

  • 동작과 맥락명세할 정확한 컨트롤, 제스처 또는 이벤트를 지정합니다.
  • 로직과 조건성공, 거부, 반복 동작의 처리 방식을 제공합니다.
  • 플랫폼 제약모션 설정, 지원되는 피드백 채널, 성능 제한을 명시합니다.

03 핵심 결정

중요한 결정

  1. 루프를 명시적으로 정의

    반복 동작은 매번 같은 피드백을 재생하는 대신 최초 사용과 다른 반응이 필요할 수 있습니다.

  2. 이징보다 로직이 먼저

    접근성을 위해 애니메이션을 제거하더라도 명세는 계속 유용합니다.

04 예시 브리프

집중형 브리프 시도하기

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

설정 검토

저장소에 문서화된 설치 방법을 사용하고 참조된 보조 파일을 유지하세요. 이 항목은 실행 가능한 애플리케이션이 아니라 집중형 디자인 방법을 설명합니다.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/micro-interaction-spec/SKILL.md

특정 모션 라이브러리는 필요하지 않지만, 대상 기기에서의 테스트는 여전히 필요합니다.

하나의 산출물로 시작

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

예시 브리프
기사를 읽기 목록에 저장하는 동작에 micro-interaction-spec를 사용하세요. 클릭 트리거, 저장 대기 및 저장 실패 규칙, 시각적 확인, 반복 클릭 동작, 모션 감소 대안을 정의하세요. 이 인터랙션으로 범위를 한정하고 웹에서 햅틱이 지원된다고 가정하지 마세요.

결과 확인

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

  • 트리거와 결과 상태가 명확합니다.
  • 반복 활성화에 대한 결과가 정의되어 있습니다.
  • 필수 피드백이 모션 감소 환경에서도 유지됩니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록은 스킬이 함께 제공된다는 뜻이 아니며, 외부 도구, 자격 증명, 소프트웨어 의존성이 포함된다는 뜻도 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

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

소스 소유자
Owl-Listener
라이선스
MIT
검토한 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
트리거, 규칙, 피드백, 루프 또는 모드를 중심으로 구성된 집중형 인터랙션 핸드오프 형식입니다.

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

06 시작 전 질문

시작 전 질문

애니메이션 전용인가요?

아닙니다. 이 프레임워크에는 트리거, 로직, 피드백, 반복이 포함됩니다. 애니메이션은 피드백 옵션 중 하나입니다.

상태 머신과는 어떻게 다른가요?

집중형 인터랙션의 경험을 명세합니다. 상태 머신은 더 큰 상태 집합과 유효한 전환을 빠짐없이 모델링합니다.

모든 인터랙션에 소리나 진동을 사용해야 하나요?

아닙니다. 소스는 고려할 채널을 나열할 뿐이며, 제품 맥락과 플랫폼에 따라 적절한 채널이 결정됩니다.

OpenDesign

다음 디자인 반복을 위한 여유를 만드세요.

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

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/micro-interaction-spec/SKILL.md