반응형

UX/UI 8

[UX] 피츠의 법칙: CTA를 유도하는 모바일 UX 디자인의 과학적 설계

외면받는 버튼이 생기는 이유훌륭한 UI 디자이너는 단순히 '예쁜 버튼'을 만드는 사람이 아닙니다. 사용자가 가장 적은 에너지를 들여 원하는 목적지에 도달하게 만드는 '설계자'입니다. 혹시, UX를 설계하면서 아래 경험을 해 본적이 있으신가요? 1. 공들여 만든 '구매하기' 버튼의 클릭률이 저조해 고민해 본 적 2. 사용자가 특정 메뉴를 찾는 데 너무 오래 걸린다는 피드백을 받아 본 적 이 두 가지의 경험이 있으시다면, 피츠의 법칙을 꼭 적용해 보세요.오늘 포스팅에서는 인간의 물리적 움직임을 데이터로 증명한 이 법칙이 어떻게 모바일 인터페이스의 표준이 되었는지 깊이 있게 파헤쳐 보겠습니다.피츠의 법칙? 수학적 근거목표 지점까지의 거리와 크기가 도달 시간에 미치는 영향을 설명하는 UI/UX 및 인간공학의 ..

UX 2026.03.09

[UX] 감이 아닌 데이터로 설득하기: A/B 테스트 가설 설정 제대로 하는 방법

기획자로서 가장 곤혹스러운 순간은 공들여 준비한 기획안이 주관적인 판단에 의해 부정당할 때입니다. "내 생각엔 이 버튼이 더 잘 보일 것 같은데?"라는 모호한 피드백에 맞설 수 있는 유일한 방법은 무엇일까요? 바로 데이터입니다. A/B 테스트는 단순히 두 가지 시안 중 하나를 고르는 과정이 아닙니다. 우리가 세운 UX 가설이 실제 유저의 행동으로 어떻게 이어지는지 증명하는 과학적인 실험입니다. 오늘은 실무에서 즉시 활용할 수 있는 A/B 테스트 설계 로직과 지표 분석 방법을 다뤄보겠습니다.A/B 테스트의 핵심, 가설 설정과 변수 통제하버드 비즈니스 리뷰의 연구에 따르면, 데이터 기반의 실험 문화를 가진 기업은 그렇지 않은 기업보다 사용자 경험 개선 속도가 평균 2.5배 빠릅니다. 성공적인 실험을 위해서는..

UX 2026.02.12

Figma AI 'Make Design' 완벽 가이드: UX/UI 포트폴리오 프롬프트 공유

거두절미하고 시작하겠습니다... 💡프롬프트 입력 저 같은 경우는 구글 번역기를 이용해서 프롬포트를 입력하는 편입니다. 옛날에는 구글 번역기가 조금 어색한 부분이 많았는데, 지금은 한 > 영 / 영 > 한 검수했을 때 딱히 어색한 부분이 없어서 번역해 준 걸 바로 프롬프트 창에 입력하곤 합니다 💡랜딩 페이지 활용 프롬포트I don't like the colors on the main page. Ignore the prompts so far and come up with a layout that suits a product designer. The layouts should be consistent and consistent, and the design concept should be vibrant, ..

UI 2026.01.29

Figma AI 'Make Design' 완벽 가이드: UX/UI 포트폴리오 프롬프트 깎는 법

여러분, 오래 전에 Figma에서도 Ai 기능을 도입했던 사실... 이제 코딩을 하나도 모르는 웹 디자이너도, 포폴 레이아웃 자체가 막막했던 취준러도, 웹 포폴을 위한 레이아웃 구성을 고민 중인 현직 디자이너의 마음을 한 방에 사로잡을 기능이 나왔다는 거, 알고 계셨나요? 간단한 프롬프트를 공유합니다!Figma Make?Figma Make는 텍스트 프롬프트나 기존 이미지를 기반으로 편집 가능한 고해상도 디자인 레이아웃을 생성해 주는 AI 기능입니다.핵심 가치: "First Draft"를 단 몇 초 만에 만들어 디자이너의 '백지 공포증'을 해소해 줍니다.특이점: 단순 이미지가 아니라 피그마의 레이어 구조, 오토 레이아웃(Auto Layout)이 적용된 상태로 결과물을 주기 때문에 수정이 매우 용이합니다.프..

UI 2026.01.27

내 페르소나, 소설이 되지 않는 방법! 데이터 기반의 UX 페르소나 설계

