discord2026년 8월 4일

스퀴클, 스타일, 간격: 여러분의 피드백이 모바일 환경 개선에 어떻게 도움이 되고 있는가 (새 탭에서 열림)

Discord는 데스크톱과 모바일의 디자인 경험을 통일하기 위해 모바일 앱의 테마, 형태, 간격과 채팅 입력창을 개선했습니다. 데스크톱의 네 가지 기본 테마를 모바일에 도입하고, 사람은 원형·사물은 스퀘어클이라는 형태 규칙을 적용했습니다. 또한 채팅 바를 정리해 메시지 작성 공간을 넓히고, 자주 쓰는 기능에 더 쉽게 접근할 수 있도록 조정했습니다. ## 데스크톱과 모바일의 테마 통일 - 모바일에서도 데스크톱의 네 가지 기본 테마를 사용할 수 있습니다. - Light - Ash - Dark - Onyx - **Ash**는 기존 Discord의 클래식 다크 테마를 계승하면서 현대적인 접근성 기준에 맞게 대비를 개선했습니다. - **Onyx**는 단순히 어두운 회색이 아니라 완전한 검정색 배경을 사용하는 AMOLED 테마입니다. - OLED 화면에서 검정색 픽셀을 끌 수 있어 배터리 절약에 도움이 될 수 있습니다. - 모바일과 데스크톱에서 동일한 테마로 제공됩니다. - 접근성 설정에서 화면의 대비와 채도를 세부적으로 조절할 수 있습니다. ## 기기 설정에 맞춘 테마 자동 전환 - 사용자가 지정한 Light 테마와 Dark 테마를 기기의 시스템 모드에 맞춰 자동으로 전환할 수 있습니다. - Appearance 설정에서 **“Same as Device Theme”**를 활성화하면 됩니다. - 이 설정은 **Sync Across Devices**보다 우선 적용됩니다. - 모바일뿐 아니라 데스크톱에서도 지원됩니다. - Nitro 사용자는 프로필 테마의 색상에 맞춰 음성·영상 통화 타일의 배경도 변경할 수 있습니다. ## 사람은 원형, 사물은 스퀘어클 - 모바일과 데스크톱 전반에 일관된 형태 규칙이 적용됩니다. - 사용자, 친구, DM의 봇: 원형 - 서버, 앱 등 사물: 모서리가 둥근 사각형인 스퀘어클 - 서버 목록의 아이콘이 스퀘어클 형태로 바뀌어 사람과 서버를 빠르게 구분할 수 있습니다. - 버튼, 입력창, 컨테이너 등 다른 UI 요소의 둥근 모서리도 같은 기준에 맞춰 정리했습니다. - 개인 DM과 그룹 DM은 ‘친구 관계’를 나타내기 때문에 기존처럼 원형을 유지합니다. ## 메시지 입력창과 빠른 작업 메뉴 개편 - 채팅 바가 지나치게 복잡해진 문제를 해결하기 위해 메시지 작성 공간을 넓혔습니다. - 채팅 바 오른쪽에는 다음 기능이 계속 유지됩니다. - 이모지 - 선물 - 음성 메시지 - 자주 사용하는 빠른 작업 - 다음 기능은 **+ 메뉴** 안으로 이동했습니다. - 스레드 - 앱 사용 - **+ 버튼을 길게 누르면** 전체 메뉴를 열지 않고 원하는 작업으로 바로 이동할 수 있습니다. - 스레드나 앱을 자주 사용하는 사용자는 이전보다 한 단계 더 거쳐야 하지만, 길게 누르기 단축 동작으로 기존 접근 속도에 가깝게 사용할 수 있도록 했습니다. ## 플랫폼 간 일관성을 높인 모바일 업데이트 - 이번 업데이트의 목표는 모바일과 데스크톱을 서로 다른 앱처럼 느끼지 않도록 만드는 것입니다. - 동일한 테마 체계, 형태 규칙, UI 간격을 적용해 플랫폼을 바꿔도 익숙한 사용 경험을 제공하려 했습니다. - 변경 사항은 사용자 피드백을 바탕으로 모바일의 시각적 일관성과 사용성을 함께 개선하는 데 초점을 맞췄습니다. 모바일에서 클래식한 분위기를 원한다면 **Ash**, 배터리 효율과 완전한 검정 배경을 원한다면 **Onyx**를 선택하는 것이 적합합니다. 스레드나 앱을 자주 사용한다면 + 버튼 길게 누르기 동작을 익혀 새 채팅 바에 적응하는 것이 좋습니다.

mobile-app-designdesign-systemsdiscordaccessibility+3

figma2025년 2월 18일

좋은 동료들과 함께 (새 탭에서 열림)

