사용자 경험

165 개의 포스트

figma3분 읽기큐레이션 요약

Config Leadership Collective에 앞서 우리가 품었던 7가지 질문 | Figma 블로그

AI 시대의 리더십은 완성된 해법을 제시하는 것보다 변화 속에서 직접 실험하고 조직의 적응력을 키우는 데 초점을 둬야 한다. AI가 실행 업무를 일부 대체하더라도 사용자 이해, 장인정신, 판단력과 같은 인간의 핵심 역량은 여전히 중요하다. 팀은 자율적인 소규모 단위로 구성하고, 교육과 작은 성공 경험을 통해 새로운 도구를 점진적으로 받아들이게 해야 한다. ## 변화 속에서 함께 실험하는 리더십 - AI와 새로운 제작 도구의 변화가 너무 빠르기 때문에 하나의 고정된 프로세스를 고수하기 어렵다. - 리더 역시 모든 답을 알고 있는 전문가가 아니라 팀과 함께 배우는 초보자의 자세를 가져야 한다. - 직접 프로토타입을 만들고 실패 사례까지 공유하면 팀원들이 실험을 더 자연스럽게 받아들일 수 있다. - 새로운 시도가 성공하지 않더라도 즐겁게 시도할 수 있도록 조직 차원의 심리적 허용과 자율성을 제공해야 한다. - 핵심 역량은 완성된 방법론보다 변화에 대응하는 적응력이다. ## AI 시대에도 유지해야 할 기본 원칙 - AI가 업무 방식을 바꾸더라도 다음과 같은 기본 원칙은 변하지 않는다. - 실제 사용자의 필요와 업무 흐름을 이해할 것 - 사용자를 위해 제품을 설계할 것 - 결과물의 완성도와 세부 품질을 중시할 것 - 도구 자체를 따라가는 데 몰두하면 “무엇을 만들 것인가”보다 “무슨 도구를 쓸 것인가”가 중심이 될 위험이 있다. - 디자인의 대상은 여전히 인간이므로, 기술보다 사용자와 문제에 대한 이해가 우선되어야 한다. ## 전문성의 중심이 실행에서 판단으로 이동 - 과거에는 특정 작업을 빠르고 정확하게 수행하는 능력이 전문성의 중요한 기준이었다. - AI가 일부 실행과 산출물 생성을 담당하면서 전문성의 가치는 다음 영역으로 이동한다. - 무엇이 좋은 결과인지 판단하는 감각 - 여러 대안 중 상황에 맞는 선택을 하는 분별력 - 결과물을 검토하고 개선하는 편집 능력 - 사용자와 비즈니스 맥락을 고려한 의사결정 - 전문가는 모든 정답을 알고 있는 사람이 아니라, 수많은 선택지 중 현재 상황에 가장 적합한 답을 고르는 사람이다. - 따라서 AI 활용 능력만큼 결과를 비판적으로 평가하는 ‘편집자의 시각’이 중요해진다. ## AI 시대의 팀 구조와 인재상 - AI는 디자인·제품·엔지니어링의 경계를 흐리므로 기존 직무 중심 조직을 재검토할 필요가 있다. - Airbnb는 제품, 디자인, 엔지니어링에 데이터 과학자나 비즈니스 담당자 등을 결합한 소규모 포드(pod) 구조를 활용한다. - 각 포드는 작은 스타트업처럼 독립적으로 움직이며 다양한 관점에서 문제를 해결한다. - AI가 생성한 결과물을 평가하고 다듬을 수 있도록 강한 편집력과 비판적 사고를 갖춘 인재가 필요하다. - 효과적인 팀은 다음과 같은 특성을 가진다. - 적극적으로 시도하는 태도 - 대담하고 다양한 아이디어 - 서로 반대 의견을 편하게 제시하는 문화 - 의견 충돌을 생산적인 논의로 전환하는 능력 - 모든 사람이 쉽게 동의하기만 하는 팀은 오히려 충분한 검토와 논쟁이 부족할 수 있다. ## 새로운 도구를 점진적으로 도입하는 방법 - 단순히 “AI를 사용하라”고 지시하는 것만으로는 조직의 도입이 이루어지지 않는다. - 구성원이 도구를 익힐 수 있도록 교육 과정과 학습 인프라를 제공해야 한다. - 사용법을 배울 수 있다는 안전감이 있어야 팀원들이 새로운 도구를 업무에 적용할 수 있다. - 대규모 업무 프로세스를 한 번에 자동화하기보다 가장 작은 작업부터 시작하는 방식이 효과적이다. - 예: Slack의 긴 대화 한 편을 AI 에이전트로 요약하기 - 작은 성공을 통해 실질적인 유용성을 체감하게 하기 - 이후 더 복잡한 업무로 활용 범위를 확대하기 - 점진적인 도입은 구성원의 거부감을 낮추고 AI 활용 숙련도와 신뢰를 단계적으로 높인다. ## 실용적인 적용 방향 리더는 먼저 팀과 함께 작은 AI 실험을 진행하고, 결과를 평가할 기준을 마련해야 한다. 도구 사용 교육과 실패를 허용하는 문화를 병행하되, 사용자 이해와 품질 기준은 절대 낮추지 않는 것이 중요하다. AI가 만든 결과물을 그대로 받아들이기보다 맥락에 맞는지 판단하고 개선하는 능력을 조직의 핵심 역량으로 키워야 한다.

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

