podium_nam0422

🔹 A: 증감 버튼 타입

• 장점:
  • 직관적이며 수량을 빠르게 조절할 수 있음.
  • 터치 기반 디바이스(모바일)에서 사용성이 좋음.
• 단점:
  • 원하는 수량까지 도달하려면 여러 번 클릭해야 함.

🔹 B: 드롭다운 선택 타입

• 장점:
  • 원하는 수량을 한 번에 정확하게 선택 가능.
  • 수량 범위가 클 경우 효율적임.
• 단점:
  • 한 번의 탭/클릭 후 리스트를 봐야 하는 단계가 많아짐.
  • 수량이 많은 경우 스크롤 필요.
    

    ---

    ✅ 개인적으로 추천
    • **A (버튼 타입)**은 UX 측면에서 더 직관적이고 상호작용이 명확해서 일반적인 음식 주문 UI에 적합합니다. 특히 사용자 반복 행동(수량 조정)이 많을 때 유리합니다.

업데이트 전(A)의 문제점

1. 시각적 계층 구조 부족
   • 채널 정보, 구독 버튼, 좋아요 등 주요 기능들이 동일한 시각적 레벨에 위치해 사용자 시선이 분산됨.
   • 텍스트 중심 UI로 콘텐츠 소비 흐름이 끊김.
2. 기능 밀집 및 혼잡도
   • 너무 많은 액션 버튼이 같은 위치에 있어서 정보 과부하(Information Overload) 발생.
3. 구독 버튼이 눈에 띄지 않음
   • 붉은색 강조는 있지만 다른 요소들과 너무 가까워 클릭 유도가 떨어짐

✅ 업데이트 후(B)의 개선 포인트

1. 정보 구조 단순화
   • 채널명과 구독 버튼을 한 줄로 묶고, 액션 버튼을 그 아래 배치해 시각적 흐름을 수직으로 정리.
   • 사용자 시선이 영상 제목 → 채널 정보 → 버튼 순서로 자연스럽게 이동하게 구성.
2. 버튼 아이콘 강조 + 여백 확대
   • 각 버튼에 더 넓은 터치 영역이 부여되어 모바일 사용성 향상.
   • 버튼 사이 간격이 넓어져 오작동 가능성도 줄어듦.
3. 구독 버튼의 강조 유지
   • 여전히 눈에 띄지만 더 정돈된 형태로 제공됨. 정보 위계 안에서 자연스럽게 주목됨.
4. 댓글 진입이 쉬워짐
   • 댓글 섹션이 더 가까이 배치되어 사용자 인터랙션 유도 강화.

결론

"주의 분산 최소화, 모바일 최적화, 터치 편의성 향상"이라는 명확한 UX 목적 하에 설계된 것으로 보임

• 인디케이터가 없는 A

사용자가 보았을 때 좌우 슬라이드 방식인지, 상하 슬라이드 방식인지 헷갈릴 수 있다.

오히려 심미성은 더 좋다.

• 인디케이터가 있는 B

슬라이드 버튼이 컨텐츠가 비슷한 컨텐츠가 있을 때 잘 보이지 않을 수 있다.

오히려 더 안정성이 있다.

인디케이터가 컨텐츠 요소를 방해하는 것 같다. 시각 위주의 컨텐츠라면 인디케이터 없으면 한다.

인디케이터가 있는 것이 더 직관적이다.

• 해결점

A안을 사용하되 사용자에게 좌우 슬라이드 방식이거나 상하 슬라이드 방식임을 표시해 주기

이미지 사이즈를 줄이거나 동그라미 하단 인디케이터를 넣어 조금 더 깔끔하게 좌우 슬라이드 방식임을 표시해 주기

아이콘만 있는 방식의 B

인디케이터를 숫자가 있는 쪽으로 옮김

• 한번 생각해 보기

사용자들에게 어떻게 하면 인디케이터가 방해되지 않게 컨텐츠를 보여줄까?

만약 캐러셀로 이미지를 보여준다면?

A안) 정보 중심의 단계별 안내 UI

A안은 텍스트 기반의 리스트형 경로 안내가 중심이다.

직선형 타임라인을 통해 각 단계가 시간순으로 시각화되어 있어 흐름을 파악하기 쉽다.

