ux

하마터면 못생겨질 뻔했다 - 토스 프론트 2 제작기 (새 탭에서 열림)

토스플레이스의 결제 단말기 '프론트 2'는 단순히 기능을 나열하는 것을 넘어, 1세대 사용 현장에서 발견한 불편함을 집요하게 개선하여 심미성과 사용성을 동시에 확보한 결과물입니다. 개발팀은 기술적으로 가능한 답에 안주하지 않고 소재의 변화와 내부 설계의 전면 재구성을 통해 NFC 인식 개선과 리더기 교체 편의성이라는 난제를 해결했습니다. 결과적으로 완성도는 우연이 아닌 '더 나은 답'을 찾기 위한 치열한 고민과 집착에서 비롯됨을 보여줍니다. **NFC 인식률과 사용성을 위한 소재의 혁신** * 1세대 단말기는 기술적 안정성 때문에 NFC 안테나가 우측에 배치되어 좁은 매대에서 결제가 불편했던 점을 개선하고자 NFC를 전면으로 이동시켰습니다. * 디스플레이 뒤쪽의 금속 성분이 NFC 신호를 차단하는 문제를 해결하기 위해, 카드 리더기 위치 변경이나 단말기 크기 확장 등의 시안을 검토했으나 심미성과 인식률 저하로 폐기했습니다. * 결국 '디스플레이 뒷면은 금속이어야 한다'는 고정관념을 깨고, 전파 간섭이 없는 플라스틱 소재로 교체하되 강화유리로 내구성을 보완하는 커스터마이징 공정을 도입하여 전면 NFC 인식을 구현했습니다. **C타입 도킹 구조를 통한 수리 편의성 확보** * 고장 시 기기 전체를 입고해야 했던 일체형 구조의 불편함을 해결하기 위해, 사장님이 현장에서 직접 교체할 수 있는 분리형 카드 리더기를 설계했습니다. * 별도의 나사나 복잡한 고정 장치 없이도 깔끔한 디자인을 유지하기 위해 누구나 익숙한 C타입 단자 결합 방식을 채택했습니다. * 이를 통해 대리점의 재고 부담을 줄이고 매장 운영 공백을 최소화하면서도, 외관상으로는 하나의 완성된 제품처럼 보이는 심리스(Seamless)한 디자인을 완성했습니다. **내부 설계를 뒤집는 역발상으로 구현한 유지보수** * C타입으로 결합된 리더기를 도구 없이 쉽게 분리하기 위해, 리더기 일부를 돌출시키는 대신 '뒤에서 밀어 빼는' 구조를 고안했습니다. * 하지만 뒷면의 전원 및 인터넷 단자 공간 문제로 초기 설계상 구현이 불가능하자, 내부 회로 기판을 위아래로 뒤집고 비스듬히 기울여 재배치하는 전면 재설계를 단행했습니다. * 케이블 단자 부품까지 모두 반전된 형태로 새로 수급하는 과정을 거쳐, 결과적으로 리더기 교체는 물론 케이블 연결까지 더 쉬워진 내부 구조를 만들어냈습니다. **실천적 결론: 완성도를 높이는 4가지 질문** 제품의 완성도를 높이기 위해서는 기술적으로 '되는' 답이 아니라 사용자에게 '맞는' 답을 찾아야 하며, 이를 위해 다음의 질문을 반복할 것을 권장합니다. 1. **사용성 점검:** 모든 사용자(Edge case 포함)가 이 디자인을 쉽고 편하게 누릴 수 있는가? 2. **본질 정의:** 당면한 여러 문제 상황을 관통하는 근본적인 원인은 무엇인가? 3. **최선 의심:** 현재 도출된 해결책이 정말 본질을 해결하는 최선의 방법인가? 4. **방향 재정의:** 현재의 답이 부족하다면, 해결책의 방향성 자체를 처음부터 다시 설정할 수 있는가?

Figmates가 Figma AI를 활용해 즐거움의 차원을 한 단계 높인 방법 | Figma 블로그 (새 탭에서 열림)

Figma는 1990년대 초창기 웹의 감성을 재현한 '레트로 커서' 기능을 도입하며 협업 환경에 시각적인 즐거움을 더했습니다. 이 업데이트는 단순한 미적 변화를 넘어, 디자인 도구 내에서 사용자 간의 상호작용을 더욱 풍부하고 개성 있게 만들기 위해 기획되었습니다. 과거의 디지털 유산을 현대적인 협업 캔버스에 녹여냄으로써 사용자들이 웹 역사의 뿌리를 경험하고 창의적인 분위기를 조성하는 것이 이번 업데이트의 핵심 결론입니다. **1990년대 초기 웹 인터페이스의 재해석** - 초기 운영체제와 브라우저에서 사용되던 픽셀화된 화살표, 대기 중을 의미하는 모래시계, 링크를 클릭할 때의 손 모양 아이콘 등을 현대적인 Figma 환경에 맞게 복원했습니다. - 투박하지만 직관적이었던 과거의 UI 요소를 통해 중장년층 사용자에게는 향수를, 젊은 세대에게는 'Y2K' 감성의 신선한 시각적 재미를 제공합니다. - 단순히 이미지를 씌운 것이 아니라, 당시의 비트맵 스타일과 움직임을 정교하게 구현하여 실제 90년대 소프트웨어를 사용하는 듯한 몰입감을 줍니다. **멀티플레이어 경험의 개인화와 상호작용** - 실시간 협업 시 다른 사용자의 위치를 파악하는 용도였던 커서를 사용자의 상태나 개성을 표현하는 도구로 확장했습니다. - 팀 브레인스토밍, 디자인 리뷰, 워크숍 등 여러 명이 동시에 작업하는 환경에서 딱딱한 분위기를 완화하고 참여자 간의 유대감을 높이는 'Ice Breaker' 역할을 수행합니다. - 각 팀원이 서로 다른 레트로 커서를 선택함으로써 복잡한 캔버스 위에서도 각자의 움직임을 더욱 명확하고 재미있게 구분할 수 있습니다. **'작지만 큰 디테일'을 통한 사용자 경험 개선** - 이번 기능은 Figma의 'Little Big Details(작지만 큰 디테일)' 철학을 반영하여, 대대적인 기능 개편 없이도 사용자의 만족도를 극대화하는 데 초점을 맞췄습니다. - 사용자는 Figma의 커맨드 팔레트나 특정 메뉴 설정을 통해 복잡한 과정 없이 즉각적으로 커서 스타일을 변경할 수 있습니다. - 기술적인 도구에 인간적인 재미 요소를 더함으로써, 도구와 사용자 사이의 심리적 거리감을 줄이는 효과를 거두었습니다. 협업 과정에서 창의적인 영감이 필요하거나 팀원들과 가벼운 소통이 필요한 순간, 레트로 커서를 활성화하여 90년대 웹의 자유롭고 활기찬 분위기를 디자인 작업에 녹여보시길 권장합니다.

