2장. UI3 인터페이스와 작업 환경 — 새 사이드바, 툴바, 액션 메뉴

예전 피그마를 오래 써 온 사람일수록 UI3에서 잠깐 멍해진다. 분명 아는 기능인데 보이지 않고, 손은 자꾸 예전 자리로 가기 때문이다. 문제는 기억력이 나빠서가 아니다. UI3는 버튼 몇 개를 옮긴 업데이트가 아니라, 피그마를 읽는 방식 자체를 바꾼 재배치이기 때문이다. 캔버스를 더 넓게 보여 주고, 도구를 맥락에 따라 묶고, Design·Dev Mode·Slides 같은 여러 제품 사이를 더 비슷한 감각으로 오갈 수 있게 만드는 것이 UI3의 목표다.¹

그래서 이 장의 목적은 단순하다. 최신 피그마에서 길을 잃지 않게 만드는 것. 어디에 무엇이 있는지 외우는 것보다 더 중요한 것은, 화면을 네 구역으로 나눠 이해하는 일이다. 한 번 이 질서를 머리에 넣으면, 버튼 위치가 조금 바뀌어도 다시 헤매지 않는다.

UI3는 네 구역으로 읽으면 쉽다

UI3 화면은 복잡해 보이지만, 사실 역할이 꽤 명확하다.

• 왼쪽은 파일과 구조를 보는 곳이다. 페이지, 레이어, 에셋, 변수, 파일 관련 정보가 모인다.

• 가운데는 실제 작업이 벌어지는 캔버스다. 디자인은 여기서 만든다.

• 오른쪽은 지금 선택한 대상의 속성을 조정하는 곳이다. 선택이 바뀌면 내용도 바뀐다.

• 아래는 도구와 모드 전환의 출발점이다. 선택 툴, 프레임, 텍스트, 액션 메뉴, Dev Mode가 여기 있다.¹

이 구분만 이해해도 절반은 끝난다. 예전 피그마에서는 "기능이 어디 있지?"라는 느낌으로 찾았다면, UI3에서는 "이건 파일 전체에 관한 일인가, 지금 선택한 객체에 관한 일인가, 아니면 새 작업을 시작하는 일인가?"라고 먼저 묻는 편이 빠르다.

간단히 말하면 이렇다. 파일 전체를 다루면 왼쪽, 선택한 대상을 만지면 오른쪽, 뭔가 시작하거나 전환하면 아래다. UI3는 이 규칙으로 훨씬 잘 읽힌다.

왼쪽 사이드바 — 파일의 지도는 여기 있다

UI3에서 가장 먼저 익숙해져야 할 곳은 왼쪽이다. 왼쪽 사이드바는 이제 단순한 레이어 목록이 아니라, 파일 전체를 다루는 진입점에 가깝다. 프로젝트와 파일 이름, 페이지와 레이어 구조, 에셋 접근, 그리고 점점 더 많은 파일 수준 기능이 이쪽으로 모이고 있다.¹

특히 중요한 변화는 "선택 상태와 상관없이 접근해야 하는 기능"이 왼쪽으로 이동했다는 점이다. 대표적으로 변수 컬렉션은 예전처럼 선택한 레이어를 통해 우연히 발견하는 구조보다, 파일 차원에서 언제든 열 수 있는 방향으로 이동했다. 에셋 탭과 찾기/바꾸기, 파일 알림도 왼쪽 탐색 바에 모이는 흐름이다.²

이걸 실무 감각으로 바꾸면 이해가 쉽다.

• 페이지와 레이어는 지금 파일이 어떻게 조직되어 있는지 보는 곳이다.

• Assets는 재사용할 것들을 꺼내 쓰는 곳이다.

• Variables는 색상, 간격, 반경 같은 규칙을 파일 단위로 관리하는 곳이다.

• 파일 알림은 라이브러리 업데이트나 폰트 문제처럼, 작업 전체에 영향을 주는 신호를 확인하는 곳이다.²