소프트웨어의 미래는 어떤 모습일까? | Figma 블로그

AI 시대의 소프트웨어는 사용자가 정해진 메뉴와 명령어를 배우는 방식에서 벗어나, 사람의 의도·감정·상황을 이해하고 그에 맞게 반응하는 방향으로 발전할 수 있다. 글은 창작자 커뮤니티의 상상을 통해, 소프트웨어가 더 자연스럽고 인간적인 상호작용을 제공하는 미래를 제시한다. 결론적으로 중요한 변화는 기능의 증가 자체보다 기술이 사람의 맥락과 상태에 맞춰지는 데 있다. ## 소프트웨어와 문화의 상호작용 - 핀치 투 줌, 좋아요 누르기, 스와이프처럼 특정 제품을 위해 만들어진 제스처가 사람들의 사고방식과 문화까지 바꿔 왔다. - AI의 등장은 또 다른 전환점으로, 소프트웨어를 만들고 사용하고 서로 소통하는 방식을 새롭게 상상하게 한다. - 미래의 인터페이스는 기술 중심이 아니라 사람의 의도, 감정, 관계 형성 방식을 중심으로 설계될 가능성이 있다. ## 맥락에 따라 나타나는 일시적 도구 - 사용자가 프레임, 문장, 영상 클립 등 특정 요소를 선택하면 현재 상황에 필요한 조작 기능만 주변에 표시된다. - 작업이 끝나면 해당 컨트롤은 사라져, 항상 메뉴와 패널을 탐색하거나 기능 위치를 외울 필요가 줄어든다. - 예를 들어 느린 영상 클립을 선택하면 타이밍, 페이싱, 대체 컷, 사운드 브리지 같은 관련 옵션이 바로 제공된다. - 사용자는 버튼을 누르는 방법보다 “무엇을 왜 바꾸려는지”에 집중할 수 있다. ## 음성·몸짓을 이해하는 매직 마커 - 사용자가 화면의 대상을 동그라미 치고 원하는 위치로 끌면서 음성으로 설명하면, AI가 말·커서의 이동·몸짓을 함께 해석한다. - 모션 디자인에서는 레이어를 직접 움직이며 바운스, 속도, 이징 등을 말이나 소리, 신체 표현으로 설명할 수 있다. - 문서 내 객체를 정확히 지칭하거나 정교한 프롬프트를 작성할 필요가 줄어든다. - AI가 검색창이나 명령어 도구가 아니라, 말하고 가리키며 협업하는 동료처럼 작동하는 방식이다. ## 필요한 결과에 맞춰 변하는 적응형 존재감 - 시스템은 사용자의 반응을 관찰해 도움의 수준과 전달 방식을 조절한다. - 사용자가 혼란스러워하면 단계별 안내를 제공하고, 익숙하게 작업하면 개입을 줄인다. - 상황에 따라 음성·텍스트·시각 자료를 전환하고, 속도를 늦추거나 정보를 작은 단계로 나눌 수 있다. - 지금까지는 사람이 기계의 작동 방식에 적응해야 했지만, AI 시대에는 시스템이 사용자의 준비도와 능력에 맞춰야 한다. - 의료와 교육처럼 사용자의 상태와 이해 수준이 중요한 분야에서 특히 의미가 크다. ## 감정에 반응하는 공감형 흐름 - 입력 속도, 스타일러스 압력, 말하는 리듬, 표정, 같은 문장을 반복해서 수정하는 행동 등이 사용자의 감정 신호로 활용된다. - 음식 배달 앱은 결정 피로가 감지되면 선택지를 단순화하고, 창작 도구는 사용자가 몰입한 순간 불필요한 버튼과 프롬프트를 숨길 수 있다. - 호텔 앱은 사용자가 피곤한 상태로 체크인한다고 판단하면 업그레이드 제안 대신 “객실이 준비되었습니다”라는 핵심 정보만 전달한다. - 사용자가 원하는 것을 매번 명시적으로 설명하지 않아도, 시스템이 행동과 상태를 바탕으로 필요한 경험을 제공하는 방식이다. ## 신경계를 안정시키는 상황 단서 - 초기 디지털 경험의 모뎀 접속음, 진행 표시줄, “메일이 도착했습니다”라는 음성처럼 사용자의 위치와 진행 상태를 알려 주는 신호를 다시 활용한다. - 오늘날의 인터페이스는 주의를 끌기 위한 알림은 많지만, 사용자를 안정시키고 방향을 알려 주는 단서는 부족하다. - 항상 보이는 진행률, 전환을 알리는 소리, 일관된 시각 언어 등을 통해 경험의 흐름을 예측 가능하게 만들 수 있다. - 제품 자체가 자극적이지 않은 것만으로는 부족하며, 이미 과부하된 사용자의 신경계를 적극적으로 진정시키는 설계가 필요하다. ## 움직임으로 조율하는 공간형 상호작용 - 클릭과 탭 대신 손짓, 몸의 방향, 기울기와 같은 움직임으로 시스템을 조작한다. - 음악 소프트웨어에서 공중으로 손을 쓸어 소리를 변형하거나, AR 환경에서 몸을 기울여 이동하고, 복잡한 디자인 도구의 시각 효과를 제스처로 조정할 수 있다. - 이런 상호작용은 자동화하거나 빠르게 처리하기 어렵기 때문에 사용자의 지속적인 주의와 현재 순간에 대한 몰입을 요구한다. - 기술이 속도와 효율만 보상하는 것이 아니라, 의도적인 느림과 신체적 참여를 경험의 일부로 만들 수 있다. ## 서로 다른 입력을 결합하는 매시업 - 데스크톱에서 두 파일을 함께 끌어놓거나, 터치스크린에서 두 객체를 동시에 누르거나, XR에서 두 대상을 손뼉 치듯 결합해 새로운 결과물을 만든다. - 시스템은 두 입력의 구조·분위기·의미를 합성해 하나의 새로운 결과를 생성한다. - 예를 들어 재생목록과 도시 지도를 결합하면 음악과 장소 정보가 결합된 새로운 경험을 만들 수 있다. - 다만 제공된 글 내용은 이 매시업 섹션의 중간에서 끝나므로 구체적인 후속 사례와 결론은 확인할 수 없다. 실무적으로는 AI 기능을 추가할 때 명령어와 메뉴를 늘리는 것보다, 사용자의 의도·감정·상황을 어떻게 감지하고 필요한 순간에만 개입할지 먼저 설계하는 것이 중요하다. 특히 자동화가 사용자의 통제권을 빼앗거나 감정을 과도하게 추론하지 않도록, 명확한 피드백과 개입 조절 기능도 함께 제공해야 한다.

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

