keyboard-shortcuts

12 개의 포스트

grammarly

아이디어에서 데모까지 이 (새 탭에서 열림)

Superhuman은 2025년 해커톤을 통해 엔지니어링, 제품, 디자인, 마케팅 등 전 직군이 협업하여 AI 기술을 실제 제품 워크플로우에 어떻게 녹여낼 수 있는지를 탐구했습니다. 참가자들은 Claude Code와 Cursor 같은 최신 AI 도구를 적극 활용해 단 이틀 만에 고도화된 MVP를 구축했으며, 이는 AI 에이전트 시대에 걸맞은 새로운 사용자 경험(UX)과 데이터 활용 방식의 가능성을 입증했습니다. 특히 이번 행사는 기술적 장벽을 넘어 비개발 직군까지 제작 과정에 참여함으로써 AI가 주도하는 '제작의 민주화'를 실현했다는 점에서 큰 의미가 있습니다. ### 모든 곳에서의 Superhuman 커맨드(SCE) * Superhuman Mail의 핵심인 '커맨드 센터' 기능을 브라우저 전체로 확장하여, 이메일뿐만 아니라 Grammarly 등 다양한 도구의 기능을 단축키로 제어할 수 있게 합니다. * 사용자는 마우스 없이 키보드만으로 Grammarly의 교정 제안을 수락(E)하거나 거절(D)하고, 'J'와 'K' 키로 카드 사이를 이동하며 작업을 완수할 수 있는 워크플로우를 제공합니다. * 프론트엔드 개발 경험이 부족한 팀원들도 AI를 활용한 이른바 '바이브 코딩(vibe-coding)'을 통해 단 몇 시간 만에 복잡한 통합 기능을 구현해냈으며, 이는 키보드 중심의 새로운 AI 인터페이스 패러다임을 제시했습니다. ### Coda 내 화이트보드 및 AI 다이어그램 * Coda 문서 내에서 직접 브레인스토밍과 다이어그램 작성을 할 수 있는 화이트보드 기능을 구축하여, 문서 작업과 시각적 협업의 단절을 해소했습니다. * 사용자가 텍스트로 원하는 내용을 설명하면 AI가 이를 즉시 편집 가능한 형태의 다이어그램으로 생성해 주는 기능이 포함되어 있습니다. * 개발 배경이 없는 고객 성공 매니저(CSM)가 Claude Code와 Cursor를 활용해 독자적으로 MVP를 완성했으며, 기능 확장보다는 실제 사용자가 느끼는 UX의 부드러움과 직관성을 최우선으로 정교화했습니다. ### 데이터 통합을 통한 Superhuman Listening * Salesforce, Gong, Zendesk 등 여러 채널에 흩어진 파편화되고 구조화되지 않은 고객 피드백을 하나의 '진실 공급원(Single Source of Truth)'으로 통합하는 프로젝트입니다. * LLM API를 호출하여 고객 지원 티켓에서 긴급도와 감정을 추출하고, 이를 Coda 기반의 제품 로드맵과 연동하여 특정 기능에 대한 고객의 니즈를 정량적으로 파악합니다. * 13명의 다학제 팀이 협업하여 데이터의 노이즈를 제거하고 유의미한 제품 피드백 신호만을 포착하는 모델링 검증에 집중했습니다. ### 포용적 언어 에이전트(Inclusive Language Agent) * 업무 소통 중 무의식적으로 발생할 수 있는 편향되거나 비포용적인 표현을 감지하고, 더 나은 대안을 제안하는 언어 교정 도구입니다. * 언어학자들이 주도하여 단어 선택이 기업 문화와 고객 신뢰에 미치는 영향을 분석하고, AI가 조직 내 신뢰와 기회의 평등을 강화할 수 있도록 설계했습니다. 이번 해커톤의 결과물들은 AI 도구가 단순한 보조를 넘어 개발 생산성을 비약적으로 높이고, 사용자 인터페이스(UI)를 키보드 중심으로 재편할 수 있음을 보여줍니다. 특히 비개발자가 AI의 도움을 받아 복잡한 기능을 직접 구현한 사례는, 향후 제품 개발 프로세스에서 직군 간 경계가 허물어지고 창의적인 아이디어의 실현 속도가 더욱 빨라질 것임을 시사합니다.

discord

디스코드 키보드 단 (새 탭에서 열림)

