사용자 인터페이스

71 개의 포스트

discord3분 읽기큐레이션 요약

소개합니다: You Bar

Discord는 모바일 앱의 탐색을 단순화하고, 사용자 정체성을 강조하며, 데스크톱과 모바일 경험을 통합하기 위해 새로운 하단 UI인 ‘You Bar’를 도입했습니다. 서버와 채널 중심으로 사용하는 실제 이용 패턴과 오픈월드 게임의 탐험 구조에서 영감을 받아, You Bar를 사용자가 Discord 세계를 이동하는 중심 인터페이스로 설계했습니다. 향후 서버별 프로필, 서버 태그, 활동 표시, 모바일 음성 기능 등으로 확장될 예정입니다. ## 서버 중심의 단일 탐색 구조 - 기존 모바일 Discord에는 서버를 이동하는 방식과 서버 외 기능으로 이동하는 방식이 동시에 존재해 초보 사용자에게 복잡하게 느껴질 수 있었습니다. - 사용자들이 대부분의 시간을 서버와 채널 탐색, 채팅, 음성 채널 이용, 공지 확인에 사용한다는 점에 주목했습니다. - 오픈월드 게임에서 캐릭터가 넓은 세계를 이동하는 방식에 착안해: - 서버와 채널은 탐험하는 ‘세계’ - You Bar는 그 세계를 이동하는 ‘사용자’를 상징하도록 구성했습니다. - 이를 통해 기존의 이중 탐색 체계를 하나의 서버 중심 탐색 시스템으로 단순화했습니다. ## You Bar의 주요 조작 방식 - You Bar를 탭하면 프로필이 열립니다. - 프로필 편집 - 설정 - 퀘스트 - 상점 등 기존 기능은 그대로 유지됩니다. - 벨 아이콘을 탭하면 알림을 확인할 수 있습니다. - You Bar를 길게 누르면 계정 메뉴가 열리고 온라인 상태를 변경할 수 있습니다. - 아바타를 길게 누르면 설정으로 바로 이동합니다. - You Bar를 왼쪽에서 오른쪽으로 쓸어 넘기면 DM과 현재 서버 사이를 전환할 수 있습니다. - UI 구조를 단순화하면서 소폭의 메모리 및 CPU 절감 효과도 기대할 수 있습니다. ## 사용자 정체성을 강조하는 디자인 - You Bar는 사용자가 Discord 안에서 자신을 표현하는 전용 공간으로 설계됐습니다. - 기존보다 더 크고 표현력이 풍부한 아바타를 배치했습니다. - 표시 이름과 상태 정보를 보다 세련된 방식으로 보여줍니다. - 아바타 장식과 이름표가 새로운 레이아웃에서 더 잘 드러나도록 했습니다. - 사용자가 아바타, 장식, 이름표 등을 조합해 개성을 표현하는 것을 주요 경험으로 삼았습니다. ## 모바일과 데스크톱 경험의 통합 - 데스크톱과 모바일 앱이 서로 다른 속도로 발전하면서 디자인과 사용 경험이 점점 달라졌습니다. - You Bar는 데스크톱 UI를 모바일에 그대로 복제하려는 것이 아니라, 플랫폼별 장점을 유지하면서 Discord의 기본 경험을 더 일관되게 만드는 단계입니다. - 향후 모바일 사용성을 개선하기 위한 여러 변경 사항 중 하나로 추진되고 있습니다. ## 향후 추가될 기능 - **서버별 You Bar** - 현재 서버에 별도 프로필을 설정했다면 해당 프로필에 맞춰 You Bar가 변경됩니다. - **서버 태그** - 사용자가 좋아하는 서버의 태그를 You Bar에 표시할 수 있게 됩니다. - **활동 상태 표시** - 게임 플레이, 음악 감상 등 현재 활동을 You Bar에서 확인할 수 있습니다. - **애니메이션 설정** - 아바타 장식과 이름표의 애니메이션을 You Bar에서 언제 재생할지 사용자가 선택할 수 있습니다. - **확장된 프로필 공간** - 단순한 정적 프로필 페이지가 아니라, 사용자를 위한 독립적인 공간으로 프로필 화면을 재설계할 계획입니다. - **개선된 모바일 음성 경험** - 데스크톱에서 익숙한 음성 채널 입장 및 이탈 경험을 모바일에도 가져오는 작업이 예고됐습니다. You Bar는 단순히 새로운 하단 메뉴를 추가한 것이 아니라, Discord 모바일의 탐색 방식을 서버 중심으로 재구성하고 사용자의 정체성을 전면에 내세우려는 디자인 개편입니다. 모바일 Discord를 자주 사용한다면 새로운 제스처와 메뉴 위치를 익히는 것이 좋으며, 향후 서버별 프로필과 음성 기능 확장까지 고려하면 모바일 경험의 중심 인터페이스가 될 가능성이 큽니다.

원문 읽기(새 탭에서 열림)
kakao4분 읽기큐레이션 요약

카카오톡 예약하기에서 그려 본 캘린더

카카오톡 예약하기는 카드 목록만으로는 재고와 예약을 한눈에 파악하기 어렵다는 문제를 해결하기 위해 타임 블록형 캘린더를 구현했다. 예약을 시작 시간과 종료 시간에 따라 정렬하고, 겹치는 예약을 그래프로 모델링한 뒤 DFS로 배치 깊이와 확장 가능 범위를 계산했다. 이후 루트 노드 간의 길이 차이로 남는 공간이 생기는 예외까지 보정해 예약 블록을 최대한 빈틈없이 배치했다. ## 캘린더 제작 배경과 요구사항 - 파트너센터의 예약 관리 화면은 예약을 카드 목록으로 보여주고 있었다. - 카드 목록은 많은 예약과 재고를 한눈에 비교하기 어렵다는 불편이 있었다. - 이를 해결하기 위해 예약과 재고를 시간축 위에서 확인할 수 있는 타임 블록형 캘린더를 제작했다. - 주요 요구사항은 다음과 같다. - 하나의 시간대에 최대 10개의 예약이 존재할 수 있다. - 하나의 예약은 최대 6시간을 차지한다. - 예약 블록 사이에 빈 공간을 최소화하면서 최대한 잘 보이게 배치해야 한다. ## 예약 배치 순서 ### 이용 시간이 이른 예약부터 정렬 - 예약이 입력된 순서가 아니라 시작 시간이 빠른 순서대로 배치했다. - 판매자가 하루를 시작할 때 가장 먼저 확인할 가능성이 높은 예약을 왼쪽 위에 배치하기 위한 결정이다. - 사용자의 시선이 일반적으로 왼쪽 위에서 오른쪽 아래로 이동한다는 시각적 우선순위도 고려했다. - 첫 번째 배치 규칙은 **“이용 시간이 이른 순서로 정렬한다”**이다. ### 같은 시간에는 소요 시간이 긴 예약부터 정렬 - 같은 시간대에 여러 예약이 겹치면 소요 시간이 긴 예약을 앞에 배치했다. - 긴 예약이 뒤로 밀리면 앞쪽 예약이 차지한 공간 때문에 긴 블록의 확장이 제한될 수 있다. - 긴 예약을 먼저 배치하면 이후 예약들이 남은 공간을 기준으로 배치되고, 각 예약이 확보할 수 있는 영역을 예측하기 쉬워진다. - 두 번째 배치 규칙은 **“같은 시간 내에서는 소요 시간이 긴 순서로 정렬한다”**이다. ## 예약을 그래프로 모델링 - 단순히 DOM 요소의 위치를 조정하는 대신, 예약 간의 겹침 관계를 그래프로 표현했다. - 각 예약을 그래프의 노드로 만들고, 서로 영향을 주는 예약을 연결했다. - 노드에는 예약 정보와 함께 이전 예약(`prevBooking`), 다음 예약(`nextBooking`) 같은 연결 관계를 저장했다. - 이 구조를 이용하면 예약이 어떤 경로로 연결되어 있고, 어느 정도까지 확장될 수 있는지 계산할 수 있다. ## DFS를 이용한 위치와 확장 범위 계산 - 각 노드에서 DFS를 수행해 다음 정보를 계산했다. - 그래프에서의 깊이 또는 레벨 - 연결된 예약 중 가장 끝에 있는 예약까지의 최대 거리(`maxLength`) - 깊이는 예약 블록의 가로 방향 위치를 결정하는 데 사용된다. - 최대 거리는 해당 예약이 오른쪽으로 얼마나 확장될 수 있는지 판단하는 기준이 된다. - 계산된 값을 바탕으로 각 노드의 다음 UI 속성을 구한다. - `left`: 블록의 시작 위치 - `width`: 블록이 차지할 가로 너비 - 그래프의 가장 왼쪽에 있는 노드부터 기준을 잡아 예약 블록을 배치하고 확장했다. ## 루트 노드 간 길이 차이로 발생한 예외 - 초기 알고리즘은 모든 예약이 연결된 그래프에서도 공간이 남는 경우를 완전히 처리하지 못했다. - 위쪽 루트 노드의 `maxLength`가 더 길고, 아래쪽 루트 노드의 `maxLength`가 짧으면 하위 그래프가 끝까지 확장되지 않았다. - 그 결과 예약 간 연결은 유지되지만 일부 빈 공간이 남는 문제가 발생했다. - 이 문제를 해결하기 위해 다음과 같은 보정 과정을 추가했다. - 현재 노드의 `left + width`보다 다음 노드의 `left`가 크면 두 노드 사이에 확장 가능한 공간이 있다고 판단한다. - 해당 노드와 연결된 예약들을 확인한다. - 여러 개의 빈 공간이 있으면 가장 작은 공간을 기준으로 연결된 노드들의 너비를 확장한다. - 이 과정을 반복해 예약 블록이 가능한 한 빈틈없이 영역을 채우도록 했다. ## 구현 과정에서 얻은 교훈 - 겉보기에는 단순한 UI라도 다양한 입력 데이터와 최악의 배치 상황을 고려해야 한다. - 타임 블록 캘린더는 예약의 정렬, 겹침 처리, 가로 확장, 예외 보정이 결합된 알고리즘 문제에 가깝다. - 그래프와 DFS 같은 자료구조·알고리즘이 실제 프런트엔드 UI 배치 문제를 해결하는 데 직접 활용될 수 있다. - 프런트엔드 개발자는 데이터를 화면에 어떻게 보여줄지 결정하는 책임과 권한을 함께 가진다. - 실제 서비스에서는 초기 알고리즘을 완성형으로 보기보다, 운영 중 발견되는 버그와 새로운 입력 패턴에 맞춰 지속적으로 개선해야 한다. 타임 블록 캘린더를 구현할 때는 먼저 예약을 시작 시간과 지속 시간 기준으로 안정적으로 정렬하고, 겹침 관계를 그래프로 모델링하는 방식이 유용하다. 이후 DFS로 배치 깊이와 확장 범위를 계산하되, 루트별 길이 차이로 생기는 잔여 공간과 같은 예외 케이스를 별도로 검증하는 것이 중요하다.