Figma Make 크레딧을 더 효율적으로 사용하는 7가지 팁 | Figma 블로그

Figma Make에서 크레딧을 효율적으로 사용하려면 긴 프롬프트를 반복하기보다 초기 설계와 변경 범위를 명확히 해야 한다. 첫 프롬프트에 프로젝트의 목표·맥락·제약·완료 기준을 충분히 담고, 이후에는 필요한 부분만 구체적으로 수정하는 방식이 효과적이다. 단순한 시각 변경이나 데이터 수정은 AI에 다시 요청하기보다 Edit 도구나 소스 코드 직접 편집을 활용하는 것이 좋다. ## 초기 프롬프트에 프로젝트의 기준점 담기 - 첫 프롬프트는 단순한 요청이 아니라 프로젝트의 전체 브리프처럼 작성한다. - 다음 내용을 구체적으로 포함한다. - 프로젝트의 목표 - 사용 맥락 - 필요한 UI 요소와 동작 - 기술적·기능적 제약 - 최종적으로 “완료”라고 판단할 기준 - 초기 구조가 탄탄할수록 이후에 잘못된 구현을 되돌리는 비용과 크레딧 사용량이 줄어든다. - 대규모 프로젝트는 다음 순서로 나누는 것이 효과적이다. 1. 화면과 컴포넌트의 전체 구조 설계 2. 기능과 상호작용 구현 3. 콘텐츠 입력 및 시각적 세부 조정 - 구조는 프로젝트가 진행될수록 변경하기 어려우므로 가장 먼저 확정하는 것이 좋다. ## 후속 프롬프트는 변경 범위를 좁혀 작성하기 - 첫 프롬프트 이후의 요청은 전체 프로젝트를 다시 설명하는 것이 아니라 변경 사항(delta)을 전달하는 방식으로 작성한다. - 좋은 후속 프롬프트는 다음 세 가지를 포함한다. - 무엇을 바꿀지 - 어떻게 바꿀지 - 무엇은 그대로 유지할지 - “다시 해줘”, “뭔가 이상해”처럼 모호한 요청보다 다음처럼 대상과 위치를 명시한다. - “캘린더 컴포넌트를 수정해줘” - “이 화면에 새로운 상태를 추가해줘” - “`tokens.ts` 파일을 수정해줘” - 서로 관련된 수정이 같은 컴포넌트나 로직에 집중되어 있다면 한 번에 묶는 편이 효율적이다. - 반대로 관련 없는 변경을 하나의 프롬프트에 섞으면 Make가 의도를 해석하는 비용이 커지고 결과도 불안정해질 수 있다. - 특정 파일, 컴포넌트, 상태를 지정하면 Make가 탐색해야 할 범위가 줄어들어 크레딧을 절약할 수 있다. ## 작은 시각 변경은 Edit 도구로 처리하기 - 간격 조정, 요소 삭제, 텍스트 변경처럼 결과가 거의 완성된 상태에서의 작은 수정은 AI 프롬프트보다 Edit 도구가 빠르다. - 이런 작업을 매번 프롬프트로 요청하면 새로운 설계 문제를 해결하는 것이 아니라 기존 결과를 조금씩 조정하는 데 크레딧을 소비하게 된다. - 직접 편집이 적합한 예시는 다음과 같다. - 여백이나 간격 변경 - 특정 UI 요소 제거 - 문구 수정 - 이미 구현된 컴포넌트의 단순한 스타일 조정 ## 소스 코드에서 동적 콘텐츠 수정하기 - 미리보기 화면에서 직접 수정하기 어려운 동적 콘텐츠는 소스 코드에서 값을 변경하는 편이 효율적이다. - `Go to source`를 사용해 관련 코드로 이동한 뒤 실제 데이터가 정의된 부분을 수정한다. - 반복 컴포넌트 안의 텍스트나 같은 폴더의 목록에서 가져오는 데이터 변경에 특히 유용하다. - **⌘F** 단축키로 코드를 검색해 특정 태그나 콘텐츠를 빠르게 찾을 수 있다. - 우선 `App.tsx`를 확인하고, 해당 코드가 없다면 컴포넌트 폴더의 다른 `.tsx` 파일을 살펴보면 된다. ## 실용적인 작업 원칙 처음에는 프로젝트 구조와 제약을 충분히 설명하고, 이후 요청은 한 번에 하나의 명확한 변경에 집중하는 것이 좋다. 단순한 수정은 Edit 도구나 소스 코드에서 직접 처리하고, AI는 새로운 구조·기능·상호작용처럼 직접 구현하기 복잡한 작업에 사용하는 방식이 크레딧과 시간을 모두 절약한다.

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