Discord의 키보드 단축키를 사용하면 마우스 없이 메시지 편집·답장, 음성 채널 제어, 대화 이동 등을 빠르게 처리할 수 있다. 데스크톱 앱에서는 Discord가 백그라운드에 있어도 일부 음성 단축키가 작동하며, 사용자는 **사용자 설정 > 키 바인드**에서 자신의 환경에 맞는 단축키를 추가할 수 있다. 특히 **Ctrl/Cmd + K**로 실행하는 빠른 전환기는 서버 채널, DM, 친구를 즉시 검색하고 이동하게 해준다. ## 텍스트 채팅 단축키 - **Ctrl/Cmd + E**: 이모지 선택기 열기 - **Ctrl/Cmd + S**: 스티커 선택기 열기 - **Ctrl/Cmd + G**: GIF 선택기 열기 - **Ctrl/Cmd + Shift + U**: 파일 첨부 - `Tab`과 방향키로 메시지를 선택한 뒤 사용할 수 있는 기능: - `E` 또는 `↑`: 마지막 메시지 편집 - `+`: 반응 추가 - `Backspace`: 메시지 삭제 - `R`: 답장 - `P`: 메시지 고정 - `F`: 메시지 전달 - `↑` 키만 눌러도 자신이 마지막으로 보낸 메시지를 빠르게 편집할 수 있다. ## 음성·영상 채팅 단축키 Discord 데스크톱 앱에서는 앱이 다른 창 뒤에 있어도 일부 단축키를 사용할 수 있다. - **Discord가 백그라운드에 있을 때** - **Ctrl/Cmd + Shift + M**: 마이크 음소거 전환 - **Ctrl/Cmd + Shift + D**: 디퍼닝 전환 - **Discord가 열려 있을 때** - **Ctrl/Cmd + Enter**: 수신 전화 받기 - `Esc`: 전화 거절 - **Ctrl + ’**: 현재 보고 있는 DM에 전화 걸기 - **음성 통화 중일 때** - **Ctrl/Cmd + Shift + Alt/Option + V**: 앱 어디서든 현재 통화 화면으로 이동 - **Ctrl/Cmd + Shift + B**: 사운드보드 열기 웹 앱에서도 대부분의 단축키를 사용할 수 있지만, 브라우저가 포커스를 잃은 상태에서는 작동하지 않는다. ## 사용자 지정 키 바인드 **사용자 설정 > 키 바인드**에서 기본 단축키 대신 자신에게 편한 키 조합을 지정할 수 있다. 키보드 배열이 특이하거나 특정 조합을 누르기 어려운 경우 특히 유용하다. - **토글 방식** - **Toggle Mute**: 마이크 음소거와 해제 전환 - **Toggle Deafen**: 통화 소리를 차단하고 마이크도 음소거 - **Toggle VAD**: 푸시 투 토크와 음성 감지 모드 전환 - **Toggle Streamer Mode**: 사용자 이름 등 개인정보 표시 숨김 - **Navigate Forward/Back**: 브라우저의 앞으로/뒤로 가기처럼 Discord 화면 이동 - **Switch to Voice Channel**: 현재 참여 중인 음성 채널 화면으로 이동 - **Disconnect from Voice Channel**: 음성 채널 연결 해제 - **누르고 있는 동안 작동하는 방식** - **Push to Talk**: 키를 누르는 동안만 음성 전송 - **Push to Mute**: 키를 누르는 동안 마이크 음소거 - **Priority Push to Talk**: 말하는 동안 다른 참가자의 음량 낮추기 ## 빠른 전환기로 대화 찾기 - **Ctrl/Cmd + K**를 누르면 빠른 전환기가 열린다. - 검색창에 서버 채널, DM, 친구 이름 등 원하는 내용을 입력하면 관련 대화 목록을 찾을 수 있다. - 마우스로 서버와 채널을 일일이 탐색하지 않고 키보드만으로 원하는 대화로 이동할 수 있다. 자주 사용하는 기능부터 음소거, 푸시 투 토크, 빠른 전환기 같은 단축키를 설정하면 Discord 사용 속도와 편의성이 크게 향상된다. 특히 음성 채팅을 자주 한다면 실수로 마이크가 켜진 상태를 방지하도록 음소거·푸시 투 토크 키 바인드를 먼저 설정하는 것이 좋다.

discord

키보드만으로 디스 (새 탭에서 열림)

Discord는 마우스나 트랙패드 없이도 키보드만으로 대부분의 기능을 탐색하고 사용할 수 있는 키보드 내비게이션을 제공한다. Tab과 방향키로 인터랙티브 요소와 목록을 이동하고, Enter로 선택하며, 메시지 관리·서버 및 DM 탐색·음성 통화·서버 정리까지 단축키로 처리할 수 있다. 일부 기능은 기본 단축키가 없지만 사용자 지정 Keybind로 보완할 수 있다. ## 키보드로 버튼과 목록 탐색 - Discord에서 **Tab**을 누르면 현재 선택된 요소를 나타내는 포커스 상자가 표시된다. - Tab으로 버튼, 아이콘 등 인터랙티브 요소 사이를 이동한다. - 원하는 요소를 선택한 뒤 **Enter/Return**을 누르면 마우스로 클릭한 것처럼 실행된다. - DM 목록이나 서버 채널 목록에서는 **방향키**로 위아래 항목을 이동할 수 있다. - 메시지를 선택하면 해당 메시지에 직접 작업을 수행할 수 있다. ## 메시지 관리 단축키 메시지를 포커스한 상태에서 다음 키를 사용할 수 있다. - **E 또는 ↑**: 마지막 메시지 수정 - **+**: 리액션 추가 - **Backspace**: 메시지 삭제 - **R**: 메시지에 답장 - **P**: 메시지 고정 - **F**: 선택한 메시지 전달 - **Esc**: 채팅 입력창으로 이동 - 메뉴나 모달이 열려 있으면 먼저 닫는다. - **Alt/Option + Enter/Return**: 메시지를 읽지 않음으로 표시 ## 서버와 DM 빠르게 이동하기 - **Ctrl/Cmd + Option + ↑/↓**: 서버 목록 이동 - **Option + ↑/↓**: 채널 또는 DM 목록 이동 - **Option + Shift + ↑/↓**: 읽지 않은 채널이나 DM으로 이동 - **Ctrl/Cmd + Shift + Option + ↑/↓**: 멘션이 포함된 읽지 않은 채널이나 DM으로 이동 - **Ctrl/Cmd + Option + →**: 마지막으로 보던 서버와 DM 탭 사이 전환 - **Shift + Page Up**: 텍스트 채널에서 가장 오래된 읽지 않은 메시지로 이동 ## 음성 및 영상 통화 제어 통화 전후에도 키보드 단축키로 주요 기능을 실행할 수 있다. - **Ctrl + '**: 현재 보고 있는 개인 또는 그룹 DM에서 통화 시작 - **Ctrl/Cmd + Enter/Return**: 걸려 오는 DM 통화 받기 - **Esc**: 걸려 오는 DM 통화 거절 - **Ctrl/Cmd + Shift + M**: 마이크 음소거 - **Ctrl/Cmd + Shift + D**: 디퍼닝 - 마이크와 통화 소리를 모두 끈다. - **Ctrl/Cmd + Shift + Alt/Option + V**: 현재 참여 중인 통화 화면으로 이동 - 음성 채널 연결 해제 단축키는 기본 제공되지 않지만, 사용자 지정 **Keybind**로 만들 수 있다. ## 키보드만으로 드래그 앤 드롭 서버 아이콘과 일부 채널은 키보드로 위치를 옮길 수 있다. 서버 폴더를 만들거나 서버 목록을 정리할 때도 활용 가능하다. - 키보드 내비게이션으로 이동할 서버를 선택한다. - **Ctrl/Cmd + D**를 눌러 항목을 “집어 든다”. - **방향키**로 원하는 위치까지 이동한다. - **Enter**를 눌러 새 위치에 배치한다. - 채널 이동은 해당 서버를 소유했거나 채널을 이동할 권한이 있는 경우 사용할 수 있다. 키보드 중심으로 Discord를 사용하려면 먼저 Tab, 방향키, Enter 조합에 익숙해지는 것이 좋다. 자주 사용하는 기능 중 기본 단축키가 없는 작업은 사용자 지정 Keybind로 등록하면 마우스 사용을 더욱 줄일 수 있다.