원문 읽기(새 탭에서 열림)
discord3분 읽기큐레이션 요약

데스크톱 디스코드 화면 최적화: 눈이 편안해지는 디스플레이 설정

Discord 데스크톱 앱은 미디어 표시 방식, 색상 강도, HDR, 이름 스타일, UI 밀도와 글자 크기 등을 조정해 눈의 피로를 줄일 수 있다. 사용자는 이미지·영상·링크 미리보기를 필요할 때만 표시하거나, 색상과 밝기를 낮추고, 화면에 표시되는 정보량을 자신의 선호에 맞게 바꿀 수 있다. 이러한 설정은 데스크톱과 웹 앱을 중심으로 설명되지만 일부는 모바일에서도 유사하게 제공된다. ## 대화 속 미디어 표시 제어 - **이미지·영상 자동 표시 설정** - `사용자 설정 > 디스플레이 > 메시지`에서 미디어 표시 방식을 조정할 수 있다. - 링크로 게시된 이미지·영상과 Discord에 직접 업로드된 파일을 각각 필요할 때만 열도록 설정할 수 있다. - **링크 미리보기 끄기** - “임베드 및 링크 미리보기 표시”를 끄면 링크 아래에 자동으로 생성되는 미리보기를 숨길 수 있다. - **이미지 설명(Alt Text) 표시** - 작성자가 이미지 설명을 입력한 경우 Alt Text 버튼을 통해 내용을 확인할 수 있다. - 이미지 설명을 기본적으로 확인하도록 설정할 수 있다. - **스포일러 콘텐츠 표시** - 스포일러 처리된 이미지나 영상을 다음 방식으로 표시할 수 있다. - 클릭할 때만 표시 - 항상 표시 - 자신이 관리하는 서버에서만 표시 - **링크 항상 밑줄 표시** - 링크에 색상뿐 아니라 밑줄도 적용해 링크임을 쉽게 구분할 수 있다. - 색상 채도를 낮췄을 때 파란색 링크가 잘 보이지 않는 문제를 보완하는 데 유용하다. ## Discord 색상과 밝기 낮추기 - **전체 인터페이스 채도 조절** - 채도를 낮추면 버튼, 상태 표시, 클릭 가능한 링크 등 Discord UI의 색상 강도가 줄어든다. - “사용자 지정 색상에도 적용”을 활성화하면 역할 색상 등 다른 사용자가 지정한 인터페이스 색상에도 적용된다. - 아바타, 사용자 지정 이모지, 업로드된 사진·영상처럼 사용자가 만든 콘텐츠의 색상은 조정되지 않는다. - **역할 색상을 이름 옆 점으로 표시** - 역할 색상으로 전체 표시 이름을 칠하는 대신 이름 왼쪽의 작은 점으로 표시할 수 있다. - 배경색과 비슷한 역할 색상 때문에 이름이 잘 보이지 않는 문제를 줄일 수 있다. - **HDR 콘텐츠 밝기 낮추기** - HDR 모니터에서 지나치게 밝게 표시되는 이미지·영상의 강도를 낮출 수 있다. - `접근성 > 하이 다이내믹 레인지`에서 전체 동적 범위와 표준 범위 사이를 선택한다. - **표시 이름 스타일 숨기기** - Nitro 사용자가 적용한 특수 글꼴이나 색상 효과가 산만하다면 `접근성 > 텍스트 가독성`에서 “표시 이름 스타일”을 끌 수 있다. - 이 설정은 본인 화면에만 적용되며 다른 사용자에게는 영향을 주지 않는다. ## UI 밀도와 글자 크기 조정 - Discord의 UI 밀도를 조절해 한 화면에 더 많은 정보를 표시하거나, 요소 사이 간격을 넓혀 구분하기 쉽게 만들 수 있다. - 글자 크기와 화면 요소의 크기를 자신의 시력과 사용 환경에 맞게 확대·축소할 수 있다. - 데스크톱, 노트북, 웹 앱 등 사용하는 화면 크기와 목적에 따라 밀도와 텍스트 크기를 다르게 설정하면 읽기 편의성을 높일 수 있다. 눈의 피로가 크다면 먼저 이미지·영상 자동 표시와 링크 미리보기를 끄고, 채도와 HDR 범위를 낮추는 것이 효과적이다. 이후 링크 밑줄, 역할 색상 표시 방식, 이름 스타일 숨기기, UI 밀도와 글자 크기를 조합해 자신에게 가장 편안한 Discord 환경을 구성하면 된다.

원문 읽기(새 탭에서 열림)
cloudflare원문

Agent Lee를 소개합니다 - Cloudflare 스택의 새로운 인터페이스 (새 탭에서 열림)