여기서 꼭 기억할 문장이 하나 있다. 왼쪽은 "무엇이 들어 있나"를 보는 곳이고, 오른쪽은 "지금 고른 것이 어떻게 생겼나"를 다루는 곳이다.

이 차이를 모르면 변수 찾다가 오른쪽 패널만 뒤지고, 파일 이름 바꾸려다 캔버스를 멍하니 보게 된다. 반대로 이 차이를 알면 UI3가 갑자기 질서정연해 보인다.

또 하나 좋은 변화는 UI를 줄일 수 있다는 점이다. 캔버스에 더 집중하고 싶다면 왼쪽 패널에서 UI 최소화를 켜거나 Shift + \ 단축키를 사용할 수 있다. 그러면 왼쪽과 오른쪽 패널이 접히고, 선택한 객체가 있을 때만 오른쪽 속성이 잠깐 다시 나타난다.¹ 작은 화면에서 특히 강력하다. 노트북 작업이 갑자기 숨통이 트인다.

아래 툴바 — 낯설지만, 생각보다 합리적이다

UI3에서 가장 당황스러운 변화는 툴바가 위가 아니라 아래로 내려온 것이다. 처음 며칠은 손이 허공을 헤맨다. 하지만 역할만 이해하면 금방 적응된다. 위쪽 공간을 비워 캔버스를 더 넓게 쓰려는 의도가 분명하기 때문이다.¹

아래 툴바에는 대체로 이런 것들이 있다.

• 선택, 손, 스케일 같은 기본 조작 도구

• 프레임, 섹션, 슬라이스 같은 구조 도구

• 도형, 펜, 연필, 텍스트 같은 생성 도구

• 코멘트 같은 협업 도구

• Actions와 Dev Mode 같은 전환 도구

중요한 건, 툴바를 이제 "세부 설정판"으로 보지 않는 것이다. 세부 조정은 대부분 오른쪽 속성 패널에서 한다. 아래 툴바는 무언가를 시작하고, 모드를 바꾸고, 빠르게 진입하는 장소다.

예를 들어 프레임을 만들 때는 아래에서 시작하지만, 프레임의 너비·높이·자동 레이아웃·패딩을 만지는 순간 시선은 오른쪽으로 가야 한다. 텍스트도 마찬가지다. 아래에서 T를 눌러 시작하고, 실제 타이포그래피 조정은 오른쪽에서 한다. 즉, 아래는 출발선이고 오른쪽은 조정실이다.

이 원리를 이해하면 툴바 위치가 조금 덜 억울해진다.

오른쪽 속성 패널 — 이제는 "선택 기반 편집"이 더 분명하다

오른쪽 속성 패널은 UI3의 핵심이다. 예전에는 익숙한 이름을 눈으로 찾는 방식이었다면, 이제는 선택한 객체의 종류에 맞춰 논리적으로 묶인 섹션을 읽는 방식에 가깝다.¹

특히 UI3에서 자주 만나는 섹션은 이렇다.

• Layout: 너비, 높이, 리사이징, 프레임 관련 속성

• Auto layout: 프레임에 자동 레이아웃을 적용하면 Layout이 이 문맥으로 확장됨

• Position: X, Y, 정렬, 회전, 제약 조건 같은 위치 관련 속성

• Appearance: 채우기, 선, 효과, 블렌드 모드, 모서리 반경 등 시각 속성

• Typography: 텍스트 관련 설정

이 구조가 좋은 이유는, 비슷한 성격의 컨트롤이 함께 있기 때문이다. 예전에는 자동 레이아웃 값과 크기 조정 동작을 왔다 갔다 하며 봤다면, UI3는 그 흐름이 훨씬 자연스럽다.¹

처음 UI3를 배울 때는 속성 레이블을 켜 두는 것이 좋다. 아이콘만 보면 감으로 눌러야 했던 부분에 이름표가 붙어, "아, 이게 모양, 이게 위치, 이게 타이포그래피구나" 하고 빠르게 적응할 수 있다.¹

