[UX/UI 디자인] 22. UX 디자인 원칙 / 포폴 다듬어 보기

📅 2026.05.15(금) - 22일차

---

UX 디자인 원칙

• UX 디자인의 핵심은 심미성을 넘어 사용자의 인지 에너지를 아껴주는 설계에 있음! 화면을 예쁘게 만드는 것을 넘어, 사용자가 덜 헷갈리고, 덜 실수하고, 더 빠르게 목적을 달성하게 만드는 기준을 이해하는 것이 목표. 

---

1. UX의 본질: User Experience vs. User Exploitation

디자인의 목적이 '사용자의 문제 해결'인지, '기업의 이익 독점'인지에 따라 결과물은 완전히 달라짐.

• Dark Pattern (사용자 착취): 서비스 제공자의 단지 지표(매출, 클릭률)를 높이기 위해 고의적으로 사용자의 불편이나 불필요한 상호작용을 유도
  • 뉴스 제목 클릭했을 때 바로 기사가 나오지 않고, 중간에 한 페이지를 더 거치도록 한 후 다른 기사와 광고가 나오도록 함.. (와,, 전혀 몰랐따!!)
  • Roach Motel (바퀴벌레 덫): 들어오긴 쉽지만 나가는 문은 꽁꽁 숨겨둔 구독 해지 방해 패턴.
  • Hidden Costs (숨겨진 비용): 결제 직전 단계에서야 배송비나 수수료를 슬그머니 추가하는 방식. 
  • Forced Community (강제 연속성): 별도로 해지하지 않으면 월별 구독 이어지는 것.
  • Bait and Switch
• 리스크: 단기 수익은 오를 수 있으나, 사용자 경험이 저하되고 브랜드 신뢰도가 하락함. 부정적 입소문과 평판이 생김. 법적 제재와 규제에 따라 벌금 등 부과받을 수 있음. GDPR 규정(?)

2. 사용성 휴리스틱 - NNG(Nielsen Norman Group)의 유산

UX라는 용어를 정립한 도널드 노먼과 야콥 닐슨은 디자인의 중심을 '기능'에서 '인간'으로 옮김

• 직무 명칭의 변화가 주는 메시지: 실제 일하는 곳에서 principle이 바뀌어왔음을 시사.
  • Human Interface Designer: 기계와 사람 사이의 '접점'에 집중.
  • User Experience (UX): 제품을 사용하는 '전체 과정'의 경험에 집중.
  • Product Designer: 비즈니스 목표와 사용자 가치를 연결하는 '제품의 총체적 완성도'에 집중.

3. 10가지 Usability Huristic 사용성 휴리스틱 중 주요 내용

실제 사용에서는 이 원칙을 꼭 따라야한다는 것은 아니다. 오히려 역으로 이용하는 것이 좋을 때도(?) 있다. 잘 고민고민.

 

① 가시성 원칙 (System Status)

사용자가 "지금 무슨 일이 일어나고 있는지" 즉시 알 수 있어야 함.

• 3초 원칙: 화면 진입 후 3초 이내에 현재 상태를 파악할 수 있는가?
• 피드백: 사용자가 지금 페이지에서 무슨 일이 일어나고 있는 건지 쉽게 알 수 있어야 함. 로딩 중에는 Skeleton UI나 프로그레스 바를 보여주고, 작업 결과(성공/실패/경고)를 명확한 컬러(Green/Red/Yellow)로 제시합니다.

② 일관성과 표준 (Consistency)

사용자가 새로운 학습을 하지 않게 해야함.

• 내부 일관성: 서비스 내에서 확인 버튼의 위치, 서체, 톤앤매너가 동일해야 함.
• 외부 일관성: "X" 버튼은 닫기, "돋보기"는 검색이라는 사회적 약속을 따름.

③ 오류 예방과 제약 (Error Prevention & Constraints)

실수한 뒤에 고치는 것보다, 실수할 환경을 아예 만들지 않는 것이 베스트.