Cloudflare가 발표한 'Agent Lee'는 복잡한 대시보드 인터페이스를 자연어 중심의 지능형 에이전트로 전환하려는 시도의 결과물입니다. 이 에이전트는 사용자의 Cloudflare 계정 리소스를 깊이 있게 이해하며, 단순한 질의응답을 넘어 문제 해결(Troubleshooting)과 실제 인프라 설정 변경 및 배포까지 직접 수행할 수 있습니다. 결과적으로 개발자는 수많은 탭을 오가며 설정과 로그를 대조하는 번거로움 없이 단일 프롬프트만으로 전체 플랫폼을 제어할 수 있게 됩니다. ### Agent Lee의 주요 역량과 활용 * **문제 진단 및 즉각적인 해결**: Worker에서 발생하는 503 에러나 DNS 설정 오류 등 복잡한 장애 상황을 파악하고, 원인 분석뿐만 아니라 실제 수정 조치까지 제안하고 실행합니다. * **통합 리소스 관리**: R2 버킷 생성, Worker 연결, 도메인 Access 활성화 등 서로 다른 제품군에 걸친 작업을 명령 한 번으로 수행할 수 있습니다. * **맥락 기반의 정보 통합**: DNS, Workers, SSL/TLS, Cache 등 계정 내 모든 데이터를 통합적으로 이해하여 "내 Worker에서 발생하는 주요 에러 5개를 보여줘"와 같은 계정 특화 질문에 답변합니다. ### 기술적 구현: Codemode와 성능 최적화 * **TypeScript API 활용**: MCP(Model Context Protocol) 도구 정의를 모델에 직접 전달하는 대신, 이를 TypeScript API로 변환하는 'Codemode'를 채택했습니다. 이는 LLM이 코드 작성에 더 능숙하다는 점을 활용해 정확도를 높이기 위함입니다. * **라운드트립 최적화**: 다단계 작업이 필요한 경우 모델이 여러 도구 호출을 하나의 스크립트로 체이닝(Chaining)하여 실행함으로써 불필요한 통신 횟수를 줄입니다. * **샌드박스 실행**: 생성된 코드는 업스트림 MCP 서버에서 격리된 상태로 실행되며, Durable Objects를 통해 안전하게 프록시 처리됩니다. ### 보안 및 권한 관리 아키텍처 * **읽기/쓰기 권한 분류**: Durable Objects가 생성된 코드를 분석하여 단순 조회(Read)와 변경(Write) 작업을 구분합니다. * **명시적 승인 게이트(Elicitation Gate)**: 모든 '쓰기' 작업은 사용자의 명시적인 승인 없이는 실행될 수 없도록 설계되었습니다. 이는 UX 차원의 확인 창이 아닌, 아키텍처 수준에서 강제되는 보안 경계입니다. * **자격 증명 보호**: API 키는 코드 내에 포함되지 않으며, 서버 측 Durable Object 내부에 보관되었다가 호출 시점에만 주입되어 모델에 노출되지 않습니다. ### 생성형 UI(Generative UI)와 시각화 * **동적 컴포넌트 생성**: 텍스트 답변에 그치지 않고 대화 맥락에 따라 차트, 아키텍처 맵, 테이블 등 대화형 UI 요소를 실시간으로 렌더링합니다. * **적응형 그리드 시스템**: 사용자는 캔버스 위의 그리드를 드래그하여 새로운 UI 블록 공간을 만들고, 에이전트에게 필요한 시각화 자료를 요청하여 자신만의 대시보드를 구성할 수 있습니다. * **데이터 시각화**: 트래픽 추이를 물으면 분석 페이지로 이동하는 대신 대화창 내에 직접 인터랙티브한 선 그래프를 그려줍니다. Agent Lee는 현재 베타 단계로, Cloudflare의 Agents SDK와 Workers AI 등 실제 고객이 사용하는 것과 동일한 기술 스택으로 구축되었습니다. 복잡한 클라우드 인프라 관리를 자동화하고자 하는 개발자들에게 매우 유용하며, 특히 야간 장애 대응이나 복합적인 리소스 배포 시 작업 시간을 획기적으로 단축할 수 있는 도구가 될 것으로 보입니다. 다만 베타 버전인 만큼 중요 설정을 변경할 때는 에이전트가 제시하는 변경 내역을 꼼꼼히 확인하는 과정이 필요합니다.

discord원문

디스코드 업데이트: 2026년 3월 24일 변경 사항 (새 탭에서 열림)

디스코드의 2026년 3월 업데이트는 사용자들이 데스크톱 앱에서 보다 직관적이고 빠르게 소통할 수 있도록 내비게이션 성능과 게임 관련 편의 기능을 대폭 강화하는 데 초점을 맞췄습니다. 화면 공유 시의 조작성 향상과 브라우저 방식의 앞/뒤 이동 버튼 도입 등 사용자 피드백을 반영한 실질적인 기능 개선이 이루어졌으며, 전반적인 앱 반응 속도 또한 최적화되었습니다. 이번 업데이트를 통해 사용자들은 대규모 서버 관리부터 개인적인 게임 스트리밍까지 더욱 쾌적한 환경에서 경험할 수 있게 되었습니다. ### 게임 몰입감을 높이는 스트리밍 및 소셜 기능 - **화면 공유 줌 및 팬 기능:** 이제 화면 공유(Screenshare) 시 마우스 휠이나 트랙패드를 이용해 화면을 확대(Zoom)하거나 특정 위치로 이동(Pan)할 수 있어, 복잡한 게임 UI나 작은 텍스트도 선명하게 확인할 수 있습니다. - **간편한 음성 채널 초대:** 음성 채팅 중 '음성 채널 초대' 옵션을 통해 서버 내 친구뿐만 아니라 서버 외부에 있는 가까운 친구에게도 빠르게 참가를 권유할 수 있는 추천 시스템이 도입되었습니다. - **게임 스탯 위젯 확장:** 프로필 위젯에서 지원하는 게임이 추가되었습니다. '명조: 워더링 웨이브(Wuthering Waves)' 계정을 연동해 업적 수나 선호 캐릭터 등 세부 스탯을 프로필에 전시할 수 있습니다. - **마블 라이벌즈 아이템 선물:** 서버 디스커버리를 통해 '마블 라이벌즈' 서버의 게임 샵에 방문하면 위시리스트 아이템을 친구에게 선물하거나 자신에게 직접 구매해 줄 수 있습니다. ### 빠르고 효율적인 앱 내비게이션 최적화 - **성능 및 지연 시간 개선:** 데스크톱 앱 내부 구조를 업그레이드하여 앱 내 메뉴를 이동할 때 발생하는 랙(Lag)을 크게 줄였으며, 전반적인 반응 속도가 눈에 띄게 빨라졌습니다. - **앞으로/뒤로 가기 버튼 추가:** 웹 브라우저처럼 앱 왼쪽 상단에 내비게이션 버튼이 생겼습니다. 마우스의 측면 버튼을 이용한 이동 기능도 지원하여 이전에 방문했던 채널이나 설정 페이지로 빠르게 돌아갈 수 있습니다. - **역할(Role) 구성원 확인:** 채팅창에 언급된 @역할(Role) 태그를 클릭하면 해당 역할을 가진 사용자를 최대 100명까지 즉시 리스트로 보여주어 관리 효율성을 높였습니다. ### 설정 인터페이스 및 개발자 지원 업데이트 - **데스크톱 설정 디자인 개편:** 알림, 음성 및 비디오, 클립, 스트리머 모드 등의 설정 페이지 레이아웃이 정리되었습니다. 더 명확한 문구와 정돈된 스타일을 통해 원하는 옵션을 쉽게 찾을 수 있습니다. - **GDC 2026 발표 내용 공유:** 게임 개발자 컨퍼런스(GDC)에서 발표된 게임 성장 지원 도구들에 대한 정보를 블로그를 통해 공개하며, 개발자들이 디스코드 생태계를 활용할 수 있는 새로운 방법들을 제시했습니다. 데스크톱 앱을 최신 버전으로 업데이트하여 더욱 빨라진 내비게이션과 편리해진 화면 공유 기능을 직접 체험해 보시기 바랍니다. 특히 마우스 측면 버튼을 활용한 앞/뒤 이동 기능은 다수의 서버를 관리하는 사용자들에게 매우 유용한 도구가 될 것입니다.

figma3분 읽기큐레이션 요약

슬롯(Slots)으로

