에드스튜디오
[디자인 시스템은 ‘자유’가 아니라 ‘일관된 기준’]
실무에서 디자인 시스템의 중요성을 알고
제대로 사용할 줄 아는 디자이너인지에 따라
이 사람이 프로인지 아닌지 알 수 있다고 생각해
디자인 시스템이 없으면 빠르고 뭔가 더 자유롭게 만들 수 있을 거라 생각하기 쉽지만
디자인 시스템은 빠르고 일관되게, 공동으로 작업해야하는 실무에서는
‘어떻게 만들어야 할지’ 매번 고민하지 않도록 도와주는 일관된 기준이자 공통의 언어야.
버튼, 폰트, 여백, 인터랙션처럼 기본 요소가 정리돼 있으면
새로운 화면도 빠르고 안정적으로 만들 수 있어.
혼자 작업할 땐 큰 차이를 못 느낄 수도 있지만, 팀으로 작업하면 이야기가 달라져.
디자이너 3명만 참여해도 디자인 시스템이 없으면 스타일이 제각각인 화면이 나오게 돼.
디자인 시스템은 창의력을 제한하는 게 아니라, 창의력을 더 ‘전달력 있게’ 분배하는 도구야.
에드스튜디오
[터치 영역은 생각보다 커야 한다]
터치 영역을 설정하는 디자이너가 프로와 아마추어의 차이라고 생각해
신입 디자이너들이나 학생들 강의를 하다보면
눈에 보이는것만 디자인이라고 생각하는 경우가 많더라고
디자인은 예쁜데, 버튼이 너무 작거나 간격 없이 붙어 있다면 사용자는 자꾸 실수해.
특히 모바일에선 마우스 커서가 아니라 ‘손가락’으로 조작하기 때문에
정확도가 훨씬 떨어질 수밖에 없어.
그래서 애플과 구글 모두
터치 영역은 최소 48px,아이콘의 크기는 24px로 설정해야
화면을 터치했을 때 오류가 덜 생기거든
생각보다 터치 영역이 클 수 있어 눈에 보이는 버튼만 키우는 게 아니라,
‘터치 가능한 범위’를 키우는 게 핵심이야.
오늘 만든 버튼, 보기에는 괜찮은데 누르긴 불편하지 않나?
사용자의 손가락부터 먼저 떠올려보자!
에드스튜디오
[폼 디자인은 사용자 인내심과의 싸움]
회원가입, 신청서, 결제폼 입력창이 많을수록 사용자는 점점 지쳐가.
특히 한 화면에 너무 많은 필드를 보여주면 중간에 포기할 확률도 높아져.
그래서 좋은 폼은 중요한 정보만 우선 보여주고
여러 단계를 나눠서 부담을 줄여줘.
진행률을 보여주는 프로그레스바나 입력 완료 시 피드백도 작은 디테일이지만 효과는 커.
오늘 만든 폼, 한 번에 다 채워야 하는 구조라면 사용자 인내심도 함께 테스트 중일지 몰라!
에드스튜디오
[고객의 말대로 만들지 말고, 고객의 목표대로 만들어라]
클라이언트가 “버튼을 크게 해주세요”라고 말했을 때, 정말 ‘크기’가 문제일까?
이럴 땐 말 뒤에 숨겨진 목적을 먼저 파악해야 해.
“눈에 잘 안 띄어요” “사용자가 잘 안 눌러요” 이런 게 진짜 이유일 수 있어.
그럴땐 이렇게 접근해야 해:
– 고객 요청은 바로 수정하지 말고, “왜 그렇게 말씀하셨나요?”를 먼저 물어보기
– 기능, 목표, 사용자의 행동 흐름을 기준으로 판단하기
– 때로는 ‘디자인 피드백’이 아니라, ‘비즈니스 피드백’일 수도 있음
고객의 말은 참고자료고, 디자이너의 역할은 문제의 본질을 찾아내는 것. 말을 그대로 반영하는 건 쉬워.
하지만 ‘목표를 반영하는 디자인’이 진짜 전문가야.
에드스튜디오
[모바일에서 버튼 크기는 몇 px이 적당할까?]
버튼이 작다고 UX가 깔끔해지는 건 아니야. 모바일에선 정확히 눌릴 수 있는 크기가 더 중요해.
실무에서 가장 많이 참고하는 기준
- Apple HIG, Google Material 모두 최소 44px~48px 터치 영역 권장
- 손가락 평균 터치 면적이 약 10~12mm → 디지털로 환산 시 약 44px
- 아이콘 버튼이나 텍스트 버튼도 시각 크기와 별개로 터치 영역은 확보해야 함
💡 자주 하는 실수
- 버튼 텍스트는 크지만 padding이 적어 실제 클릭 영역이 작을 때
- 버튼끼리 너무 가까워서 잘못 누를 확률이 높을 때
👉 그래서 실무 기준 정리하면:
- 버튼 높이: 44~48px 이상 (권장)
- 버튼 간 간격: 최소 8px
- 버튼 안 텍스트 크기: 14~16px이 가장 안정적
모바일 UI에선 ‘보기 좋음’보다 ‘눌리기 쉬움’이 먼저 설계돼야 해.
에드스튜디오
[폼 디자인은 사용자 인내심과의 싸움]
회원가입, 신청서, 결제폼 입력창이 많을수록 사용자는 점점 지쳐가.
특히 한 화면에 너무 많은 필드를 보여주면 중간에 포기할 확률도 높아져.
그래서 좋은 폼은 중요한 정보만 우선 보여주고
여러 단계를 나눠서 부담을 줄여줘.
진행률을 보여주는 프로그레스바나 입력 완료 시 피드백도 작은 디테일이지만 효과는 커.
에드스튜디오
[좋은 UX는 익숙한 UX, ‘제이콥의 법칙’]
사용자는 네 서비스만 쓰지 않아. 평소 익숙한 다른 서비스에서 경험한 방식으로 네 서비스도 작동할 거라 기대하지.
이게 바로 ‘제이콥의 법칙(Jakob’s Law)’ 이야. 예를 들어, 사람들이 대부분 왼쪽 위에서 로고를 찾고, 오른쪽 위에 메뉴 버튼을 기대하는 이유는 이미 수많은 서비스에서 그렇게 써왔기 때문이야.
새로운 걸 시도하는 건 좋지만, 너무 독특한 UI는 사용자를 당황하게 만들 수 있어. 사용자의 기존 경험과 기대를 잘 활용해야
진짜 좋은 UX가 탄생해. 오늘 디자인한 화면, 사용자가 이미 익숙한 방식과 얼마나 비슷한지 체크해보자!
에드스튜디오
안녕하세요. 디스콰이엇에 첫 글을 남깁니다.
저는 UX/UI 디자인 에이전시 에드스튜디오를 운영하고 있는 대표입니다.
2019년부터 에이전시를 시작해 지금까지 삼성전자, LG, 사람인, 교육부 등과 함께
총 250개 이상의 IT 프로덕트를 함께 만들어왔습니다.
현재 크몽에서는 UX/UI 카테고리 상위 2% 프라임 멤버이자, 유일한 품질보장 전문가로 활동 중이며,
위시켓에서는 상위 0.1% 프라임 전문가로 선정되어 활동하고 있습니다.
앞으로 이 공간을 통해 디자인 에이전시를 운영하며 겪은 경험,
대기업 및 스타트업과의 협업에서 얻은 인사이트,
그리고 실무에 바로 적용할 수 있는 UI/UX 디자인 팁들을 나눠보고자 합니다.
많은 관심과 응원 부탁드립니다. 감사합니다.
에드스튜디오
안녕하세요.
6년차 디자인 스튜디오를 운영하고 있는 디자이너입니다.
디스콰이엇 멤버들을 대상으로 무료로
로고 디자인이나 홈페이지를 제작해드리려 합니다.
모든 제작 과정에서 드는 비용은 0원이며,
제가 단 1원이라도 요청드릴 경우 고소하셔도 좋습니다.
괜찮으시다면, 결과물을 저희 스튜디오의 포트폴리오로 활용할 수 있도록
허락해주시면 감사하겠습니다.
아래 링크를 통해 신청해주세요. 많은 관심 부탁드립니다!
👉 크몽 링크 바로가기
감사합니다! 🌟