누구나 만들 수 있을 때 중요한 것 | Figma 블로그

AI로 누구나 제품을 빠르게 만들 수 있는 시대에는 구현 속도보다 무엇을 만들지 정하는 방향성이 더 중요하다. 좋은 팀은 여러 가능성을 동시에 탐색하고, 실제에 가까운 프로토타입으로 비교한 뒤, 선택한 방향을 반복적으로 다듬어 자신만의 결과물로 만든다. 결국 경쟁력은 속도·방향·완성도를 함께 갖추는 데서 나온다. ## 속도보다 방향이 중요해진 이유 - 과거에는 아이디어를 실제 제품으로 구현하는 능력과 코딩 역량이 큰 차별점이었다. - AI와 새로운 제작 도구로 상상과 구현 사이의 간격이 거의 사라지면서, 빠르게 만드는 능력은 기본 조건이 되었다. - 빠른 실행은 잘못된 방향으로 달리는 문제를 가릴 수 있다. - 모두가 빠르게 만들 수 있다면 차별점은 “얼마나 빨리 만들었는가”가 아니라 “무엇을 만들 가치가 있다고 판단했는가”가 된다. ## 첫 아이디어에 매몰되는 문제 - 초보 빌더는 첫 아이디어를 선택한 뒤 개선과 반복에 집중하기 쉽다. - 이 과정은 출발점을 재검토하지 않는 **국소 최적화(hill-climbing)**와 비슷하다. - 초기 선택에 따라 이후 의사결정이 결정되는 경로 의존성이 생길 수 있다. - AI 에이전트는 사용자의 첫 요청을 빠르고 친절하게 발전시키지만, 더 나은 대안을 스스로 제시하거나 터널 비전을 깨뜨리지는 못할 수 있다. - 결과적으로 아이디어를 깊게 발전시키기는 하지만, 애초에 가장 좋은 아이디어였는지는 검증하지 못한다. ## 넓게 탐색하되 실제 경험까지 검증하기 - 숙련된 팀은 먼저 선택지를 넓게 펼친다. - 서로 겹치지 않으면서 전체 가능성을 포괄하는 **MECE(Mutually Exclusive, Collectively Exhaustive)** 방식으로 방향을 정리하고 장단점을 비교한다. - 반대로 2x2 매트릭스나 와이어프레임처럼 추상적인 자료만으로는 실제 사용자 경험에 대한 확신을 얻기 어렵다. - 효과적인 방법은 여러 방향을 동시에 탐색하면서 각각을 충분히 구체화하는 것이다. - AI를 활용하면 하나의 문제에 대해 여러 인터랙티브 프로토타입을 병렬로 제작하고, 각 방향을 실제 제품처럼 비교할 수 있다. - 팀원과 AI가 함께 프로토타입을 사용하고 피드백을 나누면 추상적인 아이디어가 아니라 구체적인 경험을 기준으로 판단할 수 있다. - 이는 순차적이고 분리된 작업 방식에서 벗어나, 여러 사람이 여러 방향을 동시에 실험하는 협업 방식이다. ## 평균적인 결과를 넘어 자신만의 제품 만들기 - 누구나 빠르게 만들 수 있게 되면 제품은 검증된 패턴과 일반적인 디자인으로 수렴하기 쉽다. - AI는 통계적으로 성공 가능성이 높은 UI와 기능을 제안하지만, 그것이 반드시 깊이 고민된 제품 경험을 의미하지는 않는다. - 사용자가 AI의 첫 결과물을 그대로 받아들이면 제품은 서로 비슷하고 무난해진다. - 진짜 위험은 능력 부족이 아니라 첫 제안에 수동적으로 동의하고, “그럴듯해 보인다”는 이유로 멈추는 태도다. - 기억에 남는 제품은 기능적으로 작동하는 것에서 끝나지 않고, 제작자의 명확한 관점과 의도를 드러낸다. - 이를 위해 각 결정을 다시 질문하고, 불필요한 요소를 제거하며, 여러 번 수정하고 다듬어야 한다. - 완성도 높은 결과를 만드는 일은 타고난 감각만의 문제가 아니라, 반복적으로 보고 판단하고 개선하는 훈련의 결과다. ## 지금 중요한 세 가지 역량 - **속도**: 아이디어를 빠르게 실험하고 프로토타입으로 구현한다. - **방향**: 여러 가능성을 비교해 만들 가치가 있는 문제와 해법을 선택한다. - **완성도와 장인정신**: AI가 만든 기본 결과를 넘어 제품의 의도와 개성을 구체화한다. - 최고의 팀은 이 세 가지를 서로 맞바꾸지 않고, 빠르게 움직이면서도 신중하게 선택하고 집요하게 개선한다. 실무에서는 하나의 아이디어를 곧바로 개발하기보다 여러 방향의 프로토타입을 병렬 제작하고, 실제 사용자 경험을 비교한 뒤 선택하는 방식이 효과적이다. AI의 결과물은 출발점으로 활용하되 그대로 받아들이지 말고, 제품의 목적과 차별성이 분명해질 때까지 반복적으로 수정하는 것이 좋다.

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

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

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