Layers of your time : 토스와 함께한 시간을 기념하기 (새 탭에서 열림)

토스의 인터널 브랜딩은 단순히 예쁜 물건을 만드는 것이 아니라, 구성원이 팀과 함께 보낸 '시간의 가치'를 정의하고 이를 감동적인 경험으로 설계하는 과정입니다. 8개월간 진행된 N주년 굿즈 리뉴얼 프로젝트는 "왜 존재하는가"라는 본질적인 질문에서 시작하여, 타협하지 않는 디테일과 받는 순간의 시나리오까지 정교하게 설계함으로써 팀원들에게 소속감과 자부심을 전달했습니다. 결국 좋은 인터널 브랜딩이란 구성원이 '좋은 팀에서 일하고 있다'는 확신을 갖게 하여 업무의 몰입과 품질로 이어지게 만드는 강력한 동기부여 수단이 됩니다. **기존 굿즈의 한계와 새로운 목표 설정** - 과거 메달, 와인 등 다양한 굿즈를 제공했으나 시간이 흐르며 '소중한 선물'이 아닌 '정리해야 할 물건'으로 인식되는 문제가 발생했습니다. - "10년, 20년의 헤리티지를 보석처럼 모아가는 개념"으로 관점을 전환하여, 물건 제작이 아닌 '시간을 축하하는 방식'을 설계하는 것을 목표로 삼았습니다. - 팀원 개인의 시간을 진심으로 축하하고, 리뉴얼을 기다려준 이들에게 감사의 마음을 시각화하여 전달하고자 했습니다. **시간의 깊이를 담은 'Layered Lighting'** - 받자마자 서랍에 넣지 않고 실생활에 쓰이며, 시간이 쌓이는 감각이 물리적으로 보여야 한다는 3가지 기준을 세웠습니다. - 길가의 조명에서 영감을 얻어, 입사 주년마다 디스크를 한 장씩 쌓아 올리는 조명 아이디어를 도출했습니다. - 디스크가 쌓일수록 빛의 레이어가 깊어지는 구조를 통해 디자인적 장식보다 구조 자체가 의미를 설명하도록 설계했습니다. - 1~10주년은 화이트 버전으로, 11주년부터는 블랙 버전으로 나누어 '새로운 시간의 차원'이라는 상징성을 부여했습니다. **하드웨어 제작에서의 집요한 디테일 구현** - 조명 디스크의 두께 0.5mm 차이가 빛의 확산에 미치는 영향, 본체와의 간격 등을 수없이 테스트하며 완성도를 높였습니다. - 납품 직전 발견된 수십 가지 불량품 문제 앞에서 일정을 미루더라도 퀄리티와 타협하지 않는 원칙을 고수했습니다. - 약 5,000개의 조명을 전수 검품하며, '구성원이 매일 마주하는 물건'으로서 부끄럽지 않은 품질을 확보했습니다. **따뜻한 언어와 경험의 흐름 설계** - 'Layered Lighting'이라는 이름과 "Layers of your time at toss"라는 문구를 새겨 미션보다는 개인의 시간에 집중한 감성적 접근을 취했습니다. - 딱딱한 고딕체 대신 세리프 서체를 사용하고, 개인의 이름을 수기로 적은 카드를 동봉하여 인간적인 온기를 더했습니다. - 단순히 라운지에서 수령하는 방식이 아닌, 월요일 아침 출근했을 때 자신의 자리에 선물이 놓여 있는 깜짝 이벤트를 기획했습니다. - 3,900명의 자리 배치도를 확인하며 2,500명의 자리에 26시간 동안 직접 선물을 배치하여, "일 년 더 다닐 이유가 생겼다"는 정서적 반응을 이끌어냈습니다. **인터널 브랜딩 프로젝트를 위한 체크리스트** - 프로젝트의 존재 이유를 한 문장으로 설명할 수 있는가? - 시각적 레퍼런스를 찾기 전, 결과물이 충족해야 할 조건을 먼저 정의했는가? - 첫 대면부터 마지막 순간까지의 경험 흐름을 통째로 설계했는가? - 타협의 유혹이 올 때 돌아갈 명확한 기준이 있는가? - 이 결과물이 구성원에게 "이 팀과 함께하고 싶다"는 감정을 불러일으키는가?

디스코드 패치 노트: 2026년 4월 6일 (새 탭에서 열림)