Figma의 ‘슬롯(slots)’은 컴포넌트의 구조와 연결 상태는 유지하면서 내부 콘텐츠를 자유롭게 바꾸는 기능이다. 이를 통해 디자이너는 컴포넌트를 분리(detach)하지 않고도 다양한 콘텐츠를 구성할 수 있으며, 디자인 시스템 관리자는 과도한 variants와 유지보수 부담을 줄일 수 있다. 글은 초기 사용자들의 사례를 바탕으로 슬롯을 효과적으로 도입하는 방법을 소개한다. ## 슬롯이 해결하는 디자인 시스템의 문제 - 디자인 시스템이 커질수록 일관성을 위한 제약이 표현의 자유를 제한할 수 있다. - 디자이너들은 이를 해결하기 위해 다음과 같은 우회 방법을 사용한다. - 컴포넌트 variants를 계속 추가 - 모든 가능한 상태를 고려해 숨겨진 레이어를 미리 포함 - 컴포넌트를 detach해 개별 수정 - 그 결과 라이브러리가 비대해지고, 디자인과 실제 코드 구현 사이의 연결도 약해진다. - 슬롯은 안정적인 컴포넌트 구조 안에 콘텐츠를 동적으로 삽입한다는 점에서 코드의 컴포넌트 구성 방식과 유사하다. ## 팀별 기대 효과 - **디자인 시스템 관리자** - variants 수와 유지보수 작업 감소 - 실제 제품 구조와 더 밀접하게 연결 - **디자이너** - 시스템 밖으로 나가지 않고도 콘텐츠와 표현을 자유롭게 조정 - 컴포넌트를 detach하지 않고 맞춤 구성 가능 - **개발자** - 코드로 구현되는 구조와 유사한 예측 가능한 디자인 전달 - 핸드오프와 구현 과정 단순화 - 슬롯은 자동화와 AI가 디자인 구조를 해석하는 데에도 유리한 형태를 제공한다. - Figma는 Schema 2025에서 슬롯을 공개했으며, 글 작성 시점에는 오픈 베타로 제공하고 있다. ## 1. 사용 빈도가 높은 컴포넌트부터 시작하기 - 슬롯 도입 효과가 가장 큰 대상은 이미 많은 사용자가 detach하고 있는 컴포넌트다. - 초기 사용자들이 우선 적용한 대표 컴포넌트는 다음과 같다. - 대화상자(dialog) - 메뉴와 드롭다운 - 모달 - 카드 - 패널 - 특히 다음 조건을 만족하는 컴포넌트를 우선순위로 삼는 것이 좋다. - 여러 화면에서 반복적으로 사용됨 - 시스템 안에서 중복되어 있음 - variants가 지나치게 많음 - 다양한 유형의 콘텐츠를 수용해야 함 ### 반복 요소가 있는 컴포넌트 - 메뉴와 리스트는 가능한 항목 수를 처리하기 위해 숨겨진 레이어를 다수 포함하는 경우가 많다. - 예를 들어 기본 리스트에 3개 항목을 표시하면서 7개 항목을 숨겨둘 수 있지만, 11번째 항목이 필요하면 결국 컴포넌트를 detach하게 된다. - 슬롯을 사용하면 필요한 항목만 추가할 수 있다. - 기본 컴포넌트가 불필요하게 커지지 않음 - 콘텐츠가 늘어나도 원래 컴포넌트와의 연결 유지 - 모든 가능한 항목 수를 variants로 미리 만들 필요 없음 ### variants가 급증하는 컴포넌트 - 모달과 카드는 제목, 설명, 미디어, 버튼 조합에 따라 수많은 variants가 생기기 쉽다. - 슬롯을 사용하면 구조는 그대로 유지하면서 필요한 콘텐츠만 교체하거나 삽입할 수 있다. - 따라서 구조는 일정하지만 콘텐츠가 자주 달라지는 컴포넌트에 특히 효과적이다. ## 2. 미리 채운 슬롯과 빈 슬롯을 목적에 맞게 사용하기 - 슬롯을 만들 때 기본 콘텐츠를 넣을지 비워둘지 결정해야 한다. - **미리 채운 슬롯** - 컴포넌트가 어떻게 사용되는지 보여주는 맥락을 제공한다. - 대부분의 사용자가 수정하지 않아도 되는 기본 상태를 표현할 수 있다. - 예를 들어 카드 오른쪽 위에 항상 아이콘이 있다면 매번 아이콘을 삽입하게 만들 필요가 없다. - **빈 슬롯** - 디자이너가 반드시 콘텐츠를 추가해야 한다는 점을 명확히 전달한다. - 사용자의 다음 행동을 유도하는 자리 표시자 역할을 한다. - 기존에 인스턴스 교체(instance swap)로 흉내 내던 패턴을 더 직접적으로 표현할 수 있다. - 기본 콘텐츠가 예측 가능한 경우에는 미리 채운 슬롯을, 콘텐츠 입력이 필수인 경우에는 빈 슬롯을 사용하는 것이 적절하다. ## 도입 시 고려할 기준 - 모든 컴포넌트에 한꺼번에 슬롯을 적용하기보다, 실제 우회 사용이 많이 발생하는 소수의 고빈도 컴포넌트부터 시작한다. - 구조는 유지되지만 콘텐츠가 자주 바뀌는 영역을 우선 찾는다. - 슬롯의 기본 콘텐츠가 사용자에게 충분한 맥락을 주는지, 혹은 빈 상태가 명확한 행동을 유도하는지 검토한다. - 이를 통해 디자인 시스템의 통제력은 유지하면서도 실제 제품에 필요한 유연성을 확보할 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Claude Code에서 Figma로: 프로덕

Claude Code에서 실행 중인 UI를 Figma로 가져와 편집 가능한 프레임으로 변환할 수 있게 되었다. 이를 통해 코드의 빠른 프로토타이핑과 Figma 캔버스의 협업·탐색 기능을 연결하고, 개발자·디자이너·PM이 동일한 결과물을 바탕으로 더 이른 시점에 의견을 나눌 수 있다. 핵심은 코드를 최종 결과로 고정하지 않고, Figma에서 여러 방향을 비교·발전시키는 것이다. ## 코드에서 캔버스로 확장하는 이유 - Claude Code를 사용하면 실제 데이터와 상호작용을 포함한 UI를 빠르게 구축하고 테스트할 수 있다. - 코드 기반 작업은 한 번에 하나의 상태를 구현하고 확인하는 데 강하다. - 반면 Figma 캔버스는 전체 흐름과 여러 대안을 한눈에 배치하고, 팀과 함께 논의하는 데 유리하다. - 따라서 코드는 아이디어를 빠르게 수렴시키고, 캔버스는 아이디어를 다시 확장하고 탐색하는 공간이 된다. ## 브라우저 화면을 편집 가능한 Figma 프레임으로 변환 - 프로덕션, 스테이징, 로컬호스트에서 실행 중인 UI를 캡처할 수 있다. - 캡처한 화면은 클립보드로 복사하거나 Figma 파일로 전송할 수 있다. - Figma에 붙여넣은 결과는 단순한 이미지가 아니라 정리·복제·수정 가능한 프레임으로 변환된다. - 여러 화면을 한 세션에서 캡처하면 화면 간 순서와 흐름도 함께 보존할 수 있다. ## 혼자 만드는 프로토타입에서 팀 협업으로 - 코드 우선 작업은 초기에는 빠르지만, 화면과 상태가 늘어나면 한 사람이 브랜치·개발 서버·전체 맥락을 모두 관리해야 한다. - 기존에는 피드백을 받기 위해 스크린샷이나 녹화 영상을 공유하거나, 다른 사람이 직접 로컬에서 빌드를 실행해야 했다. - Figma로 가져오면 팀원들이 같은 캔버스에서 직접 주석을 달고, 불명확한 부분을 표시하며, 개선 방향을 제안할 수 있다. - 다른 사람이 코드 환경으로 전환하거나 여러 파일을 수정하지 않아도 대안을 논의할 수 있다. ## 첫 번째 아이디어가 아닌 최선의 아이디어 찾기 - AI로 작동하는 프로토타입을 빠르게 만들 수 있게 되면서, 논의의 초점은 “어떻게 만들까”에서 “어떤 버전을 발전시킬까”로 이동했다. - Figma Make의 결과물을 캔버스로 가져오는 방식과 마찬가지로, Claude Code의 구현 결과도 편집 가능한 디자인 산출물로 전환된다. - 출발점이 Figma Make인지 Claude Code인지와 관계없이, 구체적인 결과물을 먼저 만든 뒤 반복적으로 발전시키는 것이 목표다. ## Figma에서 가능한 네 가지 탐색 - **전체 시스템을 시각적으로 확인** - 여러 화면과 단계별 흐름을 나란히 배치할 수 있다. - 반복되는 패턴, 누락된 단계, 디자인 불일치, 트레이드오프를 쉽게 발견할 수 있다. - **코드를 다시 작성하지 않고 변형 실험** - 프레임을 복제하고 순서를 재배치하며 구조적 대안을 비교할 수 있다. - 단순한 아이디어 검증을 위해 코드를 다시 구현할 필요가 없다. - 폐기한 대안도 남겨둘 수 있어 이후 재검토가 가능하다. - **더 이른 시점에 의사결정** - 디자이너, 엔지니어, PM이 동일한 맥락과 완성도의 결과물을 함께 검토한다. - 정답이 명확하지 않은 문제도 초기에 질문과 쟁점을 드러낼 수 있다. - 변경 비용이 낮을 때 방향을 조정할 수 있다. - **구현된 UI를 팀의 방향성으로 전환** - 실제로 작동하는 UI를 개인의 코드 환경에만 머무는 결과물이 아니라 공유 가능한 디자인 자산으로 만든다. - 팀은 구현 결과를 기준으로 제품의 사용감, 사용자 안내 방식, 가치 전달 방법을 함께 논의할 수 있다. ## 실용적인 결론 Claude Code는 빠른 구현과 실제 동작 검증에 사용하고, 방향을 비교하거나 팀의 피드백을 모을 때는 결과물을 Figma로 가져오는 방식이 효과적이다. 특히 여러 화면으로 구성된 사용자 흐름이나 대안 비교가 필요한 작업에서는 코드와 캔버스를 오가는 과정이 초기 의사결정과 협업을 크게 단순화할 수 있다.