뉴스 미디어 기업들은 디지털 전환과 구독 경쟁에 대응하기 위해 앱, 서체, 브랜드를 재설계하고 있으며, 이 과정에서 Figma를 협업과 프로토타이핑의 중심 도구로 활용한다. The New York Times 사례는 여러 콘텐츠 제품을 하나의 생태계로 연결하면서도 각 섹션의 정체성을 유지한 앱을 구축한 경우다. Figma는 편집자·디자이너·엔지니어·경영진이 비동기적으로 같은 화면과 프로토타입을 검토하게 해, 저널리즘의 형식 자체를 함께 설계하도록 돕는다. ## 디지털 시대의 뉴스 디자인 과제 - 신문사들은 웹과 모바일 중심으로 사업을 전환하고 새로운 콘텐츠 형식을 실험하고 있다. - 광고 시장의 불확실성으로 구독 모델이 중요해졌지만, 온라인 뉴스 이용자는 비용을 지불하는 데 상대적으로 소극적이다. - 따라서 기존 독자뿐 아니라 새로운 독자와 관계를 형성하고, 디지털 환경에서 뉴스의 정확성·명확성·접근성을 유지해야 한다. - 앱 개편, 서체 개발, 웹사이트 출시처럼 큰 변화에는 다양한 직군의 긴밀한 협업이 필요하다. ## The New York Times의 제품 생태계 중심 앱 개편 - 2024년 10월 개편된 앱은 뉴스뿐 아니라 Games, Cooking, Audio, Wirecutter, The Athletic 등 여러 제품을 하나의 구독 생태계로 연결한다. - 사용자는 앱을 열면 최신 뉴스가 모이는 **Today** 섹션을 먼저 보게 된다. - 상단 내비게이션을 통해 다른 제품과 콘텐츠 영역으로 이동할 수 있으며, 각 영역은 독립적인 홈 화면을 제공한다. - 핵심 전략은 모든 콘텐츠를 하나의 피드에 섞는 ‘슈퍼 앱’이 아니라, 저널리즘을 중심에 두고 각 제품이 고유한 방식으로 확장되는 구조다. ## 섹션별 시각적 정체성 - 각 콘텐츠 영역은 서로 다른 편집 목적과 독자 경험에 맞춰 시각 언어를 갖는다. - Lifestyle은 이미지와 제목을 겹쳐 배치한 그리드형 구성을 사용한다. - The Times가 “poster”라고 부르는 시각 중심 컴포넌트를 활용해 콘텐츠의 주목도를 높인다. - Opinion은 일반 뉴스와 다른 스타일의 제목 표현을 사용해 의견·관점 중심 콘텐츠라는 특성을 드러낸다. - 결과적으로 앱 전체의 일관성을 유지하면서도 각 제품과 섹션의 개성을 구분했다. ## Figma를 활용한 비동기 협업 - 편집자, 엔지니어, 디자이너, 고위 경영진, 스토리텔링 그룹이 하나의 Figma 파일에서 작업했다. - 스토리텔링 그룹은 뉴스룸과 협업해 이미지·텍스트·비디오·오디오를 조합한 다양한 기사 형식을 설계한다. - 팀원들은 화상회의나 화면 공유 없이 Figma에 들어가 작업물을 확인하고 의견을 교환할 수 있었다. - 디자이너는 기존처럼 발표용 덱을 반복해서 만드는 대신, Figma 안에서 직접 프로토타입을 공유했다. - 이를 통해 제품의 화면뿐 아니라 “저널리즘을 어떤 형태로 전달할 것인가”까지 함께 탐색할 수 있었다. ## 다른 미디어 기업의 사례 - 글은 The New York Times 외에도 The Economist의 디지털 친화적 서체 개발 사례를 다룬다. - The Minnesota Star Tribune은 Figma를 활용해 브랜드를 변화시킨 사례로 소개된다. - 세 사례 모두 변화하는 미디어 환경에서 디자인 시스템, 협업, 새로운 콘텐츠 형식이 경쟁력의 핵심이라는 점을 보여준다. ## 실용적인 시사점 - 대규모 디지털 제품을 개편할 때는 콘텐츠·디자인·개발·경영진이 같은 프로토타입을 기준으로 논의하는 것이 효과적이다. - 전체 브랜드의 일관성을 유지하되, 콘텐츠 유형별로 차별화된 시각적 정체성을 설계해야 한다. - Figma 같은 협업 도구를 단순한 화면 제작 도구가 아니라 편집 구조와 콘텐츠 전달 방식을 실험하는 공동 작업 공간으로 활용할 수 있다.

mobile-app-designfigmadesign-systemsprototyping+3

figma2024년 11월 25일

파블로 산체스의 예기 (새 탭에서 열림)