디스코드의 '패치 노트(Patch Notes)' 시리즈는 앱의 성능, 안정성, 응답성 및 사용성을 개선하고 각종 버그를 해결하기 위한 엔지니어링 팀의 노력을 공유합니다. 사용자는 커뮤니티 채널을 통해 직접 버그를 제보하거나 베타 버전에 참여하여 서비스 완성도를 높이는 데 기여할 수 있습니다. 발표된 수정 사항들은 이미 시스템에 반영되었으며, 플랫폼별 순차적인 배포 과정을 거쳐 모든 사용자에게 적용될 예정입니다. **커뮤니티 중심의 버그 수집 및 피드백** * 레딧(Reddit)의 r/DiscordApp 서브레딧에서 운영되는 '격월 버그 메가스레드(Bimonthly Bug Megathread)'를 주요 소통 창구로 활용합니다. * 사용자가 겪고 있는 불편 사항을 엔지니어링 팀이 직접 모니터링하고 검토하여 실제 서비스 개선에 반영하는 구조를 갖추고 있습니다. **iOS TestFlight를 활용한 사전 테스트** * 정식 출시 전 최신 기능을 미리 경험하고 싶은 사용자들을 위해 iOS 환경에서 TestFlight 버전을 제공합니다. * 사용자는 `dis.gd/testflight`를 통해 베타 프로그램에 참여할 수 있으며, 실제 배포 전 잠재적인 버그를 사전에 발견하고 수정하는 데 중요한 역할을 합니다. **업데이트 병합 및 배포 프로세스** * 패치 노트에 기재된 모든 수정 사항은 코드 베이스에 커밋(Committed) 및 병합(Merged)이 완료된 상태입니다. * 다만, 기술적인 배포 방식에 따라 각 플랫폼 및 개별 사용자에게 도달하는 시점에는 약간의 차이가 있을 수 있습니다. 새로운 기능이나 성능 개선 사항을 누구보다 빠르게 경험하고 싶다면 디스코드의 TestFlight 프로그램에 참여해 보세요. 만약 서비스 이용 중 예상치 못한 문제를 발견했다면 공식 레딧 스레드를 통해 엔지니어링 팀에 제보하여 서비스 품질 향상에 기여할 수 있습니다.

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

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

LINE 앱의 다자간 대화 기능 통합 (새 탭에서 열림)

LINE은 서로 다른 용도로 운영되던 '여러 명과의 대화'와 '그룹' 기능을 '그룹 대화'라는 단일 모델로 통합하여 사용자 경험을 개선하고 시스템 리소스를 효율화했습니다. 기존의 이원화된 구조에서 발생하던 기능 제한과 중복 대화방 생성 문제를 해결하기 위해 통합 API 설계 및 점진적인 데이터 마이그레이션을 수행했습니다. 이를 통해 사용자는 생성 방식에 관계없이 모든 기능을 동일하게 사용할 수 있게 되었으며, 중복 방 생성 비율을 획기적으로 낮추는 기술적 성과를 거두었습니다. ### 이원화된 대화 모델의 한계 * **여러 명과의 대화(Room):** 별도의 승인 없이 즉시 대화가 가능하지만, 일시적 목적으로 설계되어 앨범이나 노트 같은 그룹 전용 기능을 사용할 수 없었습니다. * **그룹(Group):** 초대 승인 절차가 필요한 대신 장기적인 소통에 적합한 다양한 편의 기능을 제공했으나, 초기 진입 장벽이 존재했습니다. * **사용자 혼란 및 리소스 낭비:** 사용자들이 두 모델의 차이를 이해하지 못해 기능이 제한된 방을 잘못 만들거나, 동일한 구성원의 대화방을 중복으로 생성하여 서버와 클라이언트의 리소스가 불필요하게 소모되었습니다. ### 그룹 대화로의 기술적 마이그레이션 * **점진적 API 전환:** 새로운 그룹 대화 API를 설계한 후, '이중 읽기(Dual Read)' 방식을 도입하여 이전 API와의 호환성을 유지하며 단계적으로 전환을 진행했습니다. * **데이터 배치 처리:** 기존의 모든 그룹 데이터를 배치 처리를 통해 신규 모델로 이관하였으며, 안정성이 확인된 후 이중 읽기를 중단하고 그룹 대화 시스템으로 단일화했습니다. * **통합 모델 확립:** 그룹 모델의 아키텍처를 기반으로 여러 명과의 대화 모델을 흡수하여, 향후 추가될 모든 신규 기능이 모든 대화방에 동일하게 적용되도록 구조를 개선했습니다. ### 사용자 경험 최적화 및 운영 성과 * **초대 메커니즘 단일화:** 대화방 생성 UI를 통합하여 '즉시 참여'와 '수락 후 참여' 여부를 사용자가 상황에 맞게 직접 선택할 수 있도록 개선했습니다. * **중복 생성 방지 힌트:** 동일한 구성원으로 새로운 방을 만들려 할 때 기존 대화방을 안내하는 '힌트' 기능을 제공하여 불필요한 대화 목록 생성을 방지했습니다. * **정량적 성과:** 프로젝트 결과, 동일 구성원으로 중복 생성되는 대화방 비율이 기존 15%에서 0.78%로 급감하며 데이터 관리 효율성이 크게 향상되었습니다. 대규모 서비스에서 유사한 기능을 통합할 때는 사용자에게 갑작스러운 변화를 강요하기보다, 점진적인 API 전환과 기능적 일원화를 통해 자연스러운 이동을 유도하는 것이 중요합니다. 이번 통합 사례는 시스템의 복잡성을 줄이면서도 데이터 일관성과 사용자 편의성을 동시에 확보할 수 있는 구체적인 마이그레이션 전략을 보여줍니다.

외국인 유저 리서치: 캐나다인 "B"씨는 왜 토스 인증에 실패했을까 (새 탭에서 열림)