하단에는 도보 이동, 정류장, 승차 정보까지 자세히 나와 있어 초보 사용자에게 친절하다는 느낌을 주게 된다.

B안) 지도 중심의 시각적 경로 표시 UI

지도 중심의 시각적 안내가 강조된 UI.

출발지부터 도착지까지의 동선이 지도 위에 실시간 경로로 그려진다.

공간적으로 어디를 지나가는지 시각적으로 직관적으로 이해할 수 있다.

대중교통 아이콘과 색상 구분을 통해 전체 이동 흐름을 한눈에 파악할 수 있는 것이 특징이다.

하지만 오른손 사용자들은 상세 정보를 펼칠 때 불편함을 호소할 수 있다.

결론

• A안은 처음 가는 길이거나, 노선 정보가 중요한 경우에 유리하다. 특히 고령층이나 교통정보가 익숙하지 않은 사용자에게 친절하다.

• B안은 지도 위에서 시각적으로 빠르게 파악하고 싶은 사용자에게 적합하다. 지리적 위치 감각이 중요한 상황이나, 이미 노선을 어느 정도 알고 있는 사용자에게 유리하다.

UX관점에서 중요한 건, 사용자의 목적과 사용 맥락에 따라 다양한 UI를 유연하게 제공하는 것이다. 

상황에 따라 두 UI를 혼합하거나 전환 가능한 인터페이스를 제공하는 것도 좋은 전략이 될 것이다.

A안 : 일러스트 스타일의 아이콘

B안 : 실사형 사진 스타일

무려 10배 이상의 차이로 B 안이 압도적이다.

왜 이런 차이가 났을까?

A안의 장점

• 통일감 있는 디자인

동일한 스타일의 아이콘으로 전체적은 UI가 깔끔하다.

• 브랜드 이미지 구축에 유리하다.

브랜드 고유의 일러스트 스타일을 적용하면 개성과 차별화를 줄 수 있다.

• 가벼운 느낌

이미지 로딩 속도가 빠르고, 시각적으로 부담이 적어 캐주얼한 앱에 적합하다.

A안의 단점

• 구체성이 떨어진다.

어떤 상품을 파는지 한 눈에 파악하기 어려워짐, 사용자의 학습 비용이 늘어난다.

• 추상적 이미지에 대한 해석 차이

특히 연령대가 높거나 디지털 경험이 적은 사용자에겐 직관성이 떨어질 수 있다.

B안의 장점

• 직관적인 이해

어떤 제품군인지 이미지 한 장으로 바로 전달 가능, 고민 없이 클릭 유도 가능성이 높다.

•  구매 전환에 효과적

실물 제품의 질감, 분위기를 전달해 신뢰를 높이고 구매 욕구를 자극한다.

• 현실감

특히 실제 사용하는 장면을 활용하면 더욱 몰입감 있는 경험 제공이 될 것 같다.

B안의 단점

• 스타일 통일이 어렵다

사진마다 톤이나 배경이 달라 전체 UI의 일관성이 흐트러질 수 있다.

• 용량 증가

이미지 퀄리티를 높이면 그만큼 용량이 커져 로딩 속도나 성능 이슈가 발생할 수 있다.

결론 : 사람들의 '빠르게 이해하고, 직관적으로 상품을 찾고 싶은 욕구'가 반영된 결과로 해석됨

하지만 정체성이 강한 서비스, 혹은 기능 중심의 툴성 앱이라면 오히려 A안이 더 적합할 수도 있을 것 같다.

A : 정보 중심 설계

사용자에게 콘텐츠의 줄거리나 주요 내용을 미리 전달할 수 있다

내용 이해가 중요한 다큐멘터리나 시리즈물(드라마)에 적합하다

사용자 시나리오가 어느 정도 한정적이면서 안정되기 때문에 A 안이 선호될 것 같다.

B : 비주얼 중심 설계

썸네일 이미지로 간햑히 나열해 비주얼 중심으로 정보를 전달

사용자가 이미지를 보고 빠르게 회차를 탐색할 수 있게 함

예능이나 영화와 같은 콘텐츠에 어울림