Ableton Note의 디자이너 Pablo Sánchez는 예상 가능한 관행을 따르기보다 개인적 확신과 다양한 분야의 영감을 바탕으로 낯선 경험을 설계해야 한다고 주장한다. 좋은 디자인은 객관적 분석만으로 만들어지는 것이 아니라, 디자이너의 취향과 경험이 사용자에게 진정성 있게 전달될 때 힘을 얻는다. Note는 복잡한 음악 제작 도구 대신 손으로 소리를 만지고 즉시 실험하는 경험을 제공함으로써 이러한 철학을 구현했다. ## 1. 자신을 위해 디자인하라 - 디자이너가 실제로 가장 잘 아는 사용자는 자기 자신이므로, 개인적 확신에서 출발해야 한다. - 모든 사용자의 요구를 객관적으로 맞추려다 보면 제품의 독창성과 방향성이 약해질 수 있다. - Pablo는 Note에 기존 음악 앱에서 흔히 볼 수 있는 MIDI 편집기를 넣는 대신, 모바일의 즉각적이고 촉각적인 특성에 맞춘 악기 인터페이스를 제안했다. - 사용자 테스트를 통해 이 방향이 검증되었고, Note는 MIDI 편집기 없이 출시되었다. - 16개 패드로 리듬을 두드리고, 멜로디와 코드 진행을 연주하며, Session View에서 변주를 만들 수 있다. ## 2. 브레인스토밍 단계에서는 레퍼런스를 배제하라 - 처음부터 다른 제품이나 디자인 사례를 참고하면 이미 존재하는 해결책의 틀 안에서 사고하게 된다. - 외부 레퍼런스 없이 자신의 경험과 기억에서 출발하면 더 독특한 아이디어를 만들 수 있다. - 과거에 접한 여러 요소가 무의식적으로 결합되는 ‘집단적 의식(plural consciousness)’을 신뢰해야 한다. - Pablo는 Samplr와 Borderlands Granular 같은 음악 앱의 영향을 받았지만, 이를 직접 모방하지 않고 본질적인 감각만 Note에 녹였다. - 브레인스토밍 단계에서는 모호함을 허용하고, 구체적인 결과물을 너무 일찍 확정하지 않는 것이 중요하다. ## 3. 디자인 바깥에서 영감을 찾아라 - 디자인 사례만 보는 대신 문학, 춤, 자연, 과학, 동물, 개인적 기억 등 다양한 영역에서 영감을 얻어야 한다. - 다른 분야의 감정과 구조를 디자인 문제에 적용하면 예측하기 어려운 새로운 관점이 생긴다. - Note는 기타를 집어 들고 즉흥적으로 연주하는 듯한 즉각성을 모바일 UX의 목표로 삼았다. - 장식을 덜어내고 재료 자체를 강조하는 브루탈리즘 건축의 시각 언어도 참고했다. - 그 결과 Note는 복잡한 음악 제작 기능을 숨기고, 사용자가 소리를 직접 만지고 조작할 수 있는 단순한 인터페이스를 제공한다. - 휴대폰 마이크로 소리를 녹음하고 시각화하는 샘플러 역시 이러한 직접성과 탐구성을 강화한다. ## 4. 내일을 위해 디자인하라 - Anthony Dunne과 Fiona Raby는 디자인을 ‘긍정적 디자인(affirmative design)’과 ‘비판적 디자인(critical design)’으로 구분한다. - 긍정적 디자인: - 현재 세계의 문제를 해결한다. - 현실에 대한 답을 제시하고 소비를 촉진한다. - 비판적 디자인: - 아직 드러나지 않은 문제를 제기한다. - 현재와 다른 세계가 어떻게 가능할지 질문하게 만든다. - 예상 밖의 디자인은 두 접근법 사이에 위치한다. - 새로운 가능성을 상상하게 한다. - 사용자가 기존 현실을 당연하게 받아들이지 않고 탐구하도록 자극한다. - 현재의 조건을 반복하기보다, “세상이 달라질 수 있다면 무엇이 가능한가”를 질문해야 한다. - 글에서 소개한 제노페미니즘의 “자연이 부당하다면 자연을 바꿔라”라는 주장은 현재의 한계를 넘어 미래를 상상하는 태도를 상징한다. 제공된 글은 4번째 규칙의 중간에서 끝나 있어 나머지 5~7번째 규칙은 확인할 수 없다. 다만 실무적으로는 익숙한 레퍼런스를 모방하기 전에 자신의 경험에서 출발하고, 디자인 외부의 분야를 탐구하며, 현재의 문제 해결을 넘어 미래의 가능성까지 상상하는 접근이 유용하다.

mobile-app-designui-uxuser-researchmusic-production+4

figma2018년 6월 20일

피그마 3.0 (!) (새 탭에서 열림)