토스는 '모두를 위한 금융'이라는 비전을 실현하기 위해 외국인 사용자가 국내 금융 앱 가입 과정에서 겪는 본인 인증 실패 원인을 심층 분석했습니다. 산업단지와 다문화 센터를 직접 찾아가 진행한 리서치를 통해 이름 입력 포맷의 불일치와 주소 검색의 어려움이 핵심 이탈 요인임을 확인했습니다. 이를 바탕으로 인증 로직과 UI를 개선한 결과, 외국인 사용자의 인증 통과율을 약 15% 끌어올리며 내국인 수준의 서비스 접근성을 확보했습니다. ### 현장 리서치를 통한 사용자 페인 포인트 발굴 * 정보 접근성이 상대적으로 낮은 블루칼라 외국인 노동자들의 금융 생활을 파헤치기 위해 시화공단과 포천 다문화 센터 등에서 현장 인터뷰를 수행했습니다. * 외국인들이 모바일 앱 대신 오프라인 은행 창구를 선호하는 이유가 단순한 선호도가 아닌, 가입 단계부터 발생하는 기술적 허들 때문임을 파악했습니다. * 정형화된 설문조사 대신 친근한 방식의 길거리 인터뷰와 심층 인터뷰를 병행하여, 실제 사용자가 겪는 맥락적인 어려움을 수집했습니다. ### 본인 인증의 최대 걸림돌: 이름 입력 방식 * 외국인 등록증상의 이름과 통신사, 은행 등에 등록된 이름의 포맷(성·이름 순서, 띄어쓰기 등)이 서로 달라 본인 인증에 반복적으로 실패하는 문제가 가장 컸습니다. * 'BRAD PITT'를 'BR AD'로 띄어 써야 인증이 되는 등, 시스템마다 요구하는 형식이 달라 사용자가 스스로 성공 케이스를 학습해야 하는 불합리한 상황이 발생했습니다. * 인증 실패 시 구체적인 원인 안내가 부족하고, 5회 오류 시 시도가 차단되는 정책은 외국인 사용자들을 8년 넘게 온라인 인증에서 소외시키기도 했습니다. ### 한국어 주소 입력 및 검색의 난관 * 한국어 타이핑이 서툰 외국인들에게 주소 입력은 가입을 포기하게 만드는 주요 허들이었습니다. * 영문 주소나 우편번호로 검색하더라도 검색 결과 리스트가 너무 방대하여, 본인의 정확한 거주지를 스크롤 내에서 찾아내기가 매우 어려웠습니다. * 입력 방식의 반복된 시도에도 불구하고 원하는 결과를 얻지 못해 결국 서비스 이용 자체를 중도에 포기하는 이탈 구간이 발생했습니다. ### 리서치 기반의 개선 성과 * 유저리서치 결과를 바탕으로 담당 팀에서 이름 입력 구조를 유연하게 변경하고 인증 절차 전반을 고도화했습니다. * 개선 이후 외국인 사용자의 인증 퍼널 통과율이 15% 상승하는 가시적인 성과를 거두었습니다. * 현재는 외국인과 내국인 간의 인증 통과율 격차가 거의 해소되었으며, 디지털 금융 소외 계층을 위한 장벽을 낮추는 기술적 기틀을 마련했습니다. 디지털 금융 서비스에서 외국인 사용자의 접근성을 높이려면 단순한 번역을 넘어, 국내 인증 체계(통신사, 실명확인 기관)와 사용자 입력 데이터 간의 '포맷 불일치' 문제를 기술적으로 해결하는 것이 필수적입니다. 사용자가 직접 시스템에 맞추게 하는 것이 아니라, 시스템이 다양한 케이스를 수용할 수 있도록 설계를 개선하는 것이 진정한 금융 포용의 시작입니다.

슬롯(Slots)으로 (새 탭에서 열림)

Figma는 Schema 2025를 통해 디자인 시스템이 단순한 컴포넌트 라이브러리를 넘어, AI와 코드 연동을 통해 제품 개발 전체 프로세스를 가속화하는 핵심 인프라로 진화하고 있다고 강조합니다. 이제 디자인 시스템은 디자이너와 개발자 사이의 장벽을 허물고, 복잡한 다중 플랫폼 환경에서도 일관된 사용자 경험을 실시간으로 유지하는 방향으로 나아가고 있습니다. **AI를 통한 디자인 시스템의 지능화** * 단순 반복적인 컴포넌트 문서화나 속성 정의 작업을 AI가 보조하여 관리 비용을 획기적으로 줄이고 시스템 구축 속도를 높입니다. * 디자인 시스템 내의 방대한 가이드를 AI가 학습하여, 디자이너가 작업 중에 필요한 규칙을 즉각적으로 제안받거나 오류를 자동으로 수정하는 '디자인 린팅' 기능이 강화됩니다. **코드 중심의 협업 체계: Code Connect** * Figma 디자인과 실제 프로덕션 코드를 직접 연결하는 'Code Connect'를 통해 디자인 시스템의 '단일 진실 공급원(Single Source of Truth)'을 실현합니다. * 개발자는 Dev Mode에서 디자이너가 의도한 정확한 코드 스니펫을 확인하고 사용할 수 있어, 구현 과정에서의 커뮤니케이션 오류를 최소화합니다. **Variables를 활용한 다중 플랫폼 대응 및 확장성** * 색상, 간격, 타이포그래피 등의 스타일을 Variables(변수)로 체계화하여 다크 모드나 다양한 테마 전환을 코드와 동기화된 방식으로 처리합니다. * 플랫폼별로 상이한 토큰 값을 하나의 시스템 내에서 유연하게 관리함으로써, 모바일과 웹 등 다양한 환경에 대응하는 디자인 시스템의 운영 효율성을 극대화합니다. **실천적 제언** 향후 디자인 시스템은 '만드는 것'보다 '어떻게 연결하고 유지할 것인가'에 초점이 맞춰질 것입니다. 조직은 단순히 컴포넌트의 개수를 늘리는 데 집중하기보다, AI와 코드 연동 도구를 적극적으로 도입하여 디자인과 개발의 워크플로우를 하나로 통합하는 시스템 고도화 전략을 수립해야 합니다.

인터넷에서 가장 많이 본 (새 탭에서 열림)