또한 오른쪽 패널 맨 위에는 선택 작업이 들어간다. 마스크 만들기, 컴포넌트 생성, 불리언 연산처럼 선택한 객체에 바로 적용할 수 있는 작업이 헤더 쪽에 모인다.¹ 예전 감각으로 상단 메뉴를 찾기보다, 먼저 오른쪽 상단 주변을 보는 습관이 훨씬 유리하다.

예전 피그마 기억으로 가장 많이 헤매는 위치들

UI3에서 길을 잃는 지점은 대체로 비슷하다. 자주 헷갈리는 항목만 한 번에 정리해 두면 적응 속도가 확 올라간다.

이 표는 암기용이 아니라 번역표에 가깝다. 예전 단어를 새 단어로 치환하는 과정이라고 생각하면 된다. 피그마가 기능을 없앤 것이 아니라, 더 문맥에 맞는 자리에 옮긴 경우가 대부분이다.

예를 들어 텍스트 스타일이 안 보인다고 느끼는 순간, "텍스트가 사라졌다"가 아니라 "이제 Typography라는 더 넓은 범주 안으로 들어갔구나"라고 생각하면 된다. 절대 위치도 마찬가지다. UI3는 자동 레이아웃을 기본 질서로 두고, 그 질서를 예외적으로 무시하는 상태를 Ignore auto layout이라고 더 정확하게 부른다.¹

이 이름 변경은 단순한 번역 문제가 아니다. 피그마가 어떤 사고방식을 기본값으로 밀고 있는지를 보여 준다.

Actions 메뉴 — UI3의 만능 검색창

UI3를 빨리 익히는 가장 좋은 방법은 메뉴를 외우는 것이 아니라 Actions 메뉴를 습관화하는 것이다. Command + K 또는 Ctrl + K로 열 수 있는 이 메뉴는 사실상 피그마의 범용 명령 팔레트다.³

여기서 할 수 있는 일은 생각보다 많다.

• Figma AI 도구 실행

• 자주 쓰는 생산성 작업 실행

• 에셋 검색

• 플러그인과 위젯 실행³

실무에서는 이렇게 쓰면 좋다.

정렬이 어디 있나 잠깐 헷갈리면 Actions를 열고 align이라고 친다. 눈금자 켜기, 레이아웃 가이드 켜기, 버전 히스토리 보기, 내보내기, 같은 인스턴스 선택, 이미지 배치 같은 일도 여기서 바로 찾을 수 있다.³ 즉, Actions는 "어디 있지?"라는 질문을 "이름만 치면 된다"로 바꿔 준다.

UI3에서 특히 강한 이유는, 이 메뉴가 단순한 단축키 모음이 아니기 때문이다. AI 도구와도 연결된다. 예를 들어 레이어 이름 정리, 중복 텍스트 교체, 문장 톤 다듬기, 이미지 생성 같은 기능이 여기 모일 수 있다.³ 조직 설정이나 계정 상태에 따라 보이는 항목은 다를 수 있지만, 원리는 같다. 모를 땐 먼저 Actions를 열어 본다.

이 습관이 생기면 UI3 적응 속도가 확 달라진다. 마치 큰 도시에서 지하철 노선을 다 외우기 전에, 우선 길찾기 앱을 잘 쓰는 것과 비슷하다.

작업 환경은 "넓게 보기"와 "빨리 전환하기"가 핵심이다

UI3는 화면을 예쁘게 바꾼 것이 아니라, 작업 리듬을 바꿨다. 그 핵심은 두 가지다.

하나는 캔버스를 더 넓게 보는 것이다. 패널을 접고, 필요한 순간에만 다시 열고, 작업물 자체에 더 집중하게 만든다.¹ 작은 화면에서는 이 차이가 크게 느껴진다.

다른 하나는 모드 전환을 빠르게 하는 것이다. Design에서 작업하다가 Dev Mode로 건너가고, 다시 돌아오는 흐름이 예전보다 눈에 잘 들어온다.¹ 피그마가 단순한 디자인 편집기가 아니라, 디자인-프로토타이핑-핸드오프-생성형 워크플로우가 이어진 플랫폼이라는 점을 UI 자체로 보여 주는 셈이다.