원문 읽기(새 탭에서 열림)
toss원문

토스의 새로운 얼굴 만들기 (새 탭에서 열림)

토스는 서비스의 인상과 신뢰감을 효과적으로 전달하기 위해 기존의 인물 그래픽을 고도화했습니다. 기존의 귀엽고 어린 이미지를 탈피하여 똑똑하고 믿음직한 '토스다운' 인상을 구축하고, 글로벌 확장에 발맞춰 다인종·다문화 환경을 포용할 수 있는 보편적인 디자인 체계를 마련하는 데 집중했습니다. 이를 통해 어떤 화면에서도 완성도를 유지하며 사용자에게 친근하면서도 전문적인 가치를 전달하는 새로운 페르소나를 완성했습니다. **토스다운 신뢰감을 주는 인물 비율 조정** - 기존 그래픽은 얼굴의 세로 비율이 짧아 다소 어려 보이고 신뢰감이 부족하다는 피드백이 있었습니다. - 얼굴 형태를 크게 바꾸어 이질감을 주는 대신, 눈·코·입의 배치와 표현을 미세하게 조정하여 지적이고 성숙한 인상의 균형점을 찾았습니다. - 도형을 단순히 이어 붙인 구조에서 탈피하여 목과 어깨의 곡선을 다듬고 입체감을 더해 조형적 완성도를 높였습니다. - 단정하고 전문적인 분위기를 자아낼 수 있도록 과한 디테일이 배제된 짧은 목폴라 형태의 의상을 기본 착장으로 설정했습니다. **성별과 인종의 경계를 허무는 중립적 디자인** - 특정 성별로 치우치지 않는 중성적인 헤어 스타일을 개발하여 성별 중립적인 인상을 구현했습니다. - 헤어의 부피감을 보완하고 라인을 정돈하여 화면 크기가 커지더라도 그래픽의 밀도가 떨어져 보이지 않도록 개선했습니다. - 단일한 스킨톤에서 벗어나 이모지의 표준을 참고한 다섯 가지 스킨톤 체계를 정의함으로써 다양성을 수용했습니다. - 여러 인물이 등장하는 화면에서는 다양한 스킨톤을 섞어 배치할 수 있도록 가이드를 마련하여 유니버설 디자인의 가치를 투영했습니다. **글로벌 확장을 고려한 포용적 그래픽 시스템** - 한국 중심의 서비스에서 글로벌 시장으로 확장함에 따라 특정 문화권에 국한되지 않는 보편적인 얼굴이 필요해졌습니다. - 노란색과 같은 추상적인 중립 컬러 대신 실제 인종의 다양성을 반영한 컬러 시스템을 선택하여 사용자들의 공감을 유도했습니다. - 디자인 개선 후 실제 앱 적용 시 주변 인터페이스 요소들과 자연스럽게 어우러지며 브랜드의 지향점을 명확히 드러내고 있습니다. 이러한 개편은 단순한 시각적 변화를 넘어 토스가 지향하는 포용성과 신뢰라는 브랜드 가치를 사용자에게 더 가깝게 전달하는 역할을 합니다. 향후에도 인종, 성별, 연령에 관계없이 누구나 자신을 투영할 수 있는 중립적이고 포용적인 그래픽 시스템을 지속적으로 확장해 나갈 것으로 기대됩니다.

figma3분 읽기큐레이션 요약

프레스 스타트: 컨트롤러

게임 인터페이스는 사용자가 어떤 입력 장치를 쓰는지에 따라 형성된다. 초기 게임의 단순한 시작 화면부터 현대 AAA 게임의 복잡한 메뉴·탭·인벤토리 구조까지 발전했지만, 방향키와 버튼을 중심으로 한 컨트롤러는 일관된 탐색 경험과 근육 기억을 유지해 왔다. 앞으로 AR·VR 같은 기술은 입력 장치와 인터페이스의 경계를 물리적 공간까지 확장할 것으로 보인다. ## 게임 인터페이스의 발전 - 1958년의 **Tennis for Two**부터 초기 아케이드 게임까지는 인터페이스가 매우 단순했다. - *Pong*, *PAC-MAN*, *Super Mario Bros.* 같은 게임은 사실상 단일 화면과 시작 버튼만으로 플레이가 가능했다. - 현대 AAA 게임은 다음과 같은 다양한 기능을 제공한다. - 여러 게임 모드 - 캐릭터 및 코스튬 커스터마이징 - 게임 내 상점 - 월드 맵과 인벤토리 - 퀘스트와 설정 메뉴 - 이에 따라 게임 UI는 단일 타이틀 화면에서 메뉴, 탭, 화면 간 연결로 구성된 복합적인 허브 구조로 확장됐다. ## 컨트롤러가 만든 일관된 탐색 원칙 - Atari 2600부터 PlayStation 5까지 컨트롤러는 방향 입력과 버튼을 핵심 구조로 유지했다. - 세대가 바뀌어도 기본적인 조작 방식이 크게 변하지 않아 플레이어는 기존의 근육 기억을 활용할 수 있었다. - 컨트롤러의 공통 규칙은 게임 UI 설계의 기반이 됐다. - 플랫폼마다 완전히 새로운 탐색 방식을 만들 필요가 줄어들어 디자인·개발 비용도 절감된다. - 게임이 거대한 문화 산업으로 성장하고 스트리밍, e스포츠 등으로 확장됐지만, 플레이어와 게임을 연결하는 핵심 장치는 여전히 컨트롤러다. ## 입력 장치가 인터페이스를 결정한다 - 디지털 인터페이스는 사용하는 표면과 입력 방식에 맞춰 설계된다. - 데스크톱: 마우스 - 모바일: 손가락 터치 - TV: 리모컨 - 마우스는 빠르고 정밀하며 여러 버튼을 제공한다. - 화면을 한 번에 가로질러 이동할 수 있다. - 몇 픽셀 크기의 작은 컨트롤도 조작할 수 있다. - 가운데 버튼, 오른쪽 클릭처럼 추가 기능을 제공한다. - 따라서 데스크톱 UI는 작고 밀도 높은 컨트롤과 많은 정보를 한 화면에 배치할 수 있다. - 손가락은 마우스 커서보다 크고 정밀도가 낮기 때문에 모바일 UI는 다음과 같은 특성을 갖는다. - 크고 둥근 버튼 - 충분한 버튼 간격 - 오작동을 줄이는 넓은 터치 영역 - 모바일은 탭, 스와이프, 핀치 같은 제스처도 적극적으로 활용한다. - 마우스와 손가락은 모두 화면의 특정 위치를 가리키는 “포인터”라는 공통점을 가지지만, 정밀도와 조작 방식의 차이가 UI 형태를 바꾼다. ## 2D 메뉴에서 3D 공간으로 - 기존 게임에서는 플레이어가 컨트롤러로 2D 인터페이스를 탐색하고, 게임 속 3D 세계를 조작했다. - 최신 기술에서는 플레이어의 신체와 주변 환경 자체가 입력 영역이 되기 시작했다. - AR·VR 컨트롤러는 기존의 버튼과 방향 입력을 넘어 공간 이동, 손동작, 시선 등 새로운 상호작용을 가능하게 한다. - 입력과 경험의 관계를 분석하면 게임뿐 아니라 차세대 디지털 인터페이스가 어떻게 이동하고 반응해야 하는지도 이해할 수 있다. ## 실용적인 시사점 새로운 인터페이스를 설계할 때는 화면 구성보다 먼저 입력 장치의 특성을 파악해야 한다. 정밀한 마우스에는 높은 정보 밀도를, 손가락에는 큰 터치 영역을, 컨트롤러에는 명확한 방향 이동과 일관된 포커스 규칙을 적용하는 방식이 효과적이다. AR·VR에서는 화면 안의 UI뿐 아니라 사용자의 몸과 주변 공간까지 인터페이스로 고려해야 한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