클라우드플레어는 매일 76억 회 이상 노출되는 인터넷의 대표적 UI인 '턴스타일(Turnstile)'과 '챌린지 페이지'를 사용자 중심으로 전면 개편했습니다. 인공지능 발전에 따른 보안 위협 증가로 보안 확인 횟수가 급증함에 따라, 사용자 좌절감을 줄이고 전 세계 수십억 명에게 일관된 경험을 제공하기 위해 정보 아키텍처를 표준화하고 기술적 복잡성을 직관적인 디자인으로 통합했습니다. ## 기존 UI의 문제점과 리디자인의 필요성 - **보안 인증의 급격한 증가**: 봇 공격이 정교해지면서 보안 확인 횟수가 연평균 58.1%씩 증가하여 2025년 기준 일일 53.5억 건에 달하게 되었고, 이는 사용자 피로도 증가로 이어졌습니다. - **불일치하는 사용자 경험**: 기존 UI는 에러 메시지가 지나치게 기술적이거나 모호했으며, 위젯과 풀페이지(Challenge Page) 간의 레이아웃과 시각 언어가 통일되지 않아 사용자가 상황을 파악하기 어려웠습니다. - **불분명한 피드백 루프**: 사용자가 불만을 표출하거나 오류를 보고하는 피드백 옵션이 모호하게 설계되어, 실제 문제 해결에 필요한 유의미한 데이터를 수집하는 데 한계가 있었습니다. ## 디자인 감사 및 사용자 여정 분석 - **포괄적 상태 점검**: 모든 에러 시나리오와 상호작용 상태를 전수 조사하여 기술적 복잡함과 사용자 편의성 사이의 간극을 확인했습니다. - **엣지 케이스의 일반화**: 수십억 명이 사용하는 도구인 만큼, 극소수의 예외 상황도 실제로는 수만 명에게 영향을 미치는 주요 케이스로 간주하고 모든 문화권과 기술 숙련도를 포용하도록 설계했습니다. - **감정 기반 여정 지도**: 사용자가 보안 확인을 만나는 순간부터 에러 발생, 최종 통과에 이르기까지의 감정 변화를 추적하여 가장 좌절감이 큰 지점을 개선 포인트로 잡았습니다. ## 통합 정보 아키텍처 구축 - **"생각하게 하지 마(Don't Make Me Think)" 원칙**: 사용자가 인터페이스를 해석하거나 고민할 필요가 없도록 시각적 계층 구조를 완전히 단순화했습니다. - **구조적 통일성**: 소형 위젯인 턴스타일과 전체 화면인 챌린지 페이지에 동일한 구조적 패턴을 적용하여, 버튼 위치나 설명 텍스트, 도움말 링크의 배치를 표준화했습니다. - **창의성보다 일관성**: 개별적인 디자인 창의성보다는 엄격한 프레임워크를 우선시하여, 사용자가 어떤 기기나 환경에서도 익숙하게 보안 인증을 마칠 수 있도록 제약 조건을 설계에 반영했습니다. 보안 인증과 같은 필수적인 마찰 구간에서는 기술적 완벽함만큼이나 사용자의 인지 부하를 줄이는 디자인 표준화가 중요합니다. 대규모 서비스를 운영한다면 모든 사용자가 직관적으로 이해할 수 있도록 정보 아키텍처를 통일하고, 에러 메시지에서 기술적 전문용어를 배제하여 명확한 가이드를 제공하는 것이 사용자 이탈을 막는 핵심 전략이 될 것입니다.

웹뷰 엔지니어를 위한 iOS Webview Input 경험 개선기 (새 탭에서 열림)

당근 커뮤니티실의 웹뷰 엔지니어가 iOS 환경에서 키보드가 올라올 때 화면 전체가 위로 밀리는 고질적인 문제를 해결하기 위해 시도한 네 가지 단계의 여정을 담고 있습니다. iOS 웹뷰의 레이아웃(Layout) 및 시각적(Visual) 뷰포트 특성을 분석하고, 최종적으로 `opacity` 속성을 이용해 OS의 자동 스크롤 동작을 선제적으로 차단하는 최적의 사용자 경험(UX) 솔루션을 도출했습니다. 이는 기술적 완결성보다 유저의 입력 흐름을 깨지 않는 실전적인 해결책에 집중한 사례입니다. ### iOS 웹뷰의 뷰포트 구조와 문제의 원인 iOS 웹뷰에서 입력창(Input)에 포커스가 되면 키보드 공간을 확보하기 위해 페이지가 위로 밀려 올라가는 현상이 발생합니다. * **두 가지 뷰포트의 차이**: 키보드가 올라와도 크기가 변하지 않는 'Layout Viewport'와 사용자 눈에 보이는 영역인 'Visual Viewport' 간의 불일치가 원인입니다. * **OS의 강제 동작**: iOS는 포커스된 입력창을 시각적 영역 안에 두기 위해 페이지 전체를 밀어 올리며, 이 과정에서 상단 콘텐츠가 화면 밖으로 사라지는 등 웹 개발자가 제어하기 어려운 동작이 수반됩니다. ### 초기 시도: 리사이징과 오프셋 보정의 한계 문제를 인지한 후 화면을 원래 위치로 되돌리거나 밀린 만큼 따라가는 방식을 시도했으나 기술적 한계가 있었습니다. * **Resize 방식**: `visualViewport`의 변화를 감지해 래퍼 요소를 축소하고 `scrollTo(0, 0)`를 호출했으나, OS가 화면을 먼저 밀어버린 후 복구되기 때문에 화면 떨림과 깜빡임이 발생했습니다. * **OffsetTop 방식**: `visualViewport.offsetTop` 값을 계산해 화면이 밀린 만큼 레이아웃의 `top` 위치를 조정했습니다. 첫 번째 시도보다 나았지만, 키보드가 올라오는 과정에서 실시간 보정 딜레이로 인한 미세한 진동 피드백이 남았습니다. ### 전환점: Fake Input을 활용한 입력창 스왑 iOS가 화면을 밀어 올리는 원인 자체를 제거하기 위해 입력창을 두 개로 분리하는 전략을 세웠습니다. * **동작 원리**: 평소에는 화면에 보이는 'Fake Input(ReadOnly)'을 노출하고, 터치 시 화면 밖에 숨겨둔 'Real Input'에 포커스를 줍니다. * **효과**: iOS는 화면 밖에 있는 요소를 위해 스크롤을 발생시키지 않으므로 화면 밀림이 완벽히 해결되었습니다. * **문제점**: 두 입력창 사이의 값(Value), 선택 영역, 자동 높이 조절 등을 동기화해야 하는 로직이 매우 복잡해져 유지보수 부담이 컸습니다. ### 최종 해결책: Opacity를 이용한 OS 속이기 입력창을 하나만 유지하면서도 OS의 자동 스크롤을 막기 위해 브라우저의 특성을 활용한 'Opacity Trick'을 적용했습니다. * **핵심 아이디어**: iOS는 `opacity: 0`인 요소에 대해서는 'scroll-into-view'(포커스된 요소를 화면 안으로 가져오는 동작)를 수행하지 않는다는 점을 발견했습니다. * **구현 로직**: `onTouchStart` 시점에 입력창의 `opacity`를 0으로 만들어 자동 스크롤을 차단한 뒤, `focus`가 완료되고 키보드가 올라온 시점에 다시 `opacity`를 1로 복원합니다. * **결과**: 입력창 상태 관리의 복잡성 없이 단일 요소를 사용하면서도 화면 밀림 현상을 선제적으로 차단하여 가장 매끄러운 UX를 구현했습니다. 정석적인 API가 없는 환경에서 유저 경험을 위해 선택한 이 방식은 다소 'Hacky'할 수 있으나, 프로덕트의 핵심인 '글쓰기 경험'을 보호하기 위한 엔지니어링적 결단이었습니다. 기술적인 완벽함보다는 유저가 느끼는 불편함을 제거하는 것이 우선이며, OS 업데이트 등 변화하는 환경에 맞춰 지속적으로 해결책을 고도화해 나가는 자세가 중요합니다.