figma

Figma x Work Louder의 새로운 (새 탭에서 열림)

Figma는 Work Louder와 협업해 창작 작업에 최적화된 맞춤형 기계식 키보드를 선보였다. 일반 키보드가 타이핑 중심이라면, 이 제품은 Figma 캔버스 탐색과 단축키 사용을 더 직관적이고 촉각적으로 만드는 보조 입력 장치에 가깝다. 12개 키와 2개의 로터리 인코더로 최대 48개 단축키를 제공해, 반복적인 디자인 작업을 빠르고 즐겁게 수행하도록 돕는 것이 핵심이다. ## 기계식 키보드가 주는 개인화와 촉각성 - 일반 노트북 키보드는 표준화와 일관성에 초점이 맞춰져 있다. - 기계식 키보드는 다음 요소를 사용자가 직접 조정할 수 있다. - 키캡과 색상 - 키 배열 - 조명 - 스위치의 촉감과 소리 - 이러한 개인화는 단순한 효율성뿐 아니라 작업 도구에 대한 애착과 즐거움을 높인다. - Figma 디자인 디렉터 Marcin Wichary는 키보드를 생산성 도구이면서도 개인의 취향과 작업 방식을 반영하는 물건으로 바라본다. ## 기존 키보드와 창작 작업의 불일치 - 표준 QWERTY 키보드는 원래 타자기와 사무용 문서 작성의 영향을 강하게 받았다. - 오늘날의 창작 소프트웨어는 수많은 단축키를 요구하지만, 기존 키보드는 이를 효율적으로 사용하도록 설계되지 않았다. - 복잡한 단축키 조합은 손가락을 무리하게 뻗게 만들고, 사용자가 명령을 기억하고 조작하는 데 부담을 준다. - Figma는 보편적인 키보드의 기능을 대체하려는 것이 아니라, 창작자가 자주 사용하는 조작에 개성과 촉각적 피드백을 더하려 했다. ## Figma와 Work Louder의 협업 - Figma는 모듈형 키보드를 제작하는 몬트리올 기반 회사 Work Louder와 협업했다. - 목표는 고가 하드웨어를 필수품으로 만들어 접근성을 제한하는 것이 아니라, 기계식 키보드를 선호하는 사용자에게 더 즐거운 작업 경험을 제공하는 것이다. - 제품은 Work Louder의 Creator Micro 키보드를 기반으로 Figma 작업에 맞게 맞춤 제작됐다. - Figma는 브라우저 기반 협업이라는 기존 방향을 유지하면서, 선택적인 생산성 도구를 추가했다. ## 타이핑보다 캔버스 탐색에 초점을 둔 설계 - Figma 사용자는 문자를 입력하기보다 마우스로 캔버스를 탐색하고 파일을 조작하는 시간이 많다. - 따라서 이 장치는 전통적인 키보드보다 대체 트랙패드에 가까운 역할을 한다. - 주요 구성은 다음과 같다. - 12개의 물리 키 - 2개의 로터리 인코더 - 총 48개의 단축키 조합 - Figma에는 150개가 넘는 단축키가 있으므로, 사용자는 자신의 작업 흐름에 맞는 명령을 선택해 배치할 수 있다. - 모든 키가 격자 형태로 배치되어 있어 단축키 위치를 머릿속으로 쉽게 매핑할 수 있다. ## 촉각 피드백과 근육 기억 - 물리 키와 다이얼은 명령이 입력됐다는 피드백을 손끝으로 전달한다. - 사용자는 화면이나 키보드를 내려다보지 않고도 조작 여부를 확인할 수 있다. - 반복 사용하면 특정 키와 명령의 위치가 근육 기억으로 자리 잡아 작업 속도가 빨라진다. - 단축키를 장시간 암기해야 하는 부담을 줄이고, 학습 과정을 더 재미있게 만드는 것이 제품의 중요한 의도다. - Figma는 창작 도구의 세부적인 사용 경험과 즐거움 자체도 좋은 디자인의 일부라고 강조한다. 반복적으로 사용하는 Figma 단축키가 많고 마우스 중심의 캔버스 조작을 더 빠르게 하고 싶다면, 이와 같은 보조 키패드가 유용할 수 있다. 다만 모든 단축키를 한 번에 익히기보다 자주 쓰는 명령 몇 개만 배치해 근육 기억을 만드는 방식이 현실적이다.

figma

리틀 빅 업데이트: (새 탭에서 열림)

