에드스튜디오
UX는 ‘누구나 할 수 있게’ 만드는 게 아니라 ‘실수해도 괜찮게’ 만드는 일이다
완벽한 사용자는 없어. 누구나 실수할 수 있고, 생각대로 안 될 수도 있어.
그래서 UX는 실수 자체를 막는 게 아니라,
실수해도 괜찮게 설계하는 게 핵심이야.
실무에서 꼭 필요한 예시
– 입력 실수 시 자동 포맷팅 (ex. 전화번호, 카드번호 등)
– 삭제 버튼 누르면 바로 삭제 → 되돌리기(Undo) 기능 제공
– 회원가입 중 뒤로 가도 입력 내용 유지
– 에러 메시지는 “뭐가 잘못됐는지 + 어떻게 해결할 수 있는지”까지 설명
디자인이 사용자에게 관용을 베풀수록, 그 경험은 더 친절하고 매끄럽게 느껴져.
UX는 ‘잘 쓰는 사람’을 위한 게 아니라, ‘실수한 사람’도 배려하는 기술이야.
에드스튜디오
많은 디자이너가 클릭을 유도하는 데 집중해.
하지만 진짜 중요한 건 “왜 클릭하지 않았는지”를 먼저 파악하는 거야.
사용자가 버튼 앞에서 머뭇거리는 이유는 다양해.
지금 클릭하면 무슨 일이 벌어지는지 몰라서
아직 결정이 안 나서
뭔가 찜찜해서
이럴 땐 클릭을 유도하기 전에 머뭇거림을 줄이는 설계가 먼저야.
실무에서 자주 쓰는 방법
“왜 이걸 눌러야 하는지” 간단하게 설명 추가
CTA 주변에 신뢰를 주는 정보 배치 (리뷰, 수치 등)
버튼 안 텍스트도 행동 + 보상 형태로 쓰기 (“3초 만에 시작하기” 등)
클릭은 결과야. 머뭇거림을 줄여야 클릭은 자연스럽게 따라와.
에드스튜디오
[유저는 모든 콘텐츠를 읽지 않는다. 유저를 읽게 하려면?]
사용자는 페이지를 ‘정독’하지 않아. 훑어보고, 눈에 띄는 것만 클릭해.
그렇기 때문에 ‘잘 쓴 글’보다 ‘잘 보여지는 글’을 먼저 만들어야 해.
첫 줄은 결론부터 → “왜 봐야 하는지”를 먼저 알려줘
1문단 2~3줄 넘기지 말기
리스트화 / 강조 텍스트로 시각적 리듬 만들기
모바일 기준으로 테스트하기
시선이 멈추는 포인트에 이미지나 아이콘 배치
중요한 건 ‘정보’보다 그 정보를 어떻게 보여주느냐야.
더 많은 UIUX 디자인 아티클을 읽고 싶다면?
https://blog.naver.com/edstudio-agency
에드스튜디오 블로그에서!
에드스튜디오
요즘 서비스 디자인 보면 고딕 계열 중에서도
유독 Pretendard를 많이 쓰는 걸 볼 수 있어.
그 이유는 단순히 “예쁘니까”가 아니야.
1️⃣ 시스템 폰트와 유사한 구조
→ Noto Sans나 Apple San Francisco와 비슷해서 iOS/안드로이드 양쪽에서 자연스럽게 어울려.
2️⃣ 라인 높이(line-height)가 안정적
→ 줄 간격 튐 없이, 리스트/카드 UI에도 깔끔하게 잘 맞음
3️⃣ 레벨 구분이 쉬움
→ 굵기(Weight) 단계가 다양해서 타이틀, 본문, 캡션까지 명확한 위계 설정이 가능해.
4️⃣ 웹에서도 렌더링 안정성 높음
→ 크로스 브라우저에서도 흐트러지지 않음. (디자이너+퍼블리셔 모두가 좋아함)
Pretendard는 ‘유행’이라기보다 실무에서 가장 덜 트러블 나는 선택지야.
더 많은 UIUX 디자인 아티클을 읽고 싶다면?
https://blog.naver.com/edstudio-agency
에드스튜디오 블로그에서!
에드스튜디오
디자인은 그리드, 픽셀, 수치로 맞췄다고 끝이 아니야.
정확한 정렬보다 중요한 건
사용자의 눈에 ‘편안하게 보이는 것’이야.
예를 들어
원형 아이콘은 수치상 가운데 정렬돼도 시각적으로 아래로 쳐져 보이는 경우가 있어.
텍스트와 아이콘 간 여백이 같아도 무게감에 따라 달라 보일 수 있어.
그래서 실무에선 이런 걸 “옵티컬 밸런스(Optical Balance)”라고 불러.
눈으로 조절하는 미세한 여백과 위치 보정이 필요하다는 뜻이야.
완벽한 숫자보다,
사람 눈이 자연스럽다고 느끼는 정렬이 더 강력해.
디자인 툴이 알려주지 않는 그 1~2px,
그게 진짜 실력에서 나오는 감각이야.
더 많은 UIUX 디자인 아티클을 읽고 싶다면?
https://blog.naver.com/edstudio-agency
에드스튜디오 블로그에서!
에드스튜디오
[그림자, 테두리, 배경… 어디까지 써야 과하지 않을까?]
버튼이 너무 밋밋해서 그림자를 넣고,
잘 안 보인다고 테두리도 주고,
분리하려고 배경도 깔고…
하나하나 보면 이유 있어 보여도,
결과는 과한 시각적 요소의 충돌이야.
📌 이런 문제가 생겨👇
1️⃣ 시선이 분산되고
2️⃣ 중요한 정보가 묻히고
3️⃣ 전체 UI가 ‘무거운’ 느낌이 들어
💡 실무 기준 팁:
기본 우선순위는 “배경 → 그림자 → 테두리” 순
세 가지 모두 쓰고 있다면, 최소 하나는 빼는 게 낫다
그림자와 테두리를 같이 쓰면 대비가 강해지니 톤을 낮추거나 블러를 줄이자
👉 시각적 효과는 구분을 위한 수단이지, 장식이 아니야.
“잘 보이게” 만들고 싶을수록, 덜어내는 게 정답일 때가 많아.
에드스튜디오
로딩 중일 때 아무것도 안 보여주면,
사용자는 “멈춘 건가?” 하고 의심하게 돼.
그래서 보통 스피너나 스켈레톤을 쓰는데,
두 방식은 완전히 다른 상황에서 써야 해.
📌 스피너 (로딩 애니메이션)
👉 단순 처리 중, 로딩 시간 짧을 때
예: 로그인 요청, 버튼 클릭 후 서버 응답 대기
→ 사용자에게 ‘잠깐 기다려주세요’를 명확히 전달
📌 스켈레톤 (뼈대 UI)
👉 목록, 카드, 콘텐츠 구조가 명확할 때
예: 뉴스 피드, 쇼핑 리스트, 게시판
→ 전체 레이아웃을 먼저 보여주고,
데이터만 나중에 채워져도 사용자는 더 안정감을 느껴
스피너는 상태를 알려주고, 스켈레톤은 구조를 보여준다.
UX 관점에선 스켈레톤이 체감 대기 시간을 훨씬 줄여줘!
더 많은 UIUX 디자인 아티클을 읽고 싶다면?
https://blog.naver.com/edstudio-agency
에드스튜디오 블로그에서!
에드스튜디오
[사용자 행동에 따라 바뀌는 ‘상태(state)’까지 설계해야 진짜 UX]
UI는 보이는 게 전부가 아니야. 사용자 행동에 따라 바뀌는 ‘상태(state)’까지 설계해야 진짜 UX야.
예를 들어 버튼 하나에도 최소 4가지 상태가 있어.
📌 버튼의 기본 상태값
1️⃣ 기본(Default) – 평소 모습
2️⃣ 호버(Hover) – 마우스 올렸을 때
3️⃣ 액티브(Pressed) – 클릭 순간
4️⃣ 비활성(Disabled) – 조건 미충족 시
(+ 추가로 로딩, 선택됨, 오류 상태 등도 고려 가능)
이건 버튼만의 이야기가 아니야.
입력창, 카드, 리스트, 모달, 토글 등 모든 컴포넌트는 상태값이 존재해.
👉 상태값 없이 만드는 컴포넌트는 디자인이 아니라 이미지일 뿐이야.
꼭! 인터랙션 흐름 속에서 모든 상태를 체크해보자.
에드스튜디오
[모든 페이지는 ‘첫인상’이다, 실무에서 자주 놓치는 UX 실수]
사용자는 항상 ‘홈’부터 시작하지 않아.
검색, 광고, 공유된 링크를 통해 중간 페이지나
상세 페이지부터 진입하는 경우가 훨씬 많아.
근데 많은 서비스가 이런 페이지에선 브랜드 정보도 없고,
내가 지금 뭘 보고 있는지도 불명확하게 설계돼 있어.
그래서 모든 페이지엔
✔ 브랜드를 인지할 수 있는 시각 요소
✔ 현재 위치를 알 수 있는 구조
✔ 다음 행동(CTA, 네비게이션) 유도가 꼭 필요해.
지금 내가 만든 상세 페이지, 처음 들어온 사람도 길을 잃지 않게 설계되어 있을까? 다시 한번 확인해봐
에드스튜디오
사용자에게 선택지를 많이 주는 건 친절해 보이지만,
사실은 그게 가장 비효율적인 UX일 수 있어.
우린 이걸 ‘선택 과부하(Choice Overload)’라고 불러.
선택지가 많을수록 결정은 더 어려워지고, 피로감은 커지거든.
예를 들어 배달 앱에서 30개의 메뉴가 한꺼번에 보이면,
무엇을 골라야 할지 막막해져.
‘내가 뭘 좋아했더라…’, ‘이건 또 뭐야?’
결국 아무것도 못 고르고 앱을 닫아버리는 일이 생기지.
이럴 때, “이 메뉴가 인기 많아요!”, “최근 주문이 많았어요!” 같은
‘가벼운 추천 한 마디’가 결정을 엄청 쉽게 만들어줘.
추천은 단지 옵션을 보여주는 게 아니라,
사용자가 망설임 없이 행동하도록 돕는 UX 장치야.
넷플릭스도, 유튜브도 첫 화면에 수백 개 콘텐츠를 보여주지 않아.
사용자가 좋아할 만한 몇 가지를 먼저 보여주는 게 핵심이지.
결국, UX 디자이너의 역할은 ‘선택지를 많이 주는 사람’이 아니라,
‘결정하기 쉽게 정리해주는 사람’이어야 해.
선택지가 많을수록, 추천이 더 중요해지니까 지금 당신의 서비스는
사용자를 선택 과부하 앞에 세워두고 있진 않은지, 한 번 점검해보자.