디스코드 테마를 변경 (새 탭에서 열림)

디스코드는 사용자가 데스크톱과 모바일 환경 모두에서 자신만의 개성을 표현할 수 있도록 앱의 시각적 테마 기능을 강화했습니다. 모든 사용자는 네 가지 기본 테마를 자유롭게 선택할 수 있으며, 니트로(Nitro) 구독자에게는 더욱 폭넓은 색상 옵션과 커스텀 기능이 제공됩니다. 이를 통해 기존의 단순한 라이트·다크 모드를 넘어 더욱 다채로운 사용자 인터페이스 환경을 구축할 수 있게 되었습니다. **사용자 권한에 따른 테마 선택 폭** * **일반 사용자:** 앱의 룩앤필을 변경할 수 있는 4가지 기본 테마가 모든 사용자에게 무료로 제공됩니다. * **니트로 멤버 전용 혜택:** 니트로 구독자는 기본 테마 외에 28가지의 추가 컬러 테마를 즉시 사용할 수 있습니다. * **커스텀 테마 제작:** 니트로 멤버는 제공된 프리셋을 사용하는 것에 그치지 않고, 본인의 취향에 맞는 고유한 커스텀 테마를 직접 제작하여 적용할 수 있습니다. **설정 편의성 및 플랫폼 호환성** * **멀티 디바이스 지원:** 테마 설정은 데스크톱 앱과 모바일 앱 모두에서 동일하게 적용되어 어디서든 일관된 시각적 경험을 유지합니다. * **직관적인 인터페이스:** 기존의 라이트 모드나 다크 모드를 전환하던 방식과 동일하게 설정 메뉴에서 간편하게 새로운 테마를 탐색하고 적용할 수 있습니다. 기존의 단조로운 배경색에서 벗어나 자신만의 소통 환경을 꾸미고 싶다면 디스코드 설정의 테마 메뉴를 확인해 보시기 바랍니다. 특히 니트로 사용자라면 제공되는 다양한 색상 조합과 커스텀 기능을 활용해 최적화된 시각적 분위기를 연출해 보는 것을 추천합니다.

디스코드 체크포인트가 출시 (새 탭에서 열림)

Discord는 2025년을 마무리하며 사용자의 활동 기록을 한눈에 살펴볼 수 있는 첫 번째 연말 결산 기능인 ‘Discord 체크포인트(Discord Checkpoint)’를 출시했습니다. 이 기능을 통해 사용자는 지난 한 해 동안 보낸 메시지 수, 음성 채팅 시간, 가장 많이 대화한 친구 등 플랫폼 내에서의 활동을 구체적인 데이터로 확인할 수 있습니다. 이는 사용자가 한 해 동안 Discord에서 쌓은 추억과 기여를 되돌아보고 커뮤니티와의 유대감을 강화하는 계기를 제공합니다. **Discord 체크포인트의 주요 통계 및 확인 방법** * 지난 1년간 전송한 메시지 총량과 음성 채팅 채널에 머문 시간 등 활동량을 수치로 보여줍니다. * 가장 자주 사용한 이모지, 가장 오래 머무른 서버, 그리고 가장 빈번하게 소통한 '베스트 프렌드'가 누구인지 분석하여 제공합니다. * 데스크톱 앱 우측 상단의 깃발 아이콘이나 모바일 앱 '사용자(You)' 탭에 표시되는 체크포인트 배너를 통해 바로 접속할 수 있습니다. * 체크포인트를 확인하기 위해서는 앱을 최신 버전으로 업데이트해야 하며, 설정 내 ‘데이터를 사용하여 환경 개인화’ 옵션이 활성화되어 있어야 합니다. **개인별 카드 매칭과 한정판 보상** * 사용자의 활동 패턴에 따라 총 10가지의 서로 다른 '체크포인트 카드' 중 하나가 결과로 부여됩니다. * 각 카드에는 그에 어울리는 전용 아바타 장식이 포함되어 있어, 본인의 활동 성향을 프로필에 표현할 수 있습니다. * 제공되는 한정판 아바타 장식은 2026년 1월 15일까지 착용할 수 있어 연말연시 분위기를 더해줍니다. **공유 옵션 및 프라이버시 관리** * 분석된 결과 요약본을 채팅창에 간편하게 공유하여 친구들과 결과를 비교하거나 대화를 나눌 수 있습니다. * 모든 데이터는 기본적으로 본인만 볼 수 있는 비공개 상태로 유지되며, 공유 여부는 사용자가 직접 결정할 수 있습니다. * 활동량이 충분하지 않은 계정의 경우 요약 데이터가 생성되지 않을 수 있으므로 참고가 필요합니다. Discord를 꾸준히 이용해 온 사용자라면 지금 바로 앱을 업데이트하여 본인의 2025년 기록을 확인해 보시기 바랍니다. 특히 기간 한정으로 제공되는 아바타 장식은 자신의 활동 정체성을 나타낼 좋은 기회이므로, 잊지 말고 체크포인트를 방문하여 보상을 수령하고 친구들과 추억을 공유해 보시는 것을 추천합니다.