“Chat, 우리 망했

소셜 미디어 알고리즘은 유행어를 퍼뜨리는 데 그치지 않고, 사람들이 자신을 표현하고 타인을 이해하는 방식까지 바꾼다. 알고리즘은 특정 커뮤니티의 언어를 맥락에서 분리해 대중화하며, 단어의 의미와 문화적 배경을 재구성한다. 따라서 새로운 표현 자체를 문제 삼기보다, 어떤 플랫폼 구조와 문화적 경로가 그 언어를 유행시켰는지 비판적으로 살펴봐야 한다. ## 인터페이스가 사고와 관계를 바꾸는 방식 - Tinder의 ‘스와이프’는 단순한 조작법을 넘어 호감과 선택을 표현하는 언어가 됐다. - 오른쪽을 긍정적으로, 왼쪽을 부정적으로 인식하는 서구 문화의 상징 체계도 인터페이스에 반영된다. - Marshall McLuhan의 “미디어가 메시지다”라는 개념처럼, 플랫폼의 형식과 기능 자체가 사용자의 행동과 의미 해석을 만든다. - Hinge의 프로필 질문은 사용자를 특정한 서사 방식으로 자기소개하게 한다. - Grindr의 ‘bear’, ‘twink’ 같은 분류 체계는 사용자가 자신의 정체성을 특정 부족이나 유형으로 표현하도록 유도한다. - 즉, 플랫폼은 사용자의 외적 표현뿐 아니라 자기 자신을 이해하는 방식에도 영향을 준다. ## 알고리즘과 ‘맥락 붕괴’ - 인터넷은 특정 커뮤니티에서 만들어진 언어를 더 넓은 대중에게 빠르게 확산시킨다. - 알고리즘은 해시태그뿐 아니라 게시물과 영상에서 사용된 단어 자체를 메타데이터처럼 활용한다. - 특정 집단에서만 통용되던 표현이 ‘For You’ 피드에 등장하면, 이용자는 그 말이 자신의 문화권을 위한 것이라고 오해할 수 있다. - 원래의 역사·공동체·정치적 맥락이 사라진 채 표현만 확산되는 현상을 ‘맥락 붕괴’라고 볼 수 있다. - 예를 들어 ‘slay’는 뉴욕의 흑인·라틴계 게이 남성들이 중심이었던 볼룸 문화에서 출발했지만, 소셜 미디어를 거치며 훨씬 넓은 대중어가 됐다. ## 커뮤니티 언어의 대중화와 의미 변화 - ‘slay’, ‘serve’, ‘queen’, ‘cooked’, ‘ate’, ‘bussin’’, ‘it’s giving’ 등은 볼룸 문화와 AAVE에서 유래한 표현의 사례로 제시된다. - 인터뷰이는 유행어의 상당수가 AAVE 또는 4chan에서 비롯된다는 경험적 견해를 말한다. - 대중화 과정에서 단어는 더 많은 사람에게 사용되지만, 원래의 문화적 의미와 정서적 뉘앙스는 약해질 수 있다. - 인플루언서가 유행어를 사용하고, 알고리즘이 이를 확산시키면서 단어의 인지도와 바이럴성이 서로 강화된다. - 언어 변화는 자연스러운 현상이지만, 어떤 공동체의 표현이 누구에 의해 소비되고 재해석되는지는 살펴볼 필요가 있다. ## 밈을 통한 이념과 문화의 확산 - 밈은 단순한 농담이나 유행어가 아니라 특정 생각과 가치관을 전달하는 매개체가 될 수 있다. - ‘looksmaxxing’이나 ‘-pilled’처럼 인셀 문화에서 사용되던 표현도 밈의 형태로 주류에 진입할 수 있다. - 밈은 거부감이 큰 사상이나 온라인 하위문화의 관점을 재미있는 표현 속에 숨겨 전달하는 ‘트로이 목마’처럼 작동할 수 있다. - 다만 새로운 단어를 사용하는 것 자체가 곧 해롭다는 뜻은 아니며, 그 표현이 어디서 왔고 어떤 관점을 포함하는지 인식하는 태도가 중요하다. ## 언어가 바이럴리티의 지표가 되는 과정 - 오늘날 언어는 콘텐츠의 설명 수단을 넘어 알고리즘이 포착하는 핵심 신호가 된다. - 특정 단어를 사용하면 콘텐츠가 유행 흐름에 편입될 가능성이 높아지고, 다시 더 많은 사람이 그 단어를 접하게 된다. - 플랫폼은 이런 순환을 통해 어떤 표현을 ‘바이럴한 언어’로 만들고, 사용자는 유행에 참여하기 위해 그 표현을 모방한다. - 결과적으로 알고리즘은 사람들이 무엇을 말하는지뿐 아니라, 어떤 단어를 가치 있고 영향력 있다고 느끼는지도 결정한다. 플랫폼에서 유행어를 사용할 때는 뜻만 따라 하기보다 그 표현의 기원, 원래 사용하던 공동체, 현재의 의미 변화를 함께 확인하는 것이 좋다. 서비스를 설계하거나 운영한다면 특정 언어가 어떤 맥락에서 확산되는지와 인터페이스가 정체성 표현에 미치는 영향까지 고려해야 한다.

원문 읽기(새 탭에서 열림)
discord원문

디스코드 업데이트: 2 (새 탭에서 열림)