이번 업데이트는 Figma와 FigJam의 작업 흐름을 빠르게 만드는 32가지 개선 사항을 소개한다. 파일·컴포넌트 관리, 텍스트 편집, 단축키, 퍼블리싱, FigJam 협업 기능처럼 작은 변경을 모아 반복 작업을 줄이고 디자인 시스템 활용성을 높이는 데 초점을 맞췄다. 개별 기능은 작지만 일상적인 작업 속도와 편의성에 큰 영향을 준다는 것이 글의 결론이다. ## 텍스트 편집과 입력 개선 - 텍스트 편집 성능을 개선해 Figma와 FigJam에서 최대 10배 빠르게 입력할 수 있다. - macOS의 악센트 메뉴를 지원한다. 문자를 길게 누르면 é, ñ 등의 악센트 문자를 선택할 수 있다. - 여러 텍스트 스타일이 섞여 있어도 목록 글머리 기호의 모양과 정렬이 일관되게 유지된다. - `Home`과 `End` 키로 텍스트 영역의 시작과 끝으로 빠르게 이동할 수 있다. - 커넥터의 텍스트에서 `Return` 또는 `Enter`를 눌러 새 줄을 만들 수 있다. 기존에는 `Shift+Return/Enter`가 필요했다. - Chrome에서 레티나 스크린샷을 붙여 넣을 때 올바른 크기로 처리되도록 개선했다. ## 파일 탐색과 단축키 - Figma 및 FigJam에서 HEIC 이미지 업로드를 지원해 iPhone 사진을 바로 사용할 수 있다. - 외부 링크를 열 때 표시되던 중간 안내 화면을 제거해 작업 흐름이 끊기지 않는다. - 데스크톱 앱에서 `⌘L` 또는 `Ctrl+L`로 파일뿐 아니라 선택한 프레임의 링크도 복사할 수 있다. - UI를 숨긴 상태에서도 `⌘R` 또는 `Ctrl+R`로 요소 이름을 변경할 수 있다. - `⌘` 또는 `Ctrl`을 누른 채 클릭하면 캔버스에서 최상위 프레임을 직접 선택할 수 있다. - 빠른 실행 메뉴(`⌘+/`, `Ctrl+/`)에서 FigJam UI 표시 여부를 전환할 수 있다. - 같은 빠른 실행 메뉴에서 “모든 객체 잠금 해제” 기능을 검색해 실행할 수 있다. - FigJam 인라인 툴바에 마우스를 올리면 추가 키보드 단축키를 확인할 수 있다. ## 컴포넌트와 디자인 시스템 - 컴포넌트 삽입(`Shift+I`) 및 인스턴스 교체 시 검색 기능을 사용할 수 있어 필요한 컴포넌트를 빠르게 찾을 수 있다. - 컴포넌트를 우클릭해 즉시 퍼블리시할 수 있다. - 퍼블리싱 모달에서 컴포넌트를 검색할 수 있다. - 퍼블리시된 파일에는 별도의 식별 가능한 아이콘이 표시되어 라이브러리 파일을 쉽게 구분할 수 있다. - 퍼블리싱 모달에서 문제가 있는 컴포넌트로 바로 이동할 수 있다. - 에셋 목록에 표시하거나 숨길 컴포넌트를 선택할 수 있다. - 아직 퍼블리시되지 않은 변경 사항을 확인한 뒤 같은 화면에서 바로 퍼블리시할 수 있다. - 메인 컴포넌트를 선택했을 때 “Return to instance”를 눌러 인스턴스로 돌아갈 수 있다. - 조직 구독 설정에서 라이브러리로 직접 연결되는 링크를 제공한다. - FigJam 파일에 팀 라이브러리를 추가할 때 해당 라이브러리가 모달에서 우선적으로 표시된다. ## Figma 디자인 및 내보내기 - 벡터 네트워크 영역별로 서로 다른 채우기 색상을 지정할 수 있어 복잡한 벡터 디자인의 표현 범위가 넓어졌다. - 부모 객체에 적용된 SVG 스트로크를 내보내는 기능이 정상적으로 작동한다. - Figma와 FigJam에서 목록 및 텍스트 스타일 관련 표시가 더 안정적으로 유지된다. - 파일과 프레임 링크 복사 기능이 확장되어 협업 중 특정 작업 영역을 공유하기 쉬워졌다. ## FigJam 도형과 협업 기능 - FigJam의 도형을 더 유연하게 크기 조절할 수 있다. - 요소를 선택한 뒤 우클릭하면 해당 요소로 바로 이동하는 직접 링크를 복사할 수 있다. - 스탬프를 스탬프 휠에서 직접 드래그할 수 있다. - FigJam의 빨간 도형 색상을 주황색에 가깝던 색에서 더 선명한 빨간색으로 조정했다. - 파란 배경 위의 텍스트 하이라이트가 더 잘 보이도록 대비를 개선했다. - 객체를 드래그할 때 계속 그리드에 스냅되도록 했다. 이 업데이트들은 각각의 기능을 새로 배우기보다 기존 작업에 단축키와 검색, 직접 링크, 즉시 퍼블리시를 적극 활용하는 방식으로 효과를 볼 수 있다. 특히 컴포넌트 라이브러리를 자주 사용하는 팀은 검색·퍼블리싱 개선을, FigJam 협업 팀은 요소 링크와 빠른 실행 기능을 먼저 적용하는 것이 좋다.

figma

Figma의 새로운 핑거 (새 탭에서 열림)

