[매력일자리 4주차 복습노트 및 솔직 후기] 프로토파이 인터랙션 구현부터 CSS Grid/Flexbox 기초, 클로드 MCP 플러그인 설치까지

안녕하세요! 서울시 매력일자리 프로그램에 참여하며 어느덧 4주차 강의를 마치고 복습노트 및 느낀점을 정리해 봅니다. 이번 주차에는 강력한 프로토타이핑 도구인 ProtoPie(프로토파이)와 웹 레이아웃의 핵심인 CSS Grid/Flexbox, 그리고 AI 협업을 위한 클로드(Claude) 및 피그마 MCP 플러그인 설치와 지원금 결제 기준까지 매우 알차고 실용적인 내용을 다루었습니다.

Q1. 프로토파이의 핵심 인터랙션과 주요 액션의 종류는? (기초 실습)

프로토파이는 레이어, 그룹, 트리거(Add Trigger), 프리뷰가 핵심 구조를 이룹니다. 실습에서는 사각형(Rectangle)과 텍스트를 만들고, '텍스트+배경 도형'을 의미 있는 이름(Start, Tap 등)의 그룹으로 묶어 타깃 레이어를 정확히 지정한 뒤 인터랙션을 부여했습니다.

트리거 종류 (Trigger)	주요 특징 및 실습 동작 내용
Start	앱/화면이 시작되자마자 자동 실행 (예: Move 액션과 Duration 속도 조절을 통한 자동 이동)
Tap	클릭/탭 시 실행 (Move, Rotate, Fill 색상 변경 등 적용)
Double Tap	더블클릭 시 실행 (Opacity 투명도를 100%에서 50%로 변경)
Long Press	길게 누를 때 실행 (Scale 크기 변경 시, 자연스러운 동작을 위해 중심점(Origin)을 가운데로 설정)
Drag	드래그 제어 (X, Y 방향 자유 이동 및 제한 범위(limit) 설정 가능)

• 기타 주요 액션: 상태를 원래대로 되돌리는 Reset, 다른 씬으로 이동하는 Jump, 현재 상태에 따라 동작을 분기하는 Condition 등이 있습니다.
• 피그마(Figma) 연동: 화면 구성, 스크롤 영역, 슬라이더, 이미지 레이아웃 등은 피그마에서 먼저 디자인한 뒤 프로토파이의 Import 기능으로 가져오는 것이 실무적으로 훨씬 효율적입니다.

Q2. 스크롤/페이징 컨테이너와 입력값(Input) 처리는 어떻게 구현하나요?

1) 컨테이너 활용 (Scroll & Paging)

• Scroll Container: 고정 헤더는 컨테이너 밖에 두고, 전체 화면 중 스크롤되어야 하는 영역의 콘텐츠만 내부로 분리해 넣어 세로/가로 스크롤을 구현합니다.
• Paging Container: 이미지 슬라이더나 카드 슬라이드처럼 가로 방향 스와이프형 페이지 단위 전환을 구현할 때 사용합니다.

2) Input 요소와 텍스트 반영 공식

입력창에 텍스트를 입력하고 버튼을 누르면 결과가 반영되는 인터랙션입니다.

1. 결과 텍스트 컨테이너를 처음에는 Opacity 0으로 숨깁니다.
2. Submit 버튼 클릭 시 해당 컨테이너를 보이게(Opacity 100) 변경합니다.
3. 변경 대상 결과 텍스트의 Content를 공식(Formula/Fx)을 통해 Input1.text 같은 입력값 참조 소스로 연결하여 치환합니다. (예: '보보' 입력 시 'Hi 보보' 출력)

3) 조건문(Condition)을 활용한 토글 스위치 및 라디오 버튼 컴포넌트

• 토글 스위치: 둥근 사각형 배경과 원형 핸들을 배치한 뒤, 현재 X축 위치를 기준으로 조건문(Condition)을 넣어 왕복 이동을 제어합니다. (안정적인 동작을 위해 = 보다는 >=, <= 조건을 권장합니다.)
• 아이콘 상태 변경: 하트 아이콘의 색상·크기를 조합해 '좋아요'를 표현할 때, 컴포넌트 상태에서 색상이 안 바뀌면 Detach Instance 하거나 내부 실제 레이어를 타깃으로 지정해야 합니다.
• 라디오 버튼 컴포넌트: 바깥 원과 안쪽 원 구조에서 클릭 시 안쪽 원의 Opacity를 100 ↔ 0으로 토글합니다. Condition을 이용해 0일 때는 100으로, 100일 때는 0으로 변경되게 만든 후 Component로 등록하여 재사용합니다.

💡 프로토파이 활용에 대한 느낀점:
프로토파이는 고급 인터랙션 표현에 매우 강하지만 과도한 시간을 쓰기보다 핵심 흐름, 보여줘야 할 핵심 인터랙션, 사용자 경험 설명용 동작에 집중하는 것이 효율적이라는 관점을 배웠습니다.

Q3. CSS Grid와 Flexbox, Position의 핵심 개념과 차이는 무엇인가요?

웹 레이아웃 구현을 위해 구조적 배치를 담당하는 Grid, 정렬과 흐름을 제어하는 Flexbox, 위치를 제어하는 Position의 기초를 다졌습니다.

1) CSS Grid (구조적 배치)

display: grid를 부모에 선언하고 grid-template-columns/rows, gap을 사용합니다.