디스코드의 2025년 9월 업데이트는 사용자 프로필의 시각적 강화와 대규모 커뮤니티를 수용하기 위한 기술적 확장에 초점을 맞추고 있습니다. 활동 스택과 팝아웃 창을 통해 멀티태스킹 환경을 개선했으며, 서버 수용 인원을 무려 2천 5백만 명으로 대폭 늘리는 등 플랫폼의 성능과 확장성을 동시에 확보했습니다. 이번 업데이트를 통해 사용자들은 더욱 개성 있는 테마와 프로필로 자신을 표현하고, 전례 없는 규모의 서버에서 원활하게 소통할 수 있게 되었습니다. ### 사용자 프로필 및 멀티태스킹 고도화 * **프로필 디자인 개편:** 데스크톱 버전의 사용자 프로필이 새롭게 단장되어, 사용자의 자기소개와 최근 플레이한 게임 등의 세부 정보를 더욱 명확하게 보여줍니다. * **활동 스택(Activity Stacking):** 게임 플레이, 음악 감상, 음성 채널 참여 등 여러 활동을 동시에 할 경우, 이를 카드 형태로 쌓아서 프로필에 모두 표시해 주는 기능이 추가되었습니다. * **액티비티 팝아웃:** '함께 보기(Watch Together)'와 같은 액티비티를 별도의 플로팅 창으로 분리할 수 있습니다. 이를 통해 서버 메시지를 확인하거나 DM을 보내면서도 끊김 없이 콘텐츠를 즐길 수 있습니다. * **카메라 활성화 알림음:** 개인 프라이버시 보호를 위해 카메라가 켜질 때마다 소리로 상태를 알려주는 직관적인 피드백이 도입되었습니다. ### 서버 확장성 및 편의 기능 강화 * **서버 수용 인원 대폭 확대:** 서버당 최대 수용 인원 기본값이 2,500만 명으로 늘어났습니다. 이는 대규모 커뮤니티 운영을 지원하기 위한 백엔드 최적화의 결과입니다. * **메시지 고정(Pin) 한도 증설:** 기존 50개였던 메시지 고정 한도가 250개로 5배 늘어나 중요한 정보를 더 많이 보관할 수 있게 되었습니다. * **AV1 코덱 및 임베드 개선:** 비디오 첨부 파일과 임베드에 AV1 코덱 지원을 추가하여 고화질 영상 로딩 속도를 높였으며, 텀블러(Tumblr) 링크 공유 시 태그와 상세 설명이 포함된 세련된 임베드 형식을 제공합니다. ### 개인화 테마 및 서버 배지 * **커스텀 그라데이션 테마:** Nitro 사용자는 최대 5가지 색상을 조합하여 자신만의 그라데이션 테마를 제작할 수 있습니다. 제작된 테마는 모바일 기기와도 실시간으로 동기화됩니다. * **신규 서버 태그 배지:** 서버 태그를 꾸밀 수 있는 '반려동물(Pet)' 팩과 '플렉스(Flex)' 팩이 새롭게 추가되어, 귀여운 동물 아이콘이나 왕관 아이콘으로 개성을 나타낼 수 있습니다. 이번 업데이트는 단순한 기능 추가를 넘어, 대규모 서버 운영자와 멀티태스킹을 즐기는 파워 유저 모두를 만족시킬 수 있는 강력한 인프라 개선을 담고 있습니다. 더욱 정교해진 프로필 설정과 커스텀 테마를 활용해 나만의 디스코드 환경을 구축해 보시기 바랍니다.

figma원문

IDC 조사: 전 세계 (새 탭에서 열림)

글로벌 시장 분석 기관인 IDC의 최신 연구에 따르면, 소프트웨어 디자인 및 개발에 참여하는 인력은 2025년 107만 명에서 2029년 144만 명으로 약 30% 이상 급증할 것으로 전망됩니다. 이는 디자인이 기업의 핵심적인 경쟁 우위 요소로 자리 잡고 있음을 시사하며, 특히 사용자 경험(UX) 중심의 솔루션에 대한 수요가 폭발적으로 늘어나고 있음을 보여줍니다. 생성형 AI의 발전은 이러한 흐름을 가속화하여 더 정교하고 시각적으로 뛰어난 디지털 제품의 생산을 촉진할 것으로 보입니다. **소프트웨어 디자인 인력의 양적 팽창** - IDC는 디지털 제품 및 인터페이스 디자인에 참여하는 지식 근로자와 개발자의 수가 2025년 1억 7백만 명에서 2029년 1억 4천 4백만 명으로 증가할 것으로 예측했습니다. - 이러한 성장은 전 산업군과 기업 규모를 막론하고 소프트웨어 디자인의 중요성이 비즈니스 전략의 핵심으로 부상했음을 의미합니다. - 디자인 중심의 문제 해결을 위한 전문 인력에 대한 수요는 향후 몇 년간 지속적으로 강화될 것입니다. **UX 디자인 직무의 독보적인 성장세** - UX 디자인 전문가 집단은 2025년부터 2029년까지 연평균 성장률(CAGR) 7.6%를 기록할 것으로 보입니다. - 이는 다른 지식 근로자 하위 범주의 성장 속도를 앞지르는 수치로, 복잡한 기술을 사용자 친화적으로 풀어내는 디자인 집약적 솔루션의 중요성을 방증합니다. - 기업들은 단순한 기능 구현을 넘어, 차별화된 인터페이스와 사용자 경험을 제공하기 위해 UX 인력을 공격적으로 확충할 전망입니다. **생성형 AI가 가져올 개발 속도와 품질의 변화** - 생성형 AI는 소프트웨어 개발의 속도와 물량을 비약적으로 증가시켜 사용자에게 더 넓은 선택지를 제공하는 촉매제 역할을 할 것입니다. - 제품 내 AI 기능 통합이 보편화됨에 따라, 디자이너와 개발자는 고도로 사용 가능하고 시각적으로 매력적인 AI 인터페이스를 구현해야 한다는 도전에 직면하게 됩니다. - 결과적으로 AI는 디자인 과정을 보조하는 동시에, 더 높은 수준의 디자인 표준을 유지해야 하는 압박으로 작용하여 숙련된 디자인 인력의 가치를 높일 것입니다. 디자인은 이제 단순한 미적 요소를 넘어 제품의 성패를 가르는 전략적 자산이 되었습니다. 기업들은 증가하는 디자인 인력 수요에 대비하고, 특히 생성형 AI를 디자인 프로세스에 효과적으로 통합하여 고도화된 사용자 경험을 신속하게 제공할 수 있는 역량을 갖추어야 합니다. 이러한 변화의 흐름 속에서 디자인과 개발의 경계를 허물고 협업 효율을 극대화하는 것이 미래 소프트웨어 시장의 핵심 경쟁력이 될 것입니다.

figma원문

피그마, 라틴 아 (새 탭에서 열림)

Figma가 중남미 디자인 및 개발자 커뮤니티와의 접점을 넓히기 위해 라틴 아메리카 스페인어 현지화 버전을 공식 출시했습니다. 이번 업데이트는 단순한 번역을 넘어 문화적으로 최적화된 UI와 전용 지원 시스템을 포함하며, 전 세계 활성 사용자의 85%가 미국 외 지역에 거주하는 Figma의 글로벌 확장 전략의 일환입니다. 이를 통해 중남미 지역 기업들은 디자인 시스템을 더 효율적으로 확장하고 제품 개발 생산성을 높일 수 있게 되었습니다. ### 라틴 아메리카 시장의 성장과 현지화 배경 * **다섯 번째 현지화 언어:** 일본어, 스페인어(본토), 한국어, 브라질 포르투갈어에 이어 라틴 아메리카 스페인어가 Figma의 다섯 번째 공식 현지화 언어로 채택되었습니다. * **폭발적인 커뮤니티 성장:** 지난 한 해 동안 라틴 아메리카 지역에서만 1,000만 개 이상의 Figma 파일이 생성되었을 정도로 해당 지역의 창의적 에너지가 높습니다. * **주요 고객사 확보:** iFood, Mercado Libre, Nubank 등 중남미를 대표하는 유니콘 기업과 대형 금융기관들이 이미 Figma를 통해 디자인과 엔지니어링 워크플로우를 통합하고 있습니다. * **문화적 최적화:** 단순 텍스트 번역에 그치지 않고, 지역 사용자의 문화적 특성을 반영한 인터페이스와 전담 고객 지원을 통해 현지 기업들이 더 원활하게 제품을 설계할 수 있도록 돕습니다. ### 글로벌 플랫폼으로서의 데이터와 지표 * **압도적인 해외 사용자 비중:** 2024년 4분기 기준, Figma 월간 활성 사용자(MAU)의 약 85%가 미국 이외의 지역에 분포하고 있습니다. * **글로벌 매출 구조:** 2024년 전체 매출의 50% 이상이 미국 이외의 글로벌 시장에서 발생하며 명실상부한 글로벌 플랫폼으로 자리 잡았습니다. * **다양해진 사용자 직군:** 전체 사용자의 약 30%가 스스로를 개발자로 정의하고 있으며, 전통적인 디자이너 역할을 넘어 협업에 참여하는 비중이 전체 MAU의 2/3에 달합니다. ### 협업 환경에 주는 시사점 * **직군 간 장벽 완화:** 현지어 지원은 디자이너뿐만 아니라 제품 매니저, 개발자 등 다양한 이해관계자들이 디자인 시스템에 더 쉽게 접근하고 소통하게 만듭니다. * **글로벌 표준화 가속:** 전 세계 어디서든 동일한 수준의 현지화된 도구를 사용할 수 있게 됨에 따라, 다국적 기업 내에서의 협업 생산성이 더욱 향상될 것으로 기대됩니다. * **디자인 경쟁력 강화:** 현지 문화를 반영한 제품 제작이 쉬워지면서, 각 지역 기업들이 차별화된 사용자 경험(UX)을 신속하게 구축하고 시장에 배포할 수 있는 토대가 마련되었습니다.