Figma는 키보드 단축키를 익히는 일이 마우스 조작보다 어렵지만, 숙련되면 손의 운동기억을 통해 작업 속도와 몰입을 크게 높일 수 있다고 설명합니다. Douglas Engelbart의 마우스·키셋 시연에서 영감을 받아, 사용자의 작업 흐름에 맞는 단축키를 쉽게 발견하고 연습하도록 새로운 키보드 단축키 패널을 도입했습니다. 이 패널은 작업 유형별 단축키를 보여주고, 사용자가 누른 단축키를 강조해 학습을 돕습니다. ## 엥겔바트의 시연과 양손 입력 - 1968년 Douglas Engelbart는 문서 작성, 그래픽 추가, 문서 간 링크, 원격 협업과 채팅을 한 자리에서 보여주는 획기적인 컴퓨터 시연을 진행했습니다. - 오른손에는 마우스, 왼손에는 키셋을 사용했습니다. - 마우스로 단어를 가리키는 동시에 왼손으로 `DW(Delete Word)`를 입력해 단어를 삭제하는 방식이 핵심 장면으로 소개됩니다. - 마우스가 “무엇을 선택할지” 지정한다면, 키셋은 “선택한 대상에 무엇을 할지” 명령하는 역할을 했습니다. - 반복적인 손동작이 운동기억에 저장되면 피아노 연주나 춤처럼 의식적으로 동작을 계산하지 않고도 작업할 수 있습니다. ## Figma 작업과 키보드 단축키 - 숙련된 Figma 사용자는 캔버스를 이동하고, 객체 스타일을 바꾸고, 디자인을 생성하는 과정을 손을 보지 않고 빠르게 수행합니다. - 이는 Engelbart의 방식처럼 한 손은 마우스에, 다른 손은 키보드에 두는 입력 방식과 유사합니다. - 마우스는 초보자도 쉽게 익힐 수 있지만, 키보드 단축키는 탐색과 반복 연습을 통해 운동기억에 정착시켜야 합니다. - 단축키가 익숙해지면 도구 자체보다 해결하려는 디자인 문제에 집중하는 ‘몰입 상태’에 가까워질 수 있습니다. ## 기존 단축키 패널의 문제 - 기존 패널은 정보를 한눈에 파악하기 어려웠습니다. - 화면 전체를 차지해 단축키를 실제로 사용하면서 학습하기도 불편했습니다. - 단축키가 어떤 작업과 연관되는지 쉽게 탐색하기 어려웠습니다. ## 작업 중심의 새로운 단축키 패널 - 새 패널은 캔버스 아래쪽에 표시되어 작업 화면을 과도하게 가리지 않습니다. - 화면 오른쪽 아래의 물음표 메뉴에서 **Keyboard Shortcuts**를 선택하거나 `Ctrl+Shift+?`로 열 수 있습니다. - 작업 유형별 카테고리를 제공해 현재 작업에 필요한 단축키를 바로 찾아볼 수 있습니다. - 벡터 작업: 도형 편집, 구부리기 등 - 타이포그래피 작업: 글꼴 관련 단축키 - 양손 사용이 필요한 유용한 조합을 별도 탭에서 소개합니다. - 예: `Alt`를 누른 채 마우스를 움직이면 객체 간 거리나 크기를 쉽게 측정할 수 있습니다. - 초보자를 위한 기본 단축키 탭도 제공합니다. - 예: `⌘+\`를 사용하면 화면의 부가 UI를 숨기고 작업에 집중할 수 있습니다. - 작성자는 `Shift+2`가 선택 항목을 화면에 맞게 보여주는 기능을 제공한다는 점도 새롭게 발견했다고 설명합니다. ## 사용 행동을 반영하는 학습 방식 - 패널은 사용자가 실제로 누른 단축키를 감지하고 해당 항목을 강조합니다. - 사용자가 어떤 단축키를 사용했는지 기억해 이후 학습에 활용할 수 있도록 설계되었습니다. - 단축키 목록을 단순히 읽는 대신, 자신의 작업 패턴을 돌아보고 사용하지 않던 관련 단축키를 발견하도록 돕는 것이 목적입니다. Figma의 접근 방식은 단축키를 별도의 암기 과제가 아니라 실제 작업 흐름 속에서 익히도록 만드는 데 초점이 있습니다. 자주 수행하는 작업의 카테고리부터 선택해 단축키를 반복 사용하고, 마우스와 키보드의 조합을 운동기억으로 정착시키는 것이 가장 실용적인 활용법입니다.

figma

#FigmaTip 모음 (새 탭에서 열림)

이 글은 Figma 커뮤니티에서 공유된 실용적인 작업 팁을 모아, 반복적인 디자인 작업을 키보드 단축키와 컴포넌트 기능으로 더 빠르게 처리하는 방법을 소개한다. 여러 프레임 정렬, 좌우 반전 컴포넌트 제작, 오브젝트 이동 간격 조정 등을 활용하면 레이아웃 편집과 컴포넌트 관리의 효율을 높일 수 있다는 것이 핵심이다. ### 여러 프레임을 빠르게 정렬하기 - 여러 오브젝트나 프레임을 선택한 뒤 다음 단축키를 사용할 수 있다. - `Cmd + \``: 세로 방향으로 간격을 정리하는 **Pack Vertical** - `Cmd + Shift + \``: 가로 방향으로 간격을 정리하는 **Pack Horizontal** - 정렬 관련 단축키와 함께 사용하면 여러 요소의 배치 방향과 간격을 한 번에 조정할 수 있다. - 반복적으로 카드, 화면, 섹션 등을 배열할 때 마우스로 직접 이동하는 것보다 효율적이다. ### 변경 사항을 반영하는 좌우 반전 컴포넌트 만들기 - 기존 컴포넌트를 `Option` 키를 누른 채 드래그해 새로운 빈 컴포넌트 안에 배치한다. - 새 인스턴스를 선택하고 `Shift + H`를 눌러 좌우로 뒤집는다. - 이렇게 만든 반전 컴포넌트는 원본과 연결되어 있으므로 원본 컴포넌트의 변경 사항이 반영된다. - 좌우 대칭이 필요한 아이콘, 캐릭터, 방향성 UI 요소를 별도로 다시 만들지 않고 관리할 수 있다. ### “Nudge Amount”로 이동 간격 조정하기 - 방향키로 오브젝트를 이동할 때 적용되는 기본 이동 간격을 **Nudge Amount** 설정으로 바꿀 수 있다. - 작은 간격 조정에는 세밀한 값을, 큰 레이아웃 이동에는 더 큰 값을 설정해 작업 목적에 맞게 사용할 수 있다. - 반복적으로 일정한 간격을 맞추거나 픽셀 단위로 요소를 배치할 때 유용하다. - 정렬 및 간격 조정 기능과 함께 사용하면 디자인 시스템의 간격 규칙을 유지하기 쉽다. 실무에서는 자주 사용하는 정렬 단축키와 Nudge Amount 설정을 자신의 작업 방식에 맞게 지정하고, 좌우 변형이 필요한 요소는 반전 컴포넌트로 관리하는 것이 좋다.