그래서 UI3를 잘 쓰는 사람은 모든 버튼의 위치를 외운 사람이 아니다. 패널의 역할을 나눠 이해하고, 필요한 순간에 최소한의 움직임으로 전환하는 사람이다.

처음 10분 적응 훈련

UI3가 낯설다면, 실제로는 공부보다 훈련이 더 효과적이다. 아래 순서대로 10분만 써 보자.

1. 오른쪽 패널에서 속성 레이블을 켠다. 이름표가 붙으면 지형이 빨리 읽힌다.¹

2. 프레임 하나를 선택하고, Layout → Auto layout → Position → Appearance 순서로 훑는다. 오른쪽 패널의 논리를 몸에 익히는 단계다.

3. 텍스트 레이어를 선택해 Typography를 확인한다. 예전의 Text 패널이 어디로 갔는지 눈으로 익힌다.

4. Ctrl/Cmd + K로 Actions를 열고 rulers, export, rename, plugin 같은 단어를 검색해 본다.³

5. Shift + \로 UI 최소화를 켰다가 끄고, 캔버스 선택 시 오른쪽 패널이 어떻게 다시 열리는지 확인한다.¹

6. 아래 툴바에서 Dev Mode로 들어갔다가 다시 돌아온다. 디자인과 핸드오프가 한 도구 안에서 어떻게 이어지는지 감각을 잡는다.¹

이 여섯 단계만 해도 "UI3가 너무 바뀌었다"는 막막함이 "아, 구조는 오히려 더 명확하네"로 바뀐다.

자주 하는 질문으로 끝내는 UI3 정리

변수는 왜 오른쪽에서 안 보일 때가 있나요?
변수는 레이어 선택 맥락에 종속되기보다 파일 차원에서 접근해야 할 일이 많다. 그래서 왼쪽 탐색 바 쪽 진입점으로 옮겨 가는 흐름을 이해하는 것이 중요하다.²

플러그인은 사라졌나요?
사라지지 않았다. 이제는 아래 툴바의 Actions에서 여는 쪽이 기본 동선이다.³

텍스트 설정이 너무 멀어진 것 아닌가요?
처음엔 그렇게 느껴진다. 하지만 텍스트를 단순 문자 입력이 아니라 타이포그래피 시스템으로 다루기 시작하면, Typography라는 이름이 오히려 더 맞다.¹

자동 레이아웃 안에서 자유 배치하려면 어떻게 하나요?
예전의 Absolute position 대신 Ignore auto layout을 찾으면 된다.¹

툴바가 아래에 있는 게 계속 어색합니다.
정상이다. 하지만 UI3에서 툴바는 세부 설정판이 아니라 시작점이다. 클릭 빈도 자체는 생각보다 낮고, 익숙해질수록 오른쪽 패널과 단축키 사용 비중이 더 커진다.

UI3를 익힌다는 것은, 새 지도를 갖는 일이다

예전 피그마의 기억만으로 2026년 피그마를 빠르게 다루기는 어렵다. 하지만 반대로 말하면, UI3의 지도를 한 번 제대로 익히면 이후의 변화는 훨씬 덜 무섭다.

왼쪽은 파일의 지도, 가운데는 캔버스, 오른쪽은 선택한 대상의 속성, 아래는 도구와 전환. 이 네 구역만 머릿속에 분명히 넣어 두자. 그러면 더 이상 "기능이 사라졌다"고 느끼지 않는다. 그냥 자리가 바뀌었을 뿐이라는 사실이 보이기 시작한다.

그리고 그 순간부터 UI3는 낯선 인터페이스가 아니라, 더 큰 일을 하기 위한 작업대가 된다.

참고

¹UI3 탐색하기: Figma의 새로운 UI

²Navigating UI3 – Figma Learn - Help Center

³Use the actions menu in Figma Design