Motion lab · internal tool · by 김용희

ISSUELINKER여섯 서비스의 이슈를 한 화면에서 보고, 코드 수정은 내 PC의 Claude Code로.

Sentry · GitLab · WorxBoard · Notion · Jira · Grafana의 이슈를 한 목록으로 모으고, 이슈별로 코드 수정 → 로컬 커밋 → push·MR 초안까지 만듭니다. 머지는 사람이 합니다. FE 개발자 김용희가 6주 동안 만든 사내 도구를, 실제 흐름대로 움직이는 데모 10개로 소개합니다.

WHAT이슈 6곳 → 한 목록사내 웹은 조회 전용, 토큰은 PC Keychain에만
HOWPC 로컬 + Claude Code CLI커밋과 push·MR은 각각 확인 화면의 버튼으로
NOT YET야간 자동 실행 · 효과 측정10번 데모 아래에 그대로 적었습니다
6연동 서비스
40커밋 (머지 제외)
686테스트 전부 통과
5PC 연결 슬롯
+35,939추가된 줄
Layout · FLIP

여섯 서비스, 한 목록

서비스별 카드에 흩어진 이슈 행이 제자리에서 날아와 하나의 작업함으로 합쳐집니다. 합친 뒤 서비스 칩을 누르면 실제 앱처럼 와이프가 지나가며 목록이 바뀝니다.

  • 연동6개 서비스
  • 이동800ms · lock · 32ms 간격
  • 필터 전환wipe 750ms · lock
  • 카드번호 외곽선 · 스포트라이트