figma

#FigmaTip 모 (새 탭에서 열림)

이 글은 Figma 커뮤니티에서 공유된 작지만 유용한 작업 팁을 모은 8번째 #FigmaTip 모음이다. 프로젝트를 시각적으로 정리하는 방법과 레이어·객체를 키보드로 빠르게 탐색하는 단축키를 소개해, Figma 작업 흐름을 더 빠르고 직관적으로 만드는 데 초점을 둔다. ## 프로젝트 썸네일을 직접 디자인하기 - 프로젝트의 첫 페이지에 프레임 하나만 배치한다. - 프레임 크기를 `620×320`으로 설정한다. - 큰 텍스트와 시각적으로 눈에 띄는 디자인을 넣어 프로젝트 대표 이미지를 만든다. - 캔버스 색상과 프레임 색상을 동일하게 설정하면, 프로젝트 목록에서 하나의 완성된 썸네일처럼 보인다. - 프로젝트가 많을 때 목록에서 작업물을 빠르게 식별할 수 있고, 단순한 기본 썸네일보다 개성을 부여할 수 있다. ## 레이어 패널을 빠르게 탐색하기 - 글에는 레이어 패널을 확대·탐색하는 단축키 팁을 소개하는 섹션이 포함되어 있다. - 다만 제공된 본문에서는 해당 Twitter 게시물의 내용이 로드되지 않아 구체적인 단축키 목록은 확인되지 않는다. - 이 팁의 목적은 마우스로 레이어를 일일이 찾기보다 키보드 중심으로 레이어 구조를 빠르게 이동하는 데 있다. ## 선택과 레이어 순서를 단축키로 제어하기 - `Tab` / `Shift + Tab` - 같은 계층에 있는 형제 레이어를 앞뒤로 선택한다. - `Return` / `Shift + Return` - 선택한 그룹이나 프레임 안으로 들어가거나 빠져나온다. - `Cmd + ]` / `Cmd + [` - 선택한 레이어를 한 단계 위·아래로 이동한다. - `Option + Cmd + ]` / `Option + Cmd + [` - 선택한 레이어를 레이어 목록의 맨 위 또는 맨 아래로 이동한다. - 이러한 단축키를 익히면 레이어 패널을 계속 클릭하지 않고도 객체 선택, 그룹 탐색, 앞뒤 순서 변경을 빠르게 처리할 수 있다. Figma를 자주 사용한다면 먼저 레이어 선택과 순서 변경 단축키를 익히고, 프로젝트마다 대표 썸네일용 프레임을 만들어 보길 권한다. 작은 시각적 정리와 키보드 중심의 조작만으로도 파일 탐색성과 편집 속도를 함께 개선할 수 있다.

figma

#FigmaTip 라운드 (새 탭에서 열림)

FigmaTip Roundup 7.0은 디자인 커뮤니티가 공유한 Figma 단축키와 작업 팁을 모은 글이다. 주요 내용은 컴포넌트를 활용해 대칭 도형을 만들고, 선택한 레이어로 빠르게 확대하며, 프레임 외곽선을 사용해 복잡한 화면을 명확하게 확인하는 방법이다. 작은 기능과 단축키를 익히면 반복 작업과 캔버스 탐색을 크게 줄일 수 있다. ## 컴포넌트로 대칭 도형 만들기 - 꽃병, 플라스크처럼 좌우 대칭이 필요한 도형은 한쪽 윤곽만 먼저 그린다. - 한쪽 윤곽을 컴포넌트로 만든다. - 단축키: `⌥⌘K` - 컴포넌트를 복제한다. - 단축키: `⌘D` - 복제한 요소를 수평 반전한다. - 단축키: `⇧H` - 반전된 복제본을 원본의 반대편으로 이동해 대칭 형태를 구성한다. - 원본 컴포넌트를 수정하면 연결된 인스턴스에도 변경 사항을 적용할 수 있어, 양쪽 형태를 일관되게 관리할 수 있다. - 단순히 좌우를 복사하는 것보다 컴포넌트 기반으로 작업하면 이후 모양을 수정하거나 변형하기 쉽다. ## 스페이스바로 선택 영역 고정하기 - 스페이스바를 누르면 선택한 객체의 경계(bounds)를 고정할 수 있다. - 객체를 이동하거나 조정할 때 선택 영역이 변해 작업 기준이 흔들리는 상황을 줄이는 데 유용하다. - 정밀한 배치나 크기 조정처럼 선택 영역을 일정하게 유지해야 하는 작업에 활용할 수 있다. ## 선택한 레이어로 정밀하게 확대하기 - 레이어 패널에서 원하는 레이어를 선택한 뒤, “Keyboard Zooms Into Selection” 기능을 사용하면 해당 객체를 화면 중앙에 가깝게 확대할 수 있다. - 캔버스에서 직접 객체를 찾을 필요 없이 레이어 목록에서 선택한 요소를 즉시 확인할 수 있다. - 복잡한 화면이나 작은 요소를 편집할 때 유용하며, 캔버스를 여러 번 확대·축소하는 시간을 줄여준다. ## 프레임 외곽선으로 구조 확인하기 - “Frame Outlines” 기능을 사용하면 프레임의 외곽선을 표시할 수 있다. - 내부 콘텐츠가 많거나 프레임 배경과 요소가 비슷한 경우에도 프레임의 경계를 쉽게 식별할 수 있다. - 중첩된 프레임과 레이아웃 구조를 파악하고, 요소가 어느 프레임에 속하는지 확인하는 데 도움이 된다. Figma에서 반복적으로 사용하는 작업은 단축키와 컴포넌트로 표준화하는 것이 좋다. 특히 대칭 도형은 한쪽만 제작한 뒤 컴포넌트와 수평 반전을 조합하고, 복잡한 파일에서는 레이어 선택 후 선택 영역 확대와 프레임 외곽선 표시를 함께 사용하면 작업 속도와 정확도를 높일 수 있다.