디자이너 수요가 증가하는 이유 | Figma 블로그 (새 탭에서 열림)

2026년의 디자이너는 단순히 시각적인 화면을 만드는 역할을 넘어, 기획과 코드 사이의 복잡한 영역인 '지저분한 중간 단계(messy middle)'에 더 깊이 관여하게 될 것입니다. AI가 반복적인 디자인 작업을 자동화함에 따라 디자이너의 핵심 역량은 픽셀을 옮기는 것에서 제품의 로직과 시스템을 설계하는 방향으로 이동하고 있습니다. 결론적으로 미래의 디자이너는 기술적 장벽을 허물고 개발 및 비즈니스 프로세스에 직접 개입하여 제품의 최종 품질을 결정짓는 '시스템 설계자'로서의 면모를 갖춰야 합니다. ### AI가 재정의하는 디자인 프로세스 * AI 기술의 발전으로 반복적인 레이아웃 생성, 에셋 가공, 기본적인 가이드라인 준수와 같은 단순 작업은 자동화됩니다. * 디자이너는 직접 처음부터 모든 것을 그리는 '창작자'에서, AI가 제안한 결과물 중 최적의 안을 선택하고 세밀하게 조정하는 '큐레이터'이자 '편집자'의 역할을 수행하게 됩니다. * 이러한 변화는 디자이너가 물리적인 작업 시간보다 제품의 근본적인 가치와 사용자 경험의 흐름을 고민하는 데 더 많은 시간을 할애할 수 있게 만듭니다. ### Messy Middle: 설계와 구현의 통합 * '지저분한 중간 단계(Messy Middle)'는 디자인 시안이 실제 제품(코드)으로 변환되는 과정에서의 불확실성과 복잡성을 의미합니다. * 미래의 디자이너는 단순히 정적인 화면을 전달하는 데 그치지 않고, 상태 관리(State management), 데이터 흐름, 엣지 케이스 처리 등 개발적 맥락을 디자인 시스템 내에 직접 구축해야 합니다. * 디자인 도구와 코드 간의 간극이 줄어들면서, 디자이너가 디자인 환경 내에서 실제 로직을 정의하고 이를 개발 환경에 직접 반영하는 워크플로우가 보편화될 것입니다. ### 확장된 역할과 다학제적 역량 * 디자이너의 업무 영역이 비즈니스 전략과 기술 구현의 경계선으로 확장됩니다. 이는 디자인이 비즈니스 목표를 달성하기 위한 구체적인 수단으로 더욱 강력하게 작동함을 의미합니다. * 디자인 시스템은 단순한 컴포넌트 라이브러리를 넘어, 엔지니어링과 디자인이 실시간으로 동기화되는 '단일 진실 공급원(Single Source of Truth)'으로 진화합니다. * 사용자 데이터에 기반한 실시간 가설 검증과 빠른 반복 수행(Iteration) 능력이 디자이너의 가장 중요한 성과 지표가 됩니다. 이제 디자이너는 "어떻게 보이는가"보다 "어떻게 작동하는가"에 집중해야 합니다. 툴의 숙련도에 의존하기보다는 제품의 복잡한 논리 구조를 이해하고, AI를 비서 삼아 더 고도화된 문제 해결에 집중하는 능력을 길러야 합니다. 코드와 데이터에 대한 리터러시를 높여 개발 및 비즈니스 직군과 원활하게 소통할 수 있는 '하이브리드 전문가'가 되는 것이 미래 디자인 시장의 핵심 경쟁력이 될 것입니다.

소프트웨어는 문화다 (새 탭에서 열림)