나... 소설 쓰고 있었다페르소나를 작성하다 보면 점점 함정에 빠져서 뇌피셜로 작성하게 되는 과정이 있죠.... 분명 타깃은 명확한데, 이 타깃의 행동이 정확하게 예측되지 않아 가정해서 쓰다 보면, 우리가 한 리서치가 물거품이 되어 버립니다. 저도 대학 때 종종 페르소나를 의무적으로 제작해 왔는데, 실무에서는 사실 그렇게 많이 쓰이지 않아서 포스팅을 할까 말까 고민하다가, 그래도... 주니어 PM 및 대학생 여러분들께 도움이 되고자(?) 포스팅을 시작하게 되었습니다. 페르소나를 작성하는 이유는 하나입니다.길 잃지 말라고! 페르소나는 네비라고! 이렇게 서비스의 핵심 가치를 정하고 수많은 일을 쳐내기 바쁠 때, 방황을 도와주는 페르소나에 대해 이야기해 보려 합니다.페르소나란 무엇인가?현대 UX의 아버지 앨런..

UX 2026.01.25

뇌는 완성을 갈망한다: 자이가르닉 효과와 미완의 설계

트레일러가 때로 본편보다 흥미로운 이유일회용 서비스에서 탈피하기 위한 아주 좋은 방법은 '미완성된 기억' 의외로 핵심 이유일 수도 있습니다.예를 들어서 트레일러가 너무 흥미진진해서 기대될 때 우리는 미완성의 기억이라고 부르는데요. 심리학자 블루마 자이가르닉(Bluma Zeigarnik)은 인간이 완료된 일보다 중단되거나 미완성된 일을 훨씬 더 강력하게 기억한다는 사실을 발견했습니다. PM의 시선으로 볼 때, 2026년의 기획자는 이 심리를 이용해 사용자가 앱을 다시 켜게 만드는 강력한 연결고리를 설계해야 합니다. 단순히 "친절한 서비스"를 넘어 "자꾸 생각나는 서비스"를 만드는 법, 지금 바로바로 공개합니다.자이가르닉 효과(Zeigarnik Effect)—미완성이 주는 긴장감UX Collective의 최..

UX 2026.01.20

쇼핑몰 UI 디자인: 상품 상세페이지 이미지 확대(Zoom) 인터랙션 구현 가이드

안녕하세요? 제 프로토타입 시리즈는 지식이 떨어지기 전까지 끝나지 않을 것입니다...저번 게시글에서는 포폴용? 으로 원형이 돌아가는 프로토타입을 구현했다면, 오늘은 상품 상세 페이지에서 클릭하면, 그 부분만 ZOOM 되어서 나타나고 다시 클릭하면 원래대로 돌아가는 모션을 소개해 드릴 텐데요~ 아무래도 e커머스에 재직 중이신 디자이너나 PM 분들이 보시면 조금 더 유용할 것 같습니다 ㅣ스핀 프로토타입 복습은 접은 글을 펴 주세요더보기https://2-zip.tistory.com/22💡메인, 상세 프레임 준비 상품의 상세 페이지에서 ZOOM이 되는 거다 보니까, 아무래도 확대하고 싶은 곳 각자의 프레임과 메인 화면 2개가 필요합니다사실 드래그를하여 다른 이미지를 보여 주지 않을 거라면, 튜토리얼 1번째 ..

UI 2026.01.16

UX , 니가 쉬웠잖아? 나 소개글 이딴 것 안 썼어

ㅣUX, 니 뭐고?요즈음 분위기는 그런 것 같다. "UX 모르는 사람 손 들어." 라고 하면 아무도 손을 들지 않는 그런 뻘쭘한 상황이 펼쳐질 게 뻔히 예상될 정도로 대부분의 산업군에서 좋은 User Experience(사용자 경험)를 제공하기 위해 수많은 연구와 투자를 이어나가고 있죠. UX는 단순히 예쁜 디자인을 넘어서 사용자가 제품이나 서비스를 이용할 때 얻는 전체적인 경험을 의미합니다. 만약 웹 사이트나 앱을 이용할 시 오~ 좋은데? 싶었다면, 당신은 그 UX를 꽤 흡족해하고 있다는 증거이고, 꾸준히 이용하게 될 것입니다. 따라서 UX 설계는 아래와 같이 여러 가지로 정의될 수 있습니다.더보기1. 사용자 중심의 관점에서 제품이나 서비스의 전반적인 경험을 설계2. 사용자의 니즈와 행동을 깊이 있게 ..

UX 2024.05.20