figma

놓치셨을 분들을 (새 탭에서 열림)

Figma는 창립 1주년을 기념해 월요일부터 토요일까지 매일 새로운 기능을 공개하는 `#6DaysofShipping` 이벤트를 진행했다. 고급 사용자를 위한 기능부터 초보자를 위한 단축키 안내까지 다양한 수준의 기능을 연속적으로 선보이며, 빠른 제품 개발과 사용자 커뮤니티의 기대감을 강조했다. 이 글은 해당 주간에 공개된 기능과 사용법을 간단히 정리한 회고다. ## 6일간 이어진 기능 출시 이벤트 - Figma 팀은 제품 출시 속도에 대한 사용자들의 관심과 기대에 호응해 6일 연속 기능을 공개했다. - 이벤트는 월요일부터 토요일까지 매일 하나의 기능을 소개하는 방식으로 진행됐다. - 주요 대상은 다음처럼 다양했다. - 중첩 인스턴스 교체 같은 파워 유저용 기능 - 키보드 단축키 목록처럼 입문자에게 유용한 기능 - 서로 성격이 다른 기능을 한 주에 묶어 공개함으로써 다양한 사용자에게 새로운 기능을 제공했다. ## 드래그로 속성값을 조절하는 Scrubbable Inputs - 속성 패널의 숫자 값을 직접 입력하는 대신, 마우스로 드래그해 빠르게 변경할 수 있다. - `Option` 키를 누른 상태에서 값을 클릭하고 드래그하면 값이 조절된다. - 커서를 위쪽으로 움직이면 값의 변화 속도를 더 빠르게 할 수 있다. - 반복적으로 크기, 위치, 간격 등의 값을 바꿔야 하는 디자인 탐색 과정에서 특히 유용하다. - 정확한 숫자를 매번 입력하기보다 시각적으로 결과를 확인하며 여러 대안을 빠르게 비교할 수 있다. ## 모서리 반경을 빠르게 조정하는 단축 동작 - 사각형의 모서리 반경을 별도의 입력 과정 없이 직접 조절할 수 있다. - 도형에 마우스를 올린 뒤 모서리 조절 핸들을 클릭하고 드래그하면 원하는 둥근 정도를 설정할 수 있다. - `Alt` 키를 누른 상태에서 드래그하면 네 모서리를 한꺼번에 바꾸는 대신 특정 모서리 하나만 조절할 수 있다. - 따라서 전체적으로 둥근 카드뿐 아니라 한쪽 모서리만 둥근 형태도 빠르게 만들 수 있다. - 디자인 시안을 수정할 때 속성 패널과 캔버스 사이를 오갈 필요가 줄어든다. ## 파워 유저와 초보자를 함께 고려한 기능 구성 - 이번 출시 주간은 하나의 큰 기능에 집중하기보다 작업 속도와 접근성을 높이는 여러 기능을 폭넓게 다뤘다. - 중첩 인스턴스 교체처럼 컴포넌트 기반 작업을 강화하는 기능과 키보드 단축키 안내를 함께 제공했다. - Figma는 기능 자체뿐 아니라 사용자가 기능을 발견하고 익히는 과정도 중요하게 보고 있었다. - 매일 새로운 내용을 공개하는 형식은 사용자들이 다음 출시를 기대하게 만들고 커뮤니티의 참여를 유도했다. 실무에서는 숫자 값을 반복해서 수정할 때 Scrubbable Inputs를 사용하고, 모서리 형태를 조정할 때 드래그와 `Alt` 조합을 활용하면 디자인 탐색 속도를 높일 수 있다. 또한 새로운 기능을 한꺼번에 익히기보다 단축키와 캔버스 직접 조작 기능부터 작업 흐름에 조금씩 적용하는 것이 효과적이다.

figma

#FigmaTip 라운드 (새 탭에서 열림)