issue-linker · 작업함SAMPLE · 예시 이슈SPLIT · 6 SOURCES
전체 이슈12ONE LIST
    카드 위에 마우스를 올리면 스포트라이트
    Security · Handshake

    pairing 연결

    사내 웹은 조회만 하고, 쓰기와 토큰은 PC 로컬 서비스에만 있습니다. PC가 일회용 코드를 내주고, 웹이 그 코드로 세션을 받습니다. 토큰은 Keychain 밖으로 나가지 않습니다.

    • 코드일회용 · 5분
    • 바인딩loopback 127.0.0.1
    • 검사Origin · Host
    • 세션8시간
    • 슬롯5칸 (3 → 5 확장)
    web ⇄ companionSIMULATION · 코드는 연출용IDLE

    사내 웹 READ-ONLY

    PC 연결 슬롯
    12345
    pairing 코드 입력
    SESSION · 8h
    웹이 받는 것
    • 이슈 목록 · 상세 (조회)
    • 서비스 토큰
    • 셸 명령 실행 API
    대기

    PC 로컬 서비스 WRITE

    127.0.0.1:43121 · loopback only
    ------
    일회용 코드 · 5분 후 만료
    • loopback 바인딩
    • Origin 검사
    • Host 검사
    • 코드 1회 소모
    Keychain · 서비스 토큰

    연결 시작을 누르면 한 단계씩 진행합니다.

    Flow · Human gates

    이슈에서 MR까지

    이슈를 고르면 실행 대상(폴더·브랜치·미커밋)을 먼저 확인하고, 터미널과 같은 설정으로 claude -p를 돌립니다. 로컬 커밋과 push·MR은 각각 버튼을 눌러야 진행되고, 머지는 앱이 하지 않습니다.

    • 실행 엔진Claude Code CLI 단일
    • 승인 지점2개 · 버튼
    • MR 담당자올린 사람 · 리뷰어 없음
    • 분석 모드샌드박스 · 쓰기 차단
    issue → claude -p → commit → push·MRSIMULATIONREADY
    Git · Conflict resolve

    merge --no-ff 충돌 해소

    PR 준비 때 선택한 타겟을 매번 fetch해 비교하고, 머지 커밋으로 받아옵니다. 충돌은 해소 Claude가 공통 기준으로 충돌 파일만 고치고, 앱이 범위와 충돌 표시를 검사한 뒤에야 머지 커밋을 만듭니다.

    • squash 옛 버전ours
    • 남의 새 변경양쪽 병합
    • 판단 불가merge 취소 · 질문
    • 중단 조건미커밋 · stale · 다른 Git 작업
    PR 준비 · 타겟 수신SIMULATION · 예시 파일IDLE
    target · 선택한 타겟 내 작업 브랜치 fetch · 새 커밋 2 merge --no-ff push · 버튼으로
    하지 않는 것
    rebaseresetpush --force

    시나리오를 고르고 PR 준비 실행을 누르세요.

    Component · CRT sheet

    작업 대화 셸

    어느 화면에서든 아래에서 올라오는 amber CRT 바텀시트입니다. 스캔라인·비네트·you@issue-linker:~$ 프롬프트 위로 Claude의 스트림 이벤트가 대화 기록으로 쌓이고, 실행 중 보낸 후속 요청은 대기열에 들어갑니다.

    • 전원sh-on 750ms
    • 타이핑26ms / 글자
    • 후속 요청대기열
    • 보관이슈별 저장 · 복원
    작업 대화 · 현재 페이지SIMULATION · 실제 출력 아님
    Input · Autocomplete

    / 스킬 자동완성

    작업 대화 입력창에서 /를 치면 저장소 스킬, PC 공통 스킬, 플러그인 스킬, CLI 내장 명령이 한 목록에 뜹니다. 직접 입력해 보세요. 실행은 터미널 Claude Code CLI와 같습니다.

    • 출처저장소 · PC 공통 · 플러그인 · CLI
    • 키↑ ↓ · Tab/Enter · Esc
    • 정렬앞부분 일치 우선
    작업 대화 입력목록은 예시
    저장소PC 공통플러그인CLI 내장
    / 열기↑↓ 이동Tab·Enter 선택Esc 닫기
    Typography · data-fx

    디코드 · 카운트업

    숫자는 0부터 올라오고 이름은 뒤섞인 글자에서 풀려나옵니다. 실제 앱과 같은 방식으로, DOM의 글자는 처음부터 최종값이고 움직이는 것은 data-fx 덮개뿐입니다. 아래 판독값에서 두 값을 비교해 보세요.

    • 카운트업1100ms · ease-out quart
    • 디코드380ms + 18ms/글자
    • 스크린리더최종 텍스트만 읽음
    • 기준2026-10-14
    git log · docs/state2026-09-03 → 10-14
    커밋40머지 제외 · 머지 1건 별도
    테스트686node:test 96개 파일 · 전부 통과
    연동 서비스6Sentry · GitLab · WorxBoard · Notion · Jira · Grafana
    PC 연결 슬롯53 → 5 확장
    추가된 줄+35,939삭제 −3,099 · 변경 파일 687
    소스 줄~24,000JS · MJS · HTML · CSS, 약
    추적 파일211companion 36개 · Node 기본 모듈만
    작업 기록9docs/state 날짜별 · summary 1,084줄
    월별 커밋
    9월8
    10월32
    DOM
    —
    화면
    —
    이름 변천 · 10/13 확정
    Night Shift 니가해라 코드수정 Issue assemble Issue Linker

    저장소 이름도 같은 날 night-shift → issue-linker로 바꿨습니다.

    Transition · Scan beam

    6주 작업 로그

    실제 작업일 기준 타임라인입니다. 빔이 지나간 줄부터 뒤섞인 글자가 풀립니다. 여기서도 덮개 방식이라 스크린리더는 처음부터 정상 문장을 읽습니다.

    • 빔 이동2.6s · in-out cubic
    • 줄 해독덮개 디코드
    • 작업일11일 기록
    docs/state · git logIDLE
    Motion Lab · Techniques

    앱에 들어간 모션 기법

    10/13 전체 화면 개편 때 실제 앱에 넣은 기법 넷을 따로 떼어 시연합니다. 앱에서는 밝은 네이비·블루 테마로 들어갔고, 여기서는 이 랩의 색으로 보여 줍니다. 모션 축소 설정이면 앱에서도 전부 꺼집니다.

    • stampcubic-bezier(.3,1.6,.4,1)
    • lockcubic-bezier(.7,0,.2,1)
    • easecubic-bezier(.2,.7,.1,1)

    STAMP EASING 버튼 · 배지 · 카운트

    살짝 넘쳤다가 제자리에 찍히는 커브입니다. 같은 거리를 stamp와 ease로 비교합니다.

    --stamp
    --ease
    작업 대화 3
    COMMITTED

    SPOTLIGHT 연결 카드 · 통계 칸

    포인터 위치를 --mx --my로 넘겨 카드 안 radial 조명을 움직입니다. 터치 화면에서는 저절로 돕니다.

    Grafana · 연결됨

    dashboard panels · 4xx/5xx · logs

    radial-gradient 13rem · opacity .3s

    TAB WIPE 목록 전환

    탭을 바꾸면 띠 하나가 목록 위를 쓸고 지나가며 제목이 디코드됩니다.

    Sentry 이슈

    wipe 750ms · lock · 폭 38%

    SCAN BEAM 상세 모달

    상세가 열리면 스탬프로 튀어나오고, 빔이 위에서 아래로 훑으며 제목은 디코드, 숫자는 카운트업됩니다.

    DETAIL · 예시

    목록 날짜 정렬 오류

    이벤트
    128
    사용자
    37
    댓글
    4
    Decisions · Honest ledger

    설계 판단과 아직 안 한 것

    카드를 누르면 뒤집혀 이유가 나옵니다. 그 아래에는 아직 하지 않은 일과 확인하지 못한 일을 그대로 적었습니다.

    • 판단8장
    • 틸트±10° · pointer
    • 뒤집기900ms · stamp
    AGENTS.md · docs/state/summary.md8 DECISIONS · 5 OPEN
    Not yet · 아직 안 한 것
    • 야간 자동 실행 · 예약야간 러너 코어는 옮겨 왔지만 웹과 PC 서비스에서 아직 실행하지 않습니다.
    • Sentry 자동 트리아지아직 옮기지 않았습니다.
    • 서명된 배포 설치기아직 만들지 않았습니다.
    • 실서버 반영 확인Jira 상태·댓글 등록과 WorxBoard OAuth 로그인은 일부만 실서버에서 확인했습니다.
    • 정량 효과처리한 이슈 수나 줄어든 시간 같은 효과는 아직 재지 않았습니다.