toss원문

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시간 동안 직접 선물을 배치하여, "일 년 더 다닐 이유가 생겼다"는 정서적 반응을 이끌어냈습니다. **인터널 브랜딩 프로젝트를 위한 체크리스트** - 프로젝트의 존재 이유를 한 문장으로 설명할 수 있는가? - 시각적 레퍼런스를 찾기 전, 결과물이 충족해야 할 조건을 먼저 정의했는가? - 첫 대면부터 마지막 순간까지의 경험 흐름을 통째로 설계했는가? - 타협의 유혹이 올 때 돌아갈 명확한 기준이 있는가? - 이 결과물이 구성원에게 "이 팀과 함께하고 싶다"는 감정을 불러일으키는가?

discord원문

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

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

line원문

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

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

figma3분 읽기큐레이션 요약

비샬 카푸르의 AI로 정직한 제품을 만드는 10가지 규칙 | 피그마 블로그

AI 제품 개발은 속도보다 사용자 신뢰를 우선해야 하는 문제이며, 특히 금융처럼 감정과 위험이 얽힌 영역에서는 정직하고 인간적인 경험이 필수다. AI는 사람을 대체하는 기술이 아니라 탐색·프로토타이핑·반복을 가속하는 팀원으로 활용해야 한다. 이를 위해서는 인간의 직관과 비판적 사고, 고객의 실제 감정에 대한 이해를 끝까지 유지해야 한다. ## 1. 기본 원리에서 출발하라 - 복잡한 문제를 근본 요소로 분해하고, 고객의 필요와 제품의 차별화 요소를 직접 파악해야 한다. - AI는 아이디어 탐색과 반복 속도를 높일 수 있지만, 독창적인 관점과 직관을 대신할 수는 없다. - 기존 결정을 당연하게 받아들이지 말고 “왜 세 가지 결제 옵션인가?”, “한 가지나 다섯 가지는 어떤가?”, “사용자가 직접 설계할 수는 없는가?”처럼 근본적인 질문을 던져야 한다. - AI가 여러 대안을 빠르게 제시하더라도 중요한 통찰은 사람 사이의 건설적인 의견 충돌에서 나온다. ## 2. 고객의 깊은 감정에 기반하라 - 실제 고객을 관찰하고 직접 질문하는 UX 리서치와 현장 경험은 대체할 수 없다. - 소셜 미디어, 앱스토어 리뷰, 고객과의 대화를 통해 제품 사용 중 발생하는 불만과 기대를 지속적으로 파악해야 한다. - Affirm은 내부 AI 도구 ‘Pluto’를 활용해 최근 30일 동안 고객이 어떤 점에서 실망했는지 조회한다. - 대시보드와 지표는 문제의 방향을 보여주지만, 금융 서비스의 핵심 감정인 불안, 신뢰, 좌절, 안도까지 설명하지는 못한다. - 사용자가 구매하는 것은 단순한 상품이 아니라, 그 상품이 제공하는 기쁨과 안심이라는 점을 이해해야 한다. ## 3. AI를 또 하나의 팀원으로 대하라 - AI를 만능 도구나 인간을 대체할 존재로 보는 극단적인 시각을 피해야 한다. - 제품 개발은 본질적으로 협업 작업이므로, AI는 고객 인사이트를 프로토타입과 실제 제품으로 빠르게 전환하는 팀원처럼 활용할 수 있다. - 웹·모바일·데스크톱처럼 환경별로 checkout 흐름이 다른 경우, AI 도구를 사용해 다양한 실험과 검토를 수행할 수 있다. - Figma Make를 이용하면 여러 화면과 사용 사례를 한 번에 점검하고, 오래된 인터랙션 패턴이나 일관성이 깨진 부분을 조기에 찾을 수 있다. - 반복적인 검토 작업을 엔지니어에게서 디자이너와 PM에게 분산하면 개발 리소스를 절약하면서 실험과 창의성을 높일 수 있다. ## 4. 엣지 케이스를 집중적으로 실험하라 - 좋은 제품은 대표적인 성공 경로(happy path)만 매끄럽게 만드는 데서 끝나지 않는다. - 다양한 사용자 조건과 예외 상황까지 검토해야 진정성 있고 신뢰할 수 있는 경험을 만들 수 있다. - 제공된 글은 이 원칙의 도입부에서 끝나 있어, 구체적인 엣지 케이스 실험 방법과 나머지 규칙의 내용은 확인할 수 없다. AI를 제품 개발에 도입할 때는 먼저 고객 문제와 감정을 직접 이해하고, AI는 대안 탐색과 반복 작업을 가속하는 역할로 제한하는 것이 바람직하다. 특히 금융처럼 신뢰가 중요한 서비스에서는 자동화의 속도보다 인간의 판단, 설명 가능성, 예외 상황에 대한 대비가 우선되어야 한다.

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

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

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