이 글은 Figma 커뮤니티가 공유한 유용한 단축키와 숨은 기능을 모아 소개하는 첫 번째 `#FigmaTip` 모음집이다. 레이어 속성 복사, 캔버스 이동, 동일한 속성의 객체 선택처럼 반복 작업을 줄이고 편집 속도를 높이는 기능을 중심으로 설명한다. 작은 기능을 익히는 것만으로도 Figma 작업 흐름을 더 효율적으로 만들 수 있다는 것이 핵심이다. ### 여러 레이어의 속성 복사 - 여러 레이어에서 원하는 속성을 선택한 뒤 다른 객체에 복사할 수 있다. - 크기, 색상, 테두리 등 필요한 속성만 골라 적용할 수 있어 객체를 일일이 수정할 필요가 없다. - 여러 객체의 스타일을 빠르게 통일하거나 디자인 시안을 정리할 때 유용하다. ### 키보드로 캔버스 이동하기 - `Z` 키와 방향키를 함께 누르면 캔버스를 원하는 방향으로 이동할 수 있다. - `Shift + Z`와 방향키를 사용하면 더 큰 폭으로 캔버스를 이동하는 “큰 이동”이 가능하다. - 마우스나 트랙패드로 화면을 드래그하지 않고도 넓은 작업 영역을 빠르게 탐색할 수 있다. ### 동일한 속성을 가진 객체 선택 - 특정 객체와 같은 속성을 가진 다른 객체를 한 번에 선택할 수 있다. - 동일한 색상, 스타일 또는 형태를 사용하는 요소를 일괄적으로 수정할 때 편리하다. - 반복되는 UI 요소를 정리하거나 디자인 시스템의 스타일을 통일하는 작업에 활용할 수 있다. Figma에서 자주 반복하는 편집 작업을 단축키와 다중 선택 기능으로 대체하면 작업 시간을 줄이고 디자인 일관성도 높일 수 있다. 특히 속성 복사와 동일 속성 객체 선택 기능을 익혀 두면 여러 화면의 스타일을 수정할 때 효과적이다.

figma

가구에서 스크린까지 (새 탭에서 열림)

가구는 완성 후 실수를 고치기 어렵지만, 디지털 제품은 매일 개선할 수 있다는 차이에서 출발한다. Figma는 가구처럼 사용자의 작업을 돕되 스스로는 눈에 띄지 않는 도구를 지향하며, 가구 디자인의 원칙을 도구·조작감·색상 설계에 적용했다. 궁극적으로 좋은 디자인 도구는 사용자가 도구 자체가 아니라 자신의 아이디어에 집중하게 해야 한다. ## 사용자의 삶을 돕고 사라지는 제품 - 가구의 목적은 빈 공간을 채우는 것이 아니라 그 안에서 이루어지는 생활을 지원하는 데 있다. - Figma 역시 제품 자체가 주인공이 아니라, 사용자가 다른 제품과 아이디어를 만들어내도록 돕는 기반이 되어야 한다. - 따라서 인터페이스는 기능을 제공하면서도 사용자의 창작 활동을 방해하지 않고 배경으로 물러나야 한다. ## 최소한이지만 강력한 도구 - 기본 도구 수를 줄이되, 단순한 작업부터 복잡한 작업까지 대응할 수 있도록 설계했다. - 망치 하나로 작은 수납장부터 집 전체를 만들 수 있듯이, 핵심 도구는 다양한 결과물을 만들어낼 만큼 유연해야 한다. - Figma의 펜 도구는 물리적인 펜처럼 느껴지도록 재구성했다. - 벡터 객체를 전통적인 경로가 아니라 점들의 네트워크로 구성해, 임의의 점을 서로 연결할 수 있게 했다. - 이 방식은 정해진 절차를 따라가는 대신 결과물을 자연스럽게 만들어가는 데 집중하게 한다. - 편집기는 필요한 도구가 잘 정리된 작업대처럼 느껴져야 하며, 도구의 배치와 접근성은 작업의 기본 조건이다. ## 손에 잡히는 조작감과 사용자 제어 - 물리적 도구를 사용할 때의 촉각적 익숙함은 디지털 도구에서도 통제감을 높인다. - 키보드 단축키는 사용자가 작업을 빠르고 직접적으로 제어하게 만드는 대표적인 수단이다. - Figma의 `Command` 키와 드래그 조합은 중첩된 요소를 선택할 때의 불편을 해결한다. - `Command`를 누른 채 드래그하면 컨테이너와 내부 요소를 구분하는 휴리스틱이 작동해, 컨테이너 자체가 아니라 포함된 요소만 선택한다. - 예를 들어 툴바 배경은 제외하고 그 안의 아이콘만 한 번에 박스 선택할 수 있다. - 사용자는 레이어 계층 구조를 일일이 생각하지 않고 화면 속 요소를 직접 조작할 수 있다. ## 눈에 띄지 않되 의미를 전달하는 색상 - 초기 Figma는 거의 단색에 가까운 ‘무스킨’ 스타일을 사용해 UI가 디자인을 방해하지 않도록 했다. - 그러나 기능이 늘어나면서 단색 UI만으로는 서로 다른 구성 요소를 명확히 구분하기 어려워졌다. - 해결책은 UI를 완전히 사라지게 하는 것이 아니라, 사용자가 의식하지 않아도 의미를 파악할 수 있도록 만드는 것이었다. - 현재의 색상 체계는 색을 시각적 장식이 아니라 의미의 추가 계층으로 활용한다. - 초록색: 실행이나 행동 - 파란색: 선택 상태 - 이러한 색상 그룹은 화면을 한눈에 이해하게 하고, 사용자가 “어떻게 도구를 쓰는가”보다 “무엇을 그리고 있는가”에 집중하도록 돕는다. ## 분야를 넘나드는 디자인 원칙 - 디자인 도구를 발전시키려면 현재 업계의 관습과 기준을 계속 재검토해야 한다. - 유용한 해결책은 과거의 디자인뿐 아니라 다른 분야에서도 발견될 수 있다. - 가구 디자인처럼 분야를 초월하는 원칙—기능 지원, 사용성, 절제, 재료와 도구의 이해—을 디지털 제품에 적용할 수 있다. - 디자이너는 자신의 전문 영역에만 머무르지 않고 역사와 타 분야를 폭넓게 참고해야 혁신적인 도구를 만들 수 있다. Figma를 설계할 때는 기능을 늘리는 것보다 사용자의 작업을 얼마나 자연스럽게 지원하는지에 초점을 두는 것이 중요하다. 최소한의 유연한 도구, 직관적인 조작, 의미를 전달하는 시각 체계를 갖추면 제품은 사용자의 창작을 돕면서도 전면에 나서지 않을 수 있다.