소프트웨어는 단순한 도구를 넘어 인간의 사고와 관계를 재구성하는 문화적 요소로 진화했습니다. 과거의 정적인 상호작용은 이제 AI를 통해 사용자의 니즈에 실시간으로 반응하는 유연하고 지능적인 시스템으로 변모하고 있습니다. 미래의 디자인은 단순한 자동화가 아니라 기술을 통해 인간의 창의성과 의도를 어떻게 증폭시킬 것인지에 초점을 맞춰야 하며, 이는 곧 새로운 시대의 인간 경험을 설계하는 일이 될 것입니다. **정적 도구에서 신체적 경험으로의 전이** * 과거 소프트웨어는 화면 너머에 존재하는 효율적이고 순종적인 도구에 불과했으나, 스마트폰의 등장으로 우리 손 안의 실체가 되었습니다. * 스와이프, 탭, 핀치와 같은 신체적 제스처는 우리가 생각하고 연결되는 방식을 근본적으로 재배선했으며, 사용자 경험(UX)을 곧 인간의 경험으로 통합시켰습니다. * 지난 20년간의 상징적인 디자인 결정들은 한 시대를 정의하는 문화적 토대가 되었습니다. **지능형 시스템과 유동적 인터페이스의 등장** * 고정된 상호작용의 시대를 지나, 스스로 학습하고 적응하며 응답하는 지능형 시스템으로의 전환이 시작되었습니다. * 미래의 인터페이스는 정체되어 있지 않고 사용자의 행동과 맥락에 따라 실시간으로 형태를 바꾸는 '유동적이고 살아있는' 존재가 될 것입니다. * 이러한 변화 속에서 현재 우리가 내리는 설계 방식과 결정들은 다음 세대가 기술과 관계 맺는 방식을 규정하게 됩니다. **명령에서 대화로, 파라미터에서 목표로의 변화** * AI는 인간의 능력을 증폭시키는 도구이자 협력자로서, 사용자는 이제 복잡한 파라미터 설정 대신 대화를 통해 시스템을 제어합니다. * 인터페이스의 레이어를 조절하던 방식에서 벗어나, 이제는 전체적인 목적(Goal)과 맥락(Gestalt)을 바탕으로 기술과 소통하게 됩니다. * 기술이 무엇을 자동화할 것인가보다 인간의 주의(Attention)를 어디에 집중시킬 것인가가 디자인의 핵심 과제가 됩니다. 디자이너는 AI를 단순한 효율성 도구로 보지 말고 인간의 호기심과 장인정신을 투영할 수 있는 매개체로 삼아야 합니다. 기술이 유동적으로 변하는 시대일수록 디자이너는 자신만의 고유한 관점을 정립하고, 소프트웨어가 인간 문화에 미치는 깊은 영향력을 고려하여 의미 있는 경험을 설계하는 데 집중해야 합니다.

끊김 없는 사용 경험을 위하여 : 카카오톡 선물함 속 교환권을 배달의민족 주문으로 연결한 여정 (새 탭에서 열림)

배달의민족 선물하기 팀은 사용자가 카카오톡으로 받은 브랜드 교환권을 배달의민족 앱에서 직접 등록하고 주문에 사용할 수 있도록 하는 '외부 교환권 연동 서비스'를 기획하고 구현했습니다. 이 프로젝트는 플랫폼 간의 기술적·비즈니스적 장벽을 허물어 사용자의 파편화된 구매 경험을 하나로 잇고, 외부의 잠재적 주문 수요를 배달의민족 생태계 안으로 흡수하는 것을 핵심 목표로 삼았습니다. 결과적으로 기술적 복잡성과 다자간의 이해관계를 극복하며 '끊김 없는 연결'이라는 사용자 중심의 가치를 실현해냈습니다. **사용자 불편 해소와 비즈니스 성장의 결합** - 카카오톡 선물을 사용하기 위해 브랜드 자사 앱을 새로 설치하거나 매장을 직접 방문해야 했던 고객의 페인포인트(Pain Point)를 해결했습니다. - 외부 플랫폼에 머물던 교환권 수요를 배달의민족 앱 내 주문으로 전환함으로써 신규 고객 유입과 락인(Lock-in) 효과를 도모했습니다. - 단순히 기능을 추가하는 것을 넘어, 플랫폼 경계를 확장하여 배달의민족을 모든 주문 경험의 통합 창구로 만들고자 했습니다. **플랫폼 간 장벽을 넘는 ‘연결’의 본질 정의** - 여러 조직이 참여하는 대규모 프로젝트에서 "플랫폼 간 장벽을 넘어 사용자에게 끊김 없는 연결을 제공한다"는 본질적인 목표를 설정하여 의사결정의 기준으로 삼았습니다. - 기술적 제약이나 비즈니스 수익성 등 이해관계가 충돌할 때마다 프로젝트의 본질을 자문하며 사용자 중심 사고를 유지했습니다. - 고립된 플랫폼 생태계를 연결함으로써 사용자에게 경험의 단절이 없는 새로운 가치를 제공하는 선례를 남겼습니다. **다자간 협업을 위한 맞춤형 소통 기술** - 카카오(플랫폼사), 브랜드사, 쿠폰 연동사 등 서로 다른 KPI를 가진 파트너들과 공통의 목표인 ‘고객 경험 개선’을 공유하며 협력을 이끌어냈습니다. - 백엔드 개발자에게는 API 응답 속도와 에러 핸들링을, 비즈니스 담당자에게는 제휴 조건과 정산 프로세스를 중심으로 설명하는 ‘맞춤형 언어’를 사용했습니다. - ‘등록·사용’(배민)과 ‘조회·승인’(연동사)처럼 서로 다른 도메인 용어와 로직을 꼼꼼히 동기화하여 시스템 간의 간극을 메웠습니다. **주도적인 문제 해결과 기술적 조율** - 단순히 요구사항을 전달하는 가교 역할을 넘어, 양사 기술팀이 합리적인 타협점을 찾을 수 있도록 API 스펙과 에러 대응 정책을 주도적으로 조율했습니다. - 다양한 외부 연동사의 시스템을 수용하면서도 배달의민족 내에서의 사용 경험을 표준화하기 위한 기술적 스펙을 정의했습니다. - 복잡한 의존 관계를 가진 작업들 사이에서 우선순위를 설정하고 일정을 관리하며 프로젝트의 항해사 역할을 수행했습니다. 이 프로젝트는 기술적 구현만큼이나 플랫폼 간의 심리적·비즈니스적 거리를 좁히는 과정이 중요함을 보여줍니다. 복잡한 시스템 연동을 앞두고 있다면, 기술 스펙에 매몰되기보다 '사용자에게 어떤 연결된 가치를 줄 것인가'라는 본질을 먼저 정의하고, 파트너의 언어로 소통하며 주도적으로 표준을 만들어가는 접근 방식이 필요합니다.