figma3분 읽기큐레이션 요약

딜런 필드가 전하는

Figma의 성장에는 창업자 Dylan Field의 다양한 경험과 우연한 계기, 그리고 실패에서 배우는 태도가 영향을 미쳤다. 아역 배우 시절의 경험, 수학적 사고를 키워준 멘토, 독특한 Thiel Fellowship 지원서, 초기 아이디어의 방황, 젊은 CEO로서의 시행착오가 Figma의 창업과 발전에 연결됐다. 글은 성공이 단번에 완성되는 것이 아니라 끈기와 실험, 성장 과정을 통해 만들어진다는 점을 보여준다. ## 배우 경험이 길러준 끈기 - Dylan은 1990년대 후반 캘리포니아 소노마 카운티에서 아역 배우로 활동했다. - Peter Pan 공연 중 무대에서 잠든 일은 본인이 꼽는 가장 당황스러운 연기 경험이었다. - 하지만 공연에서 얻은 와이어 비행 경험 덕분에 훗날 Windows XP 광고에 출연할 수 있었다. - 오디션 경험을 통해 “오랜 시간 계속 시도하는 사람이 결국 이긴다”는 태도를 배웠다. ## 학교 관리인이 키운 수학적 호기심 - Dylan은 6살 때부터 대수 문제를 풀 정도로 수학에 관심이 많았다. - 중학교 수업이 지루해 학교 관리인과 시간을 보내곤 했다. - 수학과 물리학에 관심이 많았던 관리인은 Dylan에게 여러 개념을 설명해 주었다. - 특히 단순 계산보다 증명이 중요하다며 집합론을 공부해 보라고 권했다. - 이 경험은 Dylan이 수학을 공식 암기가 아니라 논리와 구조를 탐구하는 학문으로 바라보는 데 영향을 주었다. ## 초콜릿에 대한 괴상한 답변과 Thiel Fellowship - Thiel Fellowship 지원서는 “대부분의 사람들이 무엇을 잘못 생각하고 있는가”를 물었다. - Dylan은 “초콜릿은 역겹다”라고 답하고, 그 주장을 진지하게 논증하는 에세이를 작성했다. - 일반적인 통념을 뒤집으면서도 유머와 논리를 결합한 답변이 심사위원의 관심을 끌었을 가능성이 있다. - Dylan은 이를 실리콘밸리의 반(反)주류 사고를 다시 뒤집은 “메타-contrarian” 접근이라고 설명했다. - Fellowship을 받으면서 Brown University를 중퇴하고 Evan Wallace와 함께 창업에 전념하게 됐다. ## WebGL을 활용하려다 만든 밈 생성기 - Dylan과 Evan은 WebGL을 이용해 웹에서 고성능 그래픽을 구현하는 디자인 도구를 만들고 싶어 했다. - 그러나 기술을 먼저 확보한 뒤 용도를 찾으려 하면서 방향을 잃었다. - 한때 WebGL이라는 “망치”에 맞는 “못”으로 밈 생성기를 고려했다. - Dylan은 밈 시장의 성장 데이터를 근거로 밈 제작 서비스를 만들자고 주장했다. - 이 아이디어는 약 5일간 이어졌지만, 두 사람은 곧 더 본질적인 제품을 만들어야 한다는 결론에 도달했다. - 이 짧은 방황은 Figma가 초기부터 명확한 제품 비전을 가지고 출발한 것은 아니었음을 보여준다. ## 스무 살 CEO로서의 성장통 - Dylan은 이전 직함이 인턴이었을 정도로 어린 나이에 CEO가 됐다. - 제품 경험의 세부 사항을 직접 고민해 왔기 때문에 초기에는 모든 일을 통제하려는 경향이 있었다. - 본인도 당시의 경영 방식을 “마이크로매니징”이라고 표현했다. - 빠르게 제품을 출시해야 한다는 압박감이 통제 욕구를 더욱 키웠다. - 이후 사무실에서의 긴장된 상황 등을 겪으며, 제품에 대한 높은 기준과 팀에 대한 신뢰 사이의 균형을 배워갔다. - 공개된 내용에서는 Figma의 UI를 만들기 위해 드롭다운, 컴포넌트, 효과 등을 화이트보드에 반복적으로 탐색한 과정도 소개된다. Figma의 사례는 창업자의 이력이 반드시 한 방향으로만 이어질 필요는 없다는 점을 보여준다. 낯선 경험에서 얻은 끈기와 논리적 사고, 과감한 실험, 초기의 실패를 인정하고 방향을 수정하는 태도가 새로운 제품을 만드는 데 실질적인 자산이 될 수 있다.

원문 읽기(새 탭에서 열림)
discord원문

더 높이, Plus Ultra! 나의 (새 탭에서 열림)

디스코드가 Crunchyroll과의 협업을 통해 팬들이 가장 기다려온 '나의 히어로 아카데미아' 테마의 아바타 장식과 프로필 효과 컬렉션을 출시했습니다. 이번 컬렉션은 캐릭터의 정체성인 '개성(Quirk)'과 시그니처 아이템을 정교하게 구현하여 사용자의 프로필에 생동감을 더하는 데 초점을 맞췄습니다. 팬들은 오늘부터 상점에서 총 8종의 아바타 장식과 3종의 프로필 효과를 통해 자신이 좋아하는 영웅이나 빌런의 모습을 재현할 수 있습니다. **아바타 장식: 히어로 장비와 개성의 시각화** * **디자인 핵심 요소:** 사용자의 아바타를 너무 많이 가리지 않으면서도 캐릭터를 즉각적으로 식별할 수 있도록, 각 캐릭터의 가장 상징적인 '히어로 장비(Hero Gear)'를 디자인의 중심 컨셉으로 설정했습니다. * **제작 프로세스:** 명확한 장비 컨셉을 잡은 뒤 색상을 더해 풍부한 질감을 만들고, 마지막 단계에서 애니메이션을 추가하여 캐릭터 고유의 '개성'이 움직임으로 표현되도록 제작했습니다. * **다양한 라인업:** 미도리야 이즈쿠, 바쿠고 카츠키, 우라라카 오차코, 토도로키 쇼토 등 주요 학생들부터 올마이트, 엔데버, 호크스 같은 프로 히어로, 그리고 빌런인 시가라키 토무라까지 총 8종의 장식이 포함되었습니다. **프로필 효과: 더 넓은 영역을 활용한 스토리텔링** * **스토리 중심 디자인:** 아바타 장식보다 넓은 면적을 활용하는 프로필 효과는 단순한 캐릭터 묘사를 넘어, 애니메이션 속의 강렬한 순간과 시그니처 기술을 재현하는 데 중점을 두었습니다. * **역동적인 시각 효과:** 미도리야의 '풀 카울(Full Cowling)'에서 뿜어져 나오는 전기 에너지나 바쿠고의 '클러스터(Cluster)' 폭발 효과 등 팬들이 열광하는 명장면을 프로필 전체에 담아냈습니다. * **직관적인 인상 전달:** 짧은 시간 안에 캐릭터의 능력과 세계관을 시각적으로 전달하여, 프로필을 방문하는 사람들에게 강렬한 인상을 남길 수 있도록 설계되었습니다. **상점 이용 및 컬렉션 구성** * **제공 품목:** 총 8종의 아바타 장식과 3종의 프로필 효과(풀 카울, 클러스터, 빌런 연합)로 구성되어 선택의 폭을 넓혔습니다. * **이용 방법:** '나의 히어로 아카데미아' 컬렉션은 오늘부터 데스크톱 및 모바일 디스크 앱 내 상점에서 바로 구매하여 적용할 수 있습니다. * **팬들을 위한 헌사:** 초기 탐색 단계부터 최종 애니메이션 작업까지 애니메이션에 대한 제작진의 애정을 담아 제작되었으며, Crunchyroll의 2025 애니메이션 어워즈를 기념하는 특별한 드롭입니다.