Figma 3.0은 데스크톱 중심의 파편화된 디자인 작업을 웹 기반 협업 환경으로 통합하려는 업데이트다. 프로토타이핑, 디자인 시스템 관리, 대규모 조직 운영 기능을 강화해 InVision 같은 별도 도구와 반복적인 파일 동기화·내보내기 작업을 줄이는 것이 핵심이다. 디자인과 프로토타입, 댓글, 개발자 전달을 하나의 최신 상태로 연결해 팀 전체의 작업 효율을 높이려 한다. ## 웹 기반 디자인 워크플로 통합 - 데스크톱 기반 작업에서는 다음과 같은 문제가 발생한다. - 어떤 프로토타입에 이해관계자의 댓글이 있는지 확인하기 어렵다. - 스타일 가이드가 최신 상태인지 보장하기 어렵다. - 팀원들이 같은 디자인 버전을 보고 있는지 관리해야 한다. - Figma는 디자인 파일과 프로토타입, 댓글, 공유 기능을 웹에서 연결해 별도 앱 간 전환을 줄이려 한다. - 결과적으로 중복 도구와 구독 비용을 줄이고, 팀의 작업 흐름을 Figma 중심으로 통합하는 것이 목표다. ## 프로토타이핑 기능 강화 Figma 3.0은 디자인 파일에서 바로 동작하는 프로토타입 기능을 강화했다. - **디바이스 프레임** - iPhone, Android, Apple Watch 등 다양한 기기 프레임을 적용할 수 있다. - 디자인이 실제 기기에서 어느 정도 크기로 보이는지 팀원들이 쉽게 이해할 수 있다. - **고정 오브젝트** - 상태 표시줄, 헤더, 푸터, 버튼 등을 화면의 위·아래·측면에 고정할 수 있다. - 제약 조건과 함께 사용해 스크롤 중에도 특정 요소가 유지되도록 만들 수 있다. - 배경 블러와 블렌딩 모드를 적용하면 고정 요소의 시각적 완성도를 높일 수 있다. - **스크롤 가능한 영역** - 프레임 내부의 개별 도형이나 영역에 스크롤 동작을 설정할 수 있다. - 부모 프레임 자체가 스크롤되는 중첩 구조도 지원한다. - 이미지 캐러셀, 세로 목록, 가로·세로 어느 방향으로든 스크롤하는 화면을 구현할 수 있다. - **화면 전환** - dissolve, slide, push 등의 전환 효과를 제공한다. - 네이티브 모바일 앱과 유사한 움직임을 구현해 프로토타입의 완성도를 높인다. ## 디자인과 프로토타입의 실시간 연결 - 디자인의 색상이나 글꼴 크기를 수정하면 프로토타입에도 실시간으로 반영된다. - 디자인 파일과 댓글이 분리되지 않아, 피드백을 확인하기 위해 다른 앱이나 탭으로 이동할 필요가 줄어든다. - 모바일 브라우저에서 프로토타입을 열고 휴대폰을 리모컨처럼 사용해 발표할 수 있다. - 프로토타입이 디자인과 직접 연결되어 있어 화면을 별도로 내보내거나 버전을 동기화하는 관리 작업이 필요 없다. - 다만 Figma는 모든 프로토타이핑 요구를 대체한다고 단정하지 않고, 다른 도구와의 연동을 위해 API 개발도 함께 추진한다. ## Figma Styles와 디자인 시스템 - Figma Styles를 모든 사용자에게 공개했다. - 텍스트와 레이어 속성을 스타일로 정의해 회사 전체에서 일관된 디자인 요소를 관리할 수 있다. - 새로운 Team Library 기능과 결합하면 색상, 글꼴, 효과 등 디자인 시스템의 구성 요소를 팀 단위로 공유하고 유지할 수 있다. - 스타일 기능은 비공개 베타와 사용자 조사를 거쳐 개발되었으며, 여러 팀이 동일한 디자인 기준을 적용하는 것을 목표로 한다. ## Organization 요금제 - 대규모 조직을 위한 새로운 Organization 등급을 미리 공개했다. - 조직 규모가 커질수록 필요한 디자인 관리와 운영 체계를 확장하는 데 초점을 둔다. - Figma는 이를 Styles, Team Library, 개발자 전달, 댓글, 공유 컴포넌트와 함께 기업용 디자인 운영 기반으로 제시한다. ## 실용적인 결론 Figma 3.0은 디자인 파일을 단순히 편집하는 도구에서 프로토타이핑과 디자인 시스템, 협업을 함께 처리하는 플랫폼으로 확장한 업데이트다. 팀이 여러 버전의 파일과 별도 프로토타이핑 도구를 관리하고 있다면, Figma의 실시간 연결·공유·스타일 라이브러리를 활용해 작업 단계를 줄이는 것을 검토할 만하다.

mobile-app-designfigmadesign-systemsprototyping+3