본문 바로가기

UX디자인10

예쁘면 더 잘 쓴다? Aesthetic-Usability Effect로 보는 UX 디자인 법칙 사용성이 부족해도 계속 쓰는 앱이 있다?어떤 앱은 조금 불편해도 자꾸 쓰게 되고, 어떤 앱은 기능이 좋아 보여도 이상하게 손이 안 가는 경우가 있죠.그 이유는 '디자인이 주는 첫인상'이 사용성에 대한 인식까지 바꿔버릴 수 있기 때문입니다.UX 심리학에서는 이를 Aesthetic-Usability Effect라고 부릅니다.Aesthetic-Usability Effect란?이 효과는 1995년, 일본 히타치 디자인 센터(Hitachi Design Center)에서 진행한 연구에서 비롯됐어요.연구진은 ATM 사용자 인터페이스(UI)의 26가지 버전을 만들고, 252명의 참가자에게 각 디자인이 얼마나 사용하기 쉬운지(사용성)와 얼마나 보기 좋은지(심미성)를 평가해달라고 요청했어요.그 결과, UI가 실제로 얼마나.. 2025. 5. 20.
UX 화면설계서 템플릿의 구성 및 작성 요령 (기본정보, 와이어프레임, 설명) 앱이나 웹 서비스를 만들 때, 기획자의 머릿속에 있는 아이디어를 디자이너, 개발자 등 실무자들이 똑같이 구현하기란 쉽지 않습니다.이럴 때 필요한 것이 바로 UX 화면설계서인데요. 기획 의도를 명확하게 정리하고, 디자이너·개발자·QA 등과 원활하게 소통하기 위해 꼭 필요한 핵심 문서입니다.이번 글에서는 기획자의 의도를 실제로 구현하기 위한 화면설계서를 어떻게 만들면 좋을지 그 구조와 작성 요령을 함께 알아보겠습니다. 화면설계서의 개념화면설계서는 앱/웹 서비스의 각 화면이 어떻게 구성되어야 하는지 문서화한 자료로, 기획자가 의도한 기능과 흐름을 명확하게 전달하기 위한 산출물입니다.보통 와이어프레임과 함께 조건, 기능, 정책 설명이 포함되어 있어 유관 부서와의 커뮤니케이션에 기준점을 제공해 줍니다. 역할PM,.. 2025. 4. 23.
[UX 스터디] 계좌번호 복사-붙여넣기 UI with 토스/카카오뱅크 계좌이체할 때, 계좌번호를 다 외우시는 편인가요?저는 매번 못 외워서 복사+붙여넣기 기능을 사용하곤 합니다.그런데 이렇게 자주 쓰는 ‘계좌번호 복사 + 붙여넣기’ 기능의 UI가 어떻게 구성되어 있는지는 한 번도 주의 깊게 본 적이 없더라구요. 그래서 이번 글에서는 이 기능이 실제로 어떤 흐름과 구조로 이루어져 있는지 자세히 살펴보려고 합니다.[복사]와 [붙여넣기] 두 가지 부분으로 나누어 살펴볼게요. 1. 복사주로 계좌번호를 공유할 때 사용하는 카카오톡의 복사 기능을 살펴봤습니다.계좌번호가 적힌 말풍선을 꾸욱 눌렀을 때 : 여러 부가 기능이 나타남 → 복사 or 선택 복사계좌번호 숫자를 눌렀을 때 → 바텀시트가 나타남 → 복사 위의 두 가지 방법으로 계좌 번호를 복사할 수 있었습니다.다양한 부가기능이 함.. 2025. 4. 14.
[Figma] 피그마 오토 레이아웃(Auto Layout) 기능으로 버튼 디자인하기 오늘은 피그마의 대표 기능 중 하나인, Auto Layout을 활용하여 버튼을 만들어 보겠습니다.Auto Layout이란?Auto Layout은 요소들 사이의 간격, 정렬, 크기 조절 등을 자동으로 설정해주는 피그마의 기능입니다. 텍스트 길이가 바뀌어도 여백이 유지되고, 여러 요소를 묶어 정렬하거나 간격을 조절할 때 매우 유용합니다. 반복되는 UI 컴포넌트를 만들 때 시간을 절약하고 일관성을 유지할 수 있는 핵심 기능입니다. 기본 : 버튼 만들기아래와 같은 순서로 차근차근 따라하시면 30초 안에 버튼을 만들 수 있습니다.1. 텍스트 작성하기 [T] 버튼을 눌러 버튼명이 될 텍스트를 작성해 줍니다.2. 텍스트를 그룹으로 만들기[Group selection] 또는 [ctrl/command + G]를 눌러 방.. 2025. 4. 8.
[UX 스터디] 다양한 방식을 고려한 로그인 UI를 만들어보자 (소셜/계정/이메일) 로그인 화면은 우리 서비스가 사용자와 처음 만나는 관문입니다.이 단순한 화면이 서비스의 첫인상을 결정하고, 나아가 사용자와의 관계를 좌우하죠.로그인이 복잡하면 사용자는 불편함을 느끼고, 첫 만남에서부터 부정적인 인상을 받을 수 있습니다.반대로, 로그인이 지나치게 간편하면 보안에 대한 신뢰가 흔들릴 수도 있습니다.그렇다면, “안전하면서도 쉽고 간편한 로그인 경험”을 제공하려면 어떻게 해야 할까요?오늘은 로그인 화면을 구성하는 주요 요소와 레퍼런스를 살펴보고, 로그인 UI를 재구성해보겠습니다.🔐 로그인 화면의 구성 요소로그인 화면은 다음과 같은 세부 요소들로 구성되어 있습니다. 로그인 방식 ID(휴대폰번호/이메일)/PW 제공 시 → 입력 필드 소셜 로그인 제공 시 → 아이콘이 표기된 버튼.. 2025. 2. 18.
정보 구조 (IA : Information Architecture) 설계 방법 (초간단 ver) 좋은 사용자 경험을 만드는 성공의 열쇠는 정보 구조와 플로우에 있습니다.  정보 구조(Information Architecture)란?제품/서비스에 담고 있는 정보의 전체적인 구성을 의미합니다.주요 메뉴에는 무엇이 있고, 각 메뉴에서 접근 가능한 페이지는 무엇이며, 각 페이지와 연결되는 페이지는 무엇인지 등을 총망라하죠.건물을 설계할 때 몇층으로 지을지, 기둥을 어디에 세우고, 방을 몇개로 나눌지 결정하는 것과 같습니다.  플로우(Flow)란?정보 구조 속에서 사용자가 어떻게 이동하는지를 나타냅니다.다시 한번 건물을 예로 들면, 우리가 “현관문을 열고 들어와 신발을 벗고, 부엌에 열쇠를 내려놓고, 옷방으로 들어가 외투를 벗고, 거실로 나와 소파에 앉는 것”처럼 어떤 순서로, 어디에서, 어떤 기능을 사용하.. 2025. 2. 6.
글로벌 명상 앱 '헤드스페이스'의 UX 특징을 알아보자 세계 최고 부자 빌 게이츠가 사용하는 명상 앱으로 유명해진 헤드스페이스, 저도 유료 버전을 구독하며 애용하고 있습니다. 이 앱을 사용하다 보니 일반적인 앱들과는 색다른 경험을 제공하고 있다는 것을 느꼈어요.그래서 오늘은 ‘몸과 마음의 평안’을 목표로 하는 앱의 UX에는 어떤 다른 점이 있을까 살펴보는 시간을 마련했습니다.헤드스페이스란?정신 건강, 마음챙김, 명상 가이드로서, 전문가가 지도하는 명상, 정신 건강 코칭, 마음챙김 운동 등의 콘텐츠를 제공합니다.이러한 명상 세션과 호흡 가이드를 통해 스트레스를 줄이고, 숙면을 돕고, 정신 건강을 개선하는 데 도움을 주는 서비스입니다.※ 설치 링크 : 구글 / 애플 정보 구조화면을 살펴보기에 앞서, 헤드스페이스 앱의 정보가 어떤 구조를 이루고 있는지 살펴보겠습니.. 2025. 1. 1.
[UX 스터디] 모바일앱 '페이지'와 '팝업' 차이점이 뭘까? 모바일앱의 기본 요소인 “페이지”와 “팝업”그 차이점이 무엇인지, 언제 어떻게 사용해야 하는지 알고 계신가요?오늘은 이 두가지의 아리송한 개념을 파헤쳐 보겠습니다. 페이지란? 쉽게 말해 ‘바탕 화면’이라고 보시면 됩니다. 콘텐츠들을 모아서 보여주는 바탕이 되는 것이죠.모바일앱의 아주 기본적인 단위로서 독립적인 콘텐츠와 작업 영역을 제공합니다.주요 플로우에서 사용: 가입, 구매, 등록 등 여러 단계를 포함한 주요 기능을 페이지로 제공하는 것이 일반적입니다.내비게이션 : 페이지 상단 헤더에 타이틀과 ‘뒤로가기’ 버튼을 제공하여, 사용자가 현재 위치를 인식하고 다른 화면으로 돌아갈 수 있는 명확한 네비게이션을 제공합니다. 여러 단계가 있는 페이지인 경우 ‘다음’으로 이동할 수 있는 버튼이 하단에 배치되기도 합.. 2024. 12. 5.
[UX 스터디] 입력 필드 UI를 만들어 보자 (입력 전/중/후 상태를 고려하여) 입력 필드는 모바일 앱 또는 웹 서비스에서 가장 중요한 UI 요소 중 하나입니다.회원가입, 로그인, 본인인증에서부터 송금, 구매, 배송, 주식 매수/매도 등 다양한 거래를 처리하기 위해서, 사용자가 직접 특정한 값을 입력해줘야 합니다.ID는 무엇인지, 얼마를 보내고 싶은지, 주소지는 어디인지, 카드 번호는 무엇인지 등등이렇게 다양한 값을 적는 입력 필드를 만들기 위해서는 입력 전-중-후의 각 단계별로 고려해야 할 사항들이 있습니다. 저와 함께 하나씩 살펴봅시다.입력 전 (기본값) 입력 필드에 값이 입력되기 전 상태는 어떤 모습일까요?이 예시를 보시면 기본 상태에서의 입력 필드는 사용자에게 내가 앞으로 어떤 것들을 입력해야 하는지에 대한 힌트를 줍니다.순서대로 하나씩 보시면,레이블: 어떤 정보를 입력해야 .. 2024. 11. 25.
국내외 UX/UI 가이드라인 or 디자인 시스템 참고 사이트 여러분은 UX/UI 디자인을 하시다가 문득, 이런 궁금증이 드신 적 없으신가요? "이렇게 하는 게 맞나? 다른 사람들은 어떻게 했지? 정답이 있는걸까?" UX/UI 디자인에서 '정답'이라고 콕집어 말할 수 있는 것은 없지만, 여러 전문가들이 모여 정리한 가이드라인은 분명히 존재합니다. 디자인을 하다 미로에 빠졌을 때, 벽에 부딪혔을 때 이러한 가이드라인은 북극성처럼 길을 잡을 수 있게 해줍니다. 또한 다른 부서(기획, 개발, QA 등) 사람들이 "이렇게 디자인한 근거가 뭐야?" 물어봤을 때 당당하게 대답할 수 있는 근거가 되어주기도 하죠. 이번 포스트에서는 여러분의 UX/UI 디자인에 도움을 줄 수 있는 국내외의 대표적인 UX/UI 가이드라인 웹사이트를 소개해 드리겠습니다.  1. 플랫폼 제공자 기반 가.. 2024. 11. 15.
728x90
반응형