• 비율 분배: 1fr 1fr 1fr은 동일 비율 3칸을 의미하며, repeat(3, 1fr)로 축약 가능합니다. (12컬럼 그리드는 repeat(12, 1fr))
• 레이아웃 배치 방식: 컬럼 번호 지정(헤더/푸터에 1 / -1 사용하여 전체 차지) 또는 grid-area로 이름을 지정해 부모에서 grid-template-areas로 배치할 수 있습니다.
• 반응형 레이아웃 (auto-fit, minmax): repeat(auto-fit, minmax(200px, 1fr)) 구조는 아이템 최소 크기를 200px로 보장하되 공간이 남으면 비율 확장을, 부족하면 자동으로 줄바꿈(레이아웃 아래로 이동)을 수행하여 카드형 목록이나 갤러리에 유용합니다. span을 활용하면 가로/세로 칸을 확장할 수 있습니다.

2) CSS Flexbox (정렬 및 흐름 제어)

부모에 display: flex를 주면 자식 요소들이 기본적으로 가로(flex-direction: row) 방향으로 정렬됩니다.

• 주요 속성: 주축 정렬인 justify-content(실무에서는 center와 양끝 정렬인 space-between이 자주 쓰이며, 그 외 flex-start, flex-end, space-around, space-evenly가 있음) 및 교차축 정렬인 align-items(start, center, end, stretch)가 있습니다.
• 반응형 활용: 넓은 화면에서는 row, 좁은 화면에서는 미디어 쿼리를 통해 flex-direction: column으로 전환하는 패턴이 흔합니다. 또한, 미디어 쿼리 안에서 order 속성을 조정하면 HTML 순서를 바꾸지 않고도 데스크톱(1-2-3)과 모바일(2-1-3)의 시각적 배치 순서를 변경할 수 있습니다.

3) Position (위치 제어 예고)

• relative, absolute, fixed 키워드가 중요합니다.
• 특히 absolute는 요소가 일반적인 문서 흐름에서 빠져 붕 떠서 배치되는 특성이 있으며, top, left, right 등으로 위치를 제어합니다. 

Q4. 클로드(Claude)와 피그마 MCP 플러그인 설치

강의 후반부에는 클로드 데스크톱 앱 설치 및 윈도우/맥 환경별 명령어 기반 설치를 실습했습니다.

■ 윈도우 환경 변수(PATH) 설정 절차

클로드나 관련 도구가 경로를 인식하지 못하는 명령어 오류가 발생하면 아래 절차대로 환경 변수를 등록해야 합니다.

1. 제어판 → 시스템 → 고급 시스템 설정 → 환경 변수로 이동합니다. (또는 윈도우 검색창에 환경 변수 입력)
2. 시스템 변수 영역에서 Path를 선택하고 편집 또는 더블클릭합니다.
3. 새로 만들기를 선택한 후, 복사해 둔 안내 프로그램 경로를 붙여넣고 저장합니다.

■ 피그마 MCP 플러그인 및 명령어 설치

• 피그마에서 Talk to Figma MCP 플러그인을 실행하면 Connecting 화면이 열립니다. 이후 로컬 환경에서 설치를 이어갑니다.
• 설치 문서에 제공된 install 명령어를 복사하여 터미널(윈도우는 PowerShell/명령 프롬프트)에 입력하고 실행합니다.
• successful` 메시지가 뜨면 정상 설치된 것이며, 이후 추가 명령어를 한 번 더 실행하여 연결을 완료합니다. 명령어가 인식되는데 동작하지 않을 때는 동일 명령어를 다시 입력하여 재시도하면 정상 동작합니다.

💡 4주차 FAQ

Q. 프로토파이에서 트리거를 걸었는데 프리뷰에서 동작이 이상해요.
A. 대상 레이어(그룹 내부의 실제 사각형 등)가 정확히 지정되었는지, 현재 위치값(X/Y) 기준 입력을 확인했는지, 그리고 회전 중심점(Origin)이 올바르게 잡혀 있는지 검토해야 합니다. 결과는 항상 Preview 창을 통해 즉시 확인하며 수정해 나갑니다.

Q. CSS Grid에서 오토핏(auto-fit)과 미니맥스(minmax)는 언제 쓰나요?
A. 반응형 화면에서 카드형 목록이나 썸네일, 갤러리 배치를 할 때 유용하며, 공간이 부족하면 자동으로 다음 줄로 내려가는 구조를 짤 때 활용됩니다.

Q. 클로드 MCP 플러그인 설치 중 명령어가 먹통이 되거나 에러가 납니다.
A. 윈도우 사용자는 프로그램 경로가 시스템 환경 변수(Path)에 등록되었는지 먼저 확인하고, 명령어가 인식되더라도 오류가 날 때는 동일 명령어를 다시 입력해 재시도해 보세요.

 

솔직하게 해당 과정에 대한 느낀 점

이로써 4주차까지의 강의 노트를 마무리 지었는데요. 저는 이 과정을 하면서 생각보다 많은 도움을 받고있진 않고있어요. 왜냐하면 벌써 프로젝트를 해야되는 기간이 왔는데 이제서야 클로드 코드, MCP연결, cursor 활용을 배우고있거든요. UIUX 디자인 과정인데 여태까지 디자인을 배운다기보단 코딩과정?을 배웠고 이마저도 강사님이 코드치는 속도가 상당히 빨라서 따라가기 벅찼습니다. 또한 디자인을 배우진않고 피그마 활용법을 배운거라 개인적으로 굉장히 아쉬움이 남았습니다.