figma3분 읽기큐레이션 요약

Figma Make로 팀이

제품 관리자는 PRD나 정적인 목업만으로 아이디어를 설명하는 대신, Figma Make로 실제 동작을 보여주는 인터랙티브 프로토타입을 빠르게 만들 수 있다. 이를 통해 복잡한 요구사항을 구체화하고, 디자이너·엔지니어·사용자의 피드백을 일찍 받아 더 빠르게 합의와 확신을 형성한다. ServiceNow 사례는 추상적인 설명보다 직접 보고 조작할 수 있는 프로토타입이 제품 방향을 설득하는 데 효과적임을 보여준다. ## 프로토타입 중심의 제품 의사결정 - PM은 고객 인사이트, 디자인 의도, 엔지니어링 제약을 연결하는 역할을 한다. - Figma Make를 활용하면 정적인 목업보다 제품의 외관과 동작을 함께 표현할 수 있다. - 초기 단계에서 인터랙티브 프로토타입을 만들면 다음과 같은 효과가 있다. - 디자이너와 엔지니어의 조기 피드백 수집 - 사용자 테스트를 통한 가정 검증 - 개발이 깊이 진행되기 전 문제 수정 - 팀이 추상적인 아이디어 대신 구체적인 결과물을 보고 논의 - 따라서 프로토타입은 단순한 디자인 산출물을 넘어, PRD를 보완하거나 대체하는 커뮤니케이션 수단이 된다. ## 복잡한 제품 사고를 공동의 이해로 전환 ServiceNow의 제품 디렉터 Ram Devanathan은 여러 제품 조직을 지원하는 디자인팀과 협업하면서 복잡한 설정 화면을 개선해야 했다. - 해당 화면에는 약 15~20개의 설정이 포함되어 있었다. - 단순한 토글 - 기술적 이해가 필요한 고급 옵션 - 장애 발생 및 우선순위 처리 방식에 영향을 주는 설정 - 시스템 부하를 바꿀 수 있는 구성 항목 - 기존 목업은 기능적으로는 동작했지만, Ram이 의도한 다음 요소를 충분히 전달하지 못했다. - 설정의 우선순위와 계층 구조 - 각 옵션에 대한 맥락적 안내 - 사용자가 느껴야 할 전반적인 경험의 톤 - 공유 디자인 리소스를 사용하는 조직에서는 디자이너의 초기 참여가 제한될 수 있다. - Figma Make의 템플릿은 디자인 시스템과 UX 패턴을 미리 포함할 수 있어, PM이 일관된 기준으로 초기 시안을 직접 발전시키는 데 도움을 준다. ## Figma Make로 설정 화면의 의도 구체화 Ram은 디자이너의 초기 목업을 Figma Make로 가져온 뒤, 설정 구조에 대한 구체적인 지침을 추가했다. - Make가 생성한 개선안은 다음과 같은 변화를 포함했다. - 관련 설정을 논리적으로 그룹화 - 단순한 설정을 화면 상단에 배치 - 개별 옵션을 설명하는 툴팁 추가 - 변경 후 서비스를 재시작해야 한다는 안내문 표시 - 그 결과 사용자는 복잡한 기술 설정을 더 명확한 순서와 구조로 탐색할 수 있게 됐다. - 프로토타입은 Ram과 디자이너가 UX 방향을 빠르게 맞추는 공통 기준이 됐다. - Ram은 말로 추상적인 의도를 설명하는 대신, “무엇을 의미하는지 직접 보여줄 수 있었다”고 평가했다. - 즉 Figma Make는 다음의 시간을 줄이는 역할을 한다. - 아이디어 설명 - 디자인 방향 조율 - 관계자 설득 - 초기 의사결정 사이클 ## 개발 전 기능 검증 제공된 글은 Ticketmaster 사례의 도입부에서 끝나 있어, 구체적인 검증 방식과 결과는 확인할 수 없다. 다만 제목과 도입 내용상 Figma Make를 이용해 실제 개발에 들어가기 전에 새로운 기능을 프로토타이핑하고, 사용자 및 내부 팀의 반응을 확인하는 사례로 이어지는 구성이다. 실무적으로는 복잡하거나 합의가 어려운 요구사항일수록 설명만 반복하기보다 Figma Make로 빠르게 작동하는 형태를 만들어 공유하는 것이 효과적이다. 단, 제공된 본문이 중간에 생략되어 있어 나머지 두 가지 활용 방식에 대한 상세 요약은 포함하지 않았다.

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

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

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