결론 : 사용자의 행동을 유도하는 전략 중 어떤 방법이 좋은가?를 묻는 다면 

드라마, 다큐멘터리 같은 콘텐츠에는 A안을, 영화나 예능 같은 콘텐츠에는 B안을 선택하게 될 듯

신규 알림 뱃지 디자인 각 디자인에 어떤 의도가 담겨 있을까?

A의 의도

 • 사용자가 정확히 몇 개의 알람이 있는지 파악할 수 있도록 돕는다.

 • '9+'처럼 숫자 표현을 단순화해 인지 피로도를 낮추면서도 정보는 유지한다.

 • 사용자가 알림을 놓치지 않고 관리하도록 유도하여, 주의 환기에 효과적이다.

→ 메시지나 sns, 커뮤니티 알림 등 사용자의 참여나 응답이 필요한 서비스에 효과적이다.

알림 개수가 의미 있는 정보로 작용할 때 유용.

B의 의도

 • 알림이 있다는 사실만 인지시킨다. 부담을 줄이는 디자인

 • 숫자에 민감한 사용자에게 스트레스를 유발하기 않도록 배려한다.

 • 가벼운 소식이나 긴급하지 않은 알림을 표시할 때 적합하다.

→  SNS, 쇼핑 앱 등에서의 이벤트 소식이나 추천 콘텐츠 등에 적합하다.

알림의 개수보다 존재 자체가 중요할 때 사용되면 좋을 것 같다.

나의 생각

A 같은 경우 사용자에게 "빨리 확인하세요" 같은 느낌을 주는 기분이다.
반면 B 같은 경우 사용자에게 "알림은 왔지만 나중에 확인하셔도 돼요~"와 같은 느낌이 든다.

개인적으로 앱 알림이나 서비스 안에서의 알림을 잘 신경쓰지 않는 편이지만,

UI 디자인에서 숫자 하나, 점 하나는 단순한 시각 요소를 넘어 사용자의 인지와 감정, 행동까지 유도하는 힘을

가진다는 생각을 하게 되었다.

A는 여러 카드를 사용할 때 B안 보다 더 보기 좋을 수 있다는 장점이 있다.

사용자의 편의에 더 초첨을 맞춰주었다고 생각한다. 사용 가능한 카드를 리스트 형식으로 한눈에 보여준다.

카드가 여러 개일 때 빠르게 비교, 선택할 수 있다는 점이 유용하다고 생각된다.

효율성과 정보 중심의 설계를 지향

현재 잔액과 자동 충전 금액을 보여주는 것도 좋은 케이스라고 생각이 되는데

페이결제라는 빠른 결제 시스템에서 잔액을 보여주는 것이 현명한 소비로 이어질 수도 있기 때문이라고 생각한다.

그러나 성인 한 사람당 적어도 3~4개 정도의 카드를 가지고 있다고 생각할 때 무수히 풀린 체크카드와 신용 카드들을 어디에 

어떻게 등록했는지 모르는 경우가 종종 있다.

이럴때 B안 같은 경우 사용자가 소지 중인 카드가 시각적으로 인지가 되기 때문에 B 안이 선호될 수 있다.

또한 사용자는 보통 슬라이드 형식이라는 것을 인지할 수 있도록 디자인이 되어 있기 때문에 자연스럽게 카드를 

넘기면서 선택할 수 있다. 

특히 디지털 친화적인 사용자층에겐 감각적으로 더 익숙할 수 있다.

결론

다수의 카드를 빠르게 비교하고 선택하고 싶다면 A

시각적으로 내 카드를 직관적으로 인지하고 싶다면 B

B안이 유독 선택받지 못하는 이유가 무엇일까? 선택 전에 나의 생각은 두 안 모두 비등비등 할 것이라 생각했지만

그렇지 않은 결과가 나왔다. 

개인적인 경험으로는 카카오페이를 사용할 때 충전 후 결제를 하는 방식이 내 머릿속에 자리 잡고 있어서 나는 B안을 선택한 건가?

생각이 된다. 또한 A안의 결제 방식이 너무 쉬운 부분도 한 몫한 듯

 한번 생각해 보기

B 안이 유독 선택되지 못하는 이유가 무엇일까?