• 제약(Constraints): 잘못된 클릭을 막기 위해 조건이 충족되지 않으면 '다음' 버튼을 비활성화하는 방식.
• 넛지: 메일 본문에 "첨부" 단어가 있는데 파일이 없으면 팝업을 띄우는 배려.

④ 인지 부하 감소 (Recognition rather than Recall)

사용자가 무언가를 외우지 않아도 딱 보면 알 수 있게끔. 사용자가 보고싶어할 만한 페이지를 알아서 딱딱.

• 보여주기: 최근 검색어, 최근 본 상품 등 사용자가 기억해내지 않아도 화면에 정보를 미리 띄워주는 설계 등

4. 심리학 기반 디자인 법칙

법칙	핵심 내용	실무 적용
힉의 법칙 (Hick's Law)	선택지가 많아질수록 결정 시간은 늘어남	메뉴를 그룹화하고, 핵심 버튼(CTA)은 하나만 강조
피츠의 법칙 (Fitts's Law)	대상이 크고 가까울수록 누르기 쉬움	중요 버튼은 엄지손가락이 닿기 쉬운 곳에 적당한 크기로 배치

---

[실습] 디자인 원칙을 작용하는 방법으로 이미 있는 페이지 바꾸기

'목적 중심의 설계. 사용자가 덜 헷갈리고, 더 빠르게 목적을 달성하게 한다'라는 방향성을 중요시하면서 개선점 찾는 실습해봄.

개선 항목	UX 디자인 원칙	현재 (AS-IS)	개선 제안 (TO-BE)	기대 효과
구조 통합	인지 부하 감소	홈과 병원 찾기가 분리되어 목적 달성까지의 단계(Depth)가 긺	병원 찾기'를 랜딩 페이지로 통합하여 홈 버튼 제거	접속 즉시 핵심 서비스인 병원 탐색에 집중 가능
지역 선택	가시성 및 직관성	드롭다운이나 텍스트 내부에 숨겨져 있어 선택 옵션 파악이 어려움	칩(Chip) 형태의 버튼으로 지역 리스트를 전면 노출	현재 위치 확인 및 지역 전환이 별도 학습 없이 직관적으로 가능
정보 위계	힉의 법칙	정보가 우선순위 없이 섞여 있어 선택 시 피로도 유발	진료과 → 지역 → 테마' 순으로 논리적 흐름 재배치	선택 범위를 단계별로 좁혀주어 사용자의 결정 시간 단축
필터 배치	피츠의 법칙	주요 필터와 테마 버튼이 산발적으로 흩어져 있음	사용자가 자주 찾는 테마형 필터(야간/여의사 등)를 그룹화하여 하단 배치	마우스나 손가락이 닿기 쉬운 위치에서 빠르게 조작 가능

1. 개선 제안 (UX 원칙)

① 홈과 병원 찾기의 통합 (인지 부하 감소)

기존의 '홈'과 '병원 찾기'가 나뉘어 있던 구조를 하나로 합쳐 사용자의 Depth를 줄임. 사용자가 들어오자마자 "나는 병원을 찾으러 왔다"라는 목적에 집중하게 만들었음.

② 지역 선택의 가시화 (가시성 및 직관성)

단순히 드롭다운 메뉴로 숨겨져 있던 지역 선택을 칩(Chip) 형태의 버튼으로 나열하여, 내가 현재 어디를 보고 있는지 혹은 어디를 선택할 수 있는지 훨씬 직관적으로 보여주려고 함. 사용자가 "무엇을 할 수 있는지" 고민할 시간을 줄여줌.

③ 필터의 우선순위 재배치 (힉의 법칙)

'진료과 선택' → '지역 선택' → '테마 선택(이런 병원은 어때요?)' 순으로 정보의 위계를 잡고, 무작위로 섞여 있던 정보를 논리적인 흐름으로 정리하여 선택의 피로도를 낮춤.

2. 이후에 개선해볼 수 있는 포인트

• 사람들이 병원을 찾을 때 보통 '어디서'를 먼저 생각할 지 아니면 [무슨 과]를 먼저 생각할 지 고민. 보통 "우리 동네(지역)에 있는 내과(진료과)" 순으로 사고할 듯. 지역 > 진료과로 순서 변경?
• 그리고 특정 증상이 있을대 무슨 과를 가야하는지 명확하게 알기 어려운 경우가 있는데, 추후에 AI를 활용해서 내 증상을 입력하면 추천 과 알려주는 기능도 생각해볼 수 있을듯

 

병원 예약 '굿닥' 웹사이트 - 기존 페이지 (홈버튼/랜딩페이지)

병원 예약 '굿닥' 웹사이트 - 기존 페이지 (병원 찾기 페이지)

 

 

병원 예약 '굿닥' 웹사이트 - 내가 요래조래 바꾸어 봄 / '가시성' 원칙을 주로 생각해보았다.

---

[끄적끄적]

 

이미 있는 웹사이트를 피그마로 가져와서 요래저래 바꾸어볼 때 유용!

https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed

html.to.design - Chrome 웹 스토어

 

Google Mixboard

https://labs.google.com/mixboard/welcome

 

'앱인토스'라는 것도 있다고 한다륑~

https://toss.im/apps-in-toss?srsltid=AfmBOoosQNbMzOGQnk5WPHsF2eKXNHfGrr86D5FWC0I7gFS300N-4M5Z

앱인토스 - 토스에 미니앱 출시하고 수익 만들기

 

상징체계학? 기계와 인간,,,

https://www.hankyung.com/article/2026051471961

"코딩만 잘해선 안 된다"…'AI 시대' 몸값 뛰는 뜻밖의 전공

---

지금까지 해왔던 프로젝트 정리해서 포폴에 올려보는 작업 시간을 가졌다.

그 과정에서 생긴 질문/의문점:

 

1) 중간에 SSH가 실행이 안된다고 해서 VM 재시작 안내 받은대로 진행했더니, 주소가 바뀌었다면서 도메인 주소도 바꾸고 firebase도 다시 설정하라고 했다. 지난번에도 한번 이런적 있는데.. 이로써 내 도메인 히스토리에 보면 IP 주소가 3개나 있다. 이거 이래도 괜찮은건가?? 모르겠음..

 

안된다고 했을 때 처음에는 이거 체크하라고 해서 했는데, 문제 없이 이미 체크되어있었다.

 

그렇게 말했더니

VM 재시작 후 외부 IP가 바뀌었을 수 있어요! 현재 IP 확인해주세요:

IP가 바뀌었습니다! 하면서 새로운 IP 주소 알려줬다, 그리고. 호스팅 사이트 가서 DNS A레코드도 새 IP로 업데이트해야 합니다: 라고 해서 안내된 대로 했움,,

 

그리고 또 안돼서 얘기했더니만,

"DNS 전파 시간이 필요합니다. A레코드를 방금 변경하셨으면 5분~1시간 정도 기다리면 자동으로 됩니다.

기다리는 동안 다른 작업 하시면 돼요! 😊" 라고 해씀..

 

홈페이지 수정이나 좀 하고 있으려했더니 또 요렇게 나와서 시키는대로 했다. 그랬더니 일단 해결!

 

 

2) 나는 계속 claude만 사용하고 있는데 (그래서 또 크레딧 금방 다 씀 ㅠㅠ) 이럴 경우에 figma나 antigravity에 옮겨가서 작업 이어갈 수 있는 환경이 지금 조성이 되어있는건가? 서로 동기화가 되어있는 상태인지 아닌지 잘 모르겠고 어떻게 확인할 수 있는 건지 잘 모르겠다.

 

아무튼 그래도 일단 멀쩡한 포폴 구조가 만들어졌고, 프로젝트 추가하기 기능도 작동이 된다는 사실만 보면 그동안에 비해 아주 엄청나게 발전된 상태임..ㅋㅋ 이번주는 이정도에 감사하는 것으로!!!

 

현재 상태,,,,,,, 허허허