figma3분 읽기큐레이션 요약

워크플로우 랩: Figma의

Trivet 팀은 추천 프로그램의 클릭과 가입을 늘리기 위해 기존 배너를 모달, 인피드 카드, 전체 화면 오버레이로 확장해 비교한다. 각 방향은 노출 강도뿐 아니라 이미지 처리와 시각적 톤을 다르게 설계하며, Figma의 AI 이미지 편집과 벡터화 기능을 활용해 빠르게 실험한다. 핵심 결론은 레이아웃을 만드는 데 그치지 않고, 사용자의 관심을 얼마나 끌면서도 경험을 방해하지 않을지 시각적 긴장감과 전환율을 함께 검증해야 한다는 것이다. ## 문제 정의: 더 많은 관심과 덜한 방해 사이 - Trivet의 추천 프로그램 배너는 기대만큼 클릭과 가입을 유도하지 못했다. - 팀은 배너가 너무 눈에 띄지 않는지, 반대로 팝업이 사용자 흐름을 지나치게 방해하는지 검토한다. - 세 가지 UX 방향을 비교한다. - **모달**: 사용자의 흐름을 잠시 중단시키는 방식 - **인피드 카드**: 피드 안에 자연스럽게 통합되는 방식 - **전체 화면 오버레이**: 가장 높은 가시성을 제공하는 방식 - 목표는 관심도를 높이되 사용자 경험을 훼손하지 않는 것이다. ## 방향 1: 유리 효과로 호기심 유발 - Trivet 디자인 시스템의 레시피 행 컴포넌트를 기반으로 몰입감 있는 모달을 구성한다. - “독점 레시피 잠금 해제”라는 문구에 맞춰, 레시피 이미지를 완전히 보여주지 않고 살짝 흐리게 처리한다. - Figma의 다음 효과를 사용한다. - **Glass 효과**: 반투명하고 서리 낀 표면 표현 - **Refraction**: 깊이감과 굴절감 추가 - **Progressive blur**: 가장자리를 부드럽게 흐림 처리 - 사용자가 보상을 바로 얻을 수는 없지만 눈앞에 있다는 느낌을 주어, 모달을 띄우는 불편함을 시각적 보상으로 상쇄한다. ## 방향 2: 인피드 카드에 개성 추가 - 사용자의 흐름을 끊지 않도록 추천 프로그램을 피드 내부 카드로 배치한다. - 제한된 공간에 맞춰 사진보다 가볍고 유연한 손그림 일러스트를 사용한다. - **Remove background**로 불필요한 배경을 제거한 뒤, **Vectorize**로 래스터 이미지를 편집 가능한 벡터로 변환한다. - 벡터화한 케이크 스케치를 다음과 같이 다듬는다. - Fill 패널의 변수 검색으로 브랜드 색상을 적용 - **Cut tool**로 경계를 정리하면서 기존 패스를 유지 - **Bounding box**를 활용해 앵커 포인트를 회전하고 세부 형태를 조정 - 결과적으로 손그림의 질감은 유지하면서도 색상과 크기를 자유롭게 조절할 수 있는 재사용 가능한 브랜드 자산을 만든다. ## 방향 3: 전체 화면 오버레이로 우선순위 강조 - 전체 화면 오버레이는 사용자 경험을 명확하게 중단시키며 추천 프로그램의 중요도를 강하게 전달한다. - 넓은 화면을 채우려면 사진 자체가 충분히 강한 시각적 존재감을 가져야 한다. - 선택한 사진은 품질은 좋았지만 레이아웃 비율이 맞지 않았고, 숟가락이 음식보다 눈에 띄는 문제가 있었다. - 대체 이미지를 찾거나 레이아웃을 억지로 조정하는 대신, Figma의 정밀 이미지 편집 기능으로 이미지를 디자인에 맞게 수정한다. - **Erase object**로 시선을 분산시키는 요소 제거 - **Expand image**로 필요한 비율과 구도에 맞게 이미지 확장 - 이 방식은 이미지 소스를 다시 찾는 시간을 줄이고, 디자인 의도에 맞춰 기존 자산을 즉시 변형할 수 있게 한다. ## 도구와 팀을 연결하는 워크플로 - 이 워크플로는 Figma Design, Figma Make, FigJam을 함께 사용한다. - 디자이너, 콘텐츠 디자이너, 제품 관리자, 성장 분석가, 엔지니어가 같은 문제를 중심으로 협업한다. - 이미지 편집, 벡터화, 변수 적용, 프로토타이핑을 별도 도구로 분리하지 않고 하나의 흐름에서 연결한다. - 아이디어를 시각화한 뒤 인터랙티브 프로토타입으로 검토하고, 팀 피드백과 실험 결과를 바탕으로 빠르게 완성하는 접근을 보여준다. 추천 프로그램처럼 전환율이 중요한 UI에서는 하나의 시안을 정답으로 가정하기보다, 노출 강도가 다른 여러 방향을 동시에 설계하는 것이 효과적이다. 특히 Figma의 이미지 편집·벡터화 기능을 활용하면 기존 자산을 재사용하면서도 모달, 카드, 오버레이에 맞는 시각적 변형을 빠르게 검증할 수 있다.

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

웹뷰 엔지니어를 위한 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 업데이트 등 변화하는 환경에 맞춰 지속적으로 해결책을 고도화해 나가는 자세가 중요합니다.

discord원문

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

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