시퀀스 메시지 전달Sequence Message Draw

Sequence Message Draw

시퀀스 메시지 전달

395

도판Fig. 395. 시퀀스 메시지 전달 · Sequence Message Draw · none

재생 속도Speed

행위자 사이의 화살표가 시간 순서대로 그려지고 수신 지점이 강조된다.Message arrows draw between actors in chronological order, highlighting each receiver.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

누가 언제 누구에게 요청하고 응답하는지 이해한다.Shows who sends each request and response, and when.

언제 쓰나Use whenUSE WHEN

클라이언트와 서버의 요청 응답을 설명할 때
여러 역할을 거치는 승인 절차를 보여줄 때

Explain a client, server, and database exchange.
Trace an approval request through several roles.

과용 주의AvoidAVOID

응답 방향과 메시지 순서를 뒤바꾸지 않는다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 스크롤덱Scroll deck 웹 UIWeb UI 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

네 행위자 사이에서 요청선을 0.4초에 그리고 0.6초 간격으로 다음 메시지를 공개한다.

과용 · 나쁜 사례OVERUSE

모든 화살표를 동시에 그려 요청과 응답의 순서가 사라진다.

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
행위자 수	4개	2~6개	가로 간격을 일정하게 둔다.
메시지 간격	600ms	450~900ms	메시지 시작 시각의 차이다.
선 그리기	400ms	250~550ms	수신점까지 선을 공개한다.
이징	none	none \| power2.out \| power2.inOut	데이터의 시간 진행은 none을 유지한다.

GSAP

const tl = gsap.timeline({paused:true});
document.querySelectorAll('.message').forEach((line,i)=>{
  const length=line.getTotalLength();
  tl.fromTo(line,{strokeDasharray:length,strokeDashoffset:length},{strokeDashoffset:0,duration:0.4,ease:'none'},i*0.6);
  tl.fromTo(line.dataset.receiver,{opacity:0.4},{opacity:1,duration:0.2},i*0.6+0.4);
});

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 시퀀스 메시지 전달를 구현해. 행위자 사이의 화살표가 시간 순서대로 그려지고 수신 지점이 강조된다. 행위자 수 4개, 메시지 간격 600ms, 선 그리기 400ms, 이징 none를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 응답 방향과 메시지 순서를 뒤바꾸지 않는다.

Implement Sequence Message Draw for <target> in <file>. Message arrows draw between actors in chronological order, highlighting each receiver. Use actor count: 4; message spacing: 600ms; line duration: 400ms; easing: none in a single paused GSAP core timeline that supports seeking. Preserve message chronology and response direction.

Codex

<파일>의 <대상> 장면에 시퀀스 메시지 전달를 적용해. 행위자 수 4개, 메시지 간격 600ms, 선 그리기 400ms, 이징 none를 사용하고 다음 동작을 구현해: SVG 수평 메시지선을 순서대로 draw하고 HTML 수신 노드 강조를 연결한다. 플러그인과 Math.random 없이 작성하고 0.55초·1.32초·2.2초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 네 행위자 사이에서 요청선을 0.4초에 그리고 0.6초 간격으로 다음 메시지를 공개한다.

Apply Sequence Message Draw to the <target> scene in <file> using actor count: 4; message spacing: 600ms; line duration: 400ms; easing: none. Message arrows draw between actors in chronological order, highlighting each receiver. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.55, 1.32, 2.2 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Preserve message chronology and response direction.

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP

paused 타임라인 하나에 시퀀스 메시지 전달 상태를 넣고 seek(t)로 2.2초 구간을 재현한다. 현재 시간에서 도형을 계산해 프레임 누적을 피한다.

ReelForgeBRIEF TO VIDEO

씬 워커 브리프에 행위자 수 4개, 메시지 간격 600ms, 선 그리기 400ms, 이징 none를 싣고 입력 자료와 초기 도형 좌표를 고정한다. 네 행위자 사이에서 요청선을 0.4초에 그리고 0.6초 간격으로 다음 메시지를 공개한다.

Scrolline DeckSCROLL SCRUB

진행률 0~1을 2.2초 구간에 매핑해 같은 타임라인을 scrub한다. 시간량은 none, 시각 전환은 power2.out을 쓰고 스프링 대신 끝점을 넘지 않는 ease-out을 쓴다.

잘 맞는 조합Pairs well with

Nº 244선 그리기Line DrawLine Draw

Nº 079강조점 순회Focus HandoffFocus Handoff

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo

local/bookforge (claude-skill:bookforge/references/diagrams.md)MIT