디자이너라면 꼭 알아야 할 UI 용어 사전 21. Icon (아이콘)화면에서 특정 아이템이나, 액션, 아이디어를 시각적으로 표현한 작은 그래픽 요소아이템을 통해 특정 사용 가능한 동작이나 도구를 표시 (eg. 휴지통 아이콘 → 삭제, 펜 아이콘 → 수정)사용자가 의미를 파악하도록 텍스트와 함께 사용하는 것이 권장됨 22. Input Control (인풋 컨트롤)사용자가 시스템에 정보를 입력할 수 있는 모든 UI 요소인풋 박스, 체크 박스, 라디오 버튼, 슬라이더, 토글, 데이트 픽커 등이 모두 이에 해당 23. Input Stepper (인풋 스테퍼)미리 정의된 작은 단위로 점진적으로 숫자를 증가/감소하는데 사용하는 입력 컨트롤일반적으로 숫자 양쪽에 배치된 두개의 버튼으로 구성 (-, + 또는 위쪽 화살..
디자이너라면 꼭 알아야 할 UI 용어 사전1. Accordian 아코디언숨겨진 정보 노출에 쓰이는 확장형 UI 요소긴 페이지에서 콘텐츠를 압축하는데 자주 사용특히 모바일 환경에서 유용일반적으로 레이블과 화살표 또는 레이블 + 더하기 기호로 표시 (eg. 펼치기 +)2. Anchor Text 앵커 텍스트같은 페이지에서 다른 위치로 이동할 수 있게 하는 링크페이지 내 목차표시에 자주 아용페이지 내 링크, 점프 링크로도 불림3. Back to Top 백투탑페이지 제일 상단으로 이동시키는 버튼일반적으로 서치 버튼이나 기타 중요한 컨트롤이 위치하는 곳에 위치함 (우측 하단)주로 플로팅 버튼으로 구현됨긴 모바일 페이지에서 유용4. Badge 뱃지알림이나 품목수를 나타냄보통 작은 동그라미나 숫자가 동그라미 안에 들어..
1. 글자의 크기를 건드리지 말고, 컬러와 굵기를 건드리기UI 디자인을 할 때, 흔한 실수 중 하나는무엇이 더 중요한지 결정하기위한 계층 구조를 정할 때 글자의 크기를 건드리는 것 입니다.물론 이것도 맞는 방법이지만, 색상이나 글꼴 굵기를 수정해보세요. 텍스트가 중요하다면? 더 굵게 표시하기텍스트가 부가적인 정보를 담고있다면? 좀 더 밝은 색상을 사용해보기이때, 2-3가지의 색상 안에서 작업하는 것이 좋습니다.주요 콘텐츠(eg. 제목): 어두운 색상 (검정색 외에 다른 짙은 컬러 사용)서브 콘텐츠(eg. 작성일): 회색보조콘텐츠 (eg. 주석 등): 서브 콘텐츠보다 더욱 밝은 회색글꼴로는 2가지를 사용하시면 됩니다.대부분의 텍스트: 일반 font weight (regular)강조하고 싶은 텍스트: 두꺼운..
💡 기본 주의사항- [쉽게하자] 기술적인 용어는 피하고, 간단하고 이해하기 쉬운 단어로 얘기하기- [기다림의 미학] 답변하는 사람이 생각을 마칠 때까지 잠깐 멈추거나 침묵하는 시간도 필요하다는 것을 잊지않기시작 할 때아주 간단하게 자기소개를 해주실 수 있나요?언제 처음으로 ~?A는 개인적으로 어떤 의미인가요?보통 언제, 어떻게 ~ 하세요?지난번에 ~를하셨던 것에 대해서 설명해주실 수 있나요? 특정 주제에 대해 더 자세히 물어보고 싶을 때왜 그렇게 생각하세요?왜 그게 ~한지 설명해주실 수 있나요?왜 이건 ~하고, 이건 ~하지 않은지 설명해주실 수 있나요?조금 전에 하신 이야기를 더 자세히 이야기 해주실 수 있나요?그럼 ~라는 거군요, 제가 이해한게 맞을까요?~것처럼 들리네요. 맞나요?~하셨던 것 같은데,..
그럼 이렇게 선정한 이미지를 잘 썼는지 어떻게 판단할수 있을까?간단하게 테스트하는 방법을 소개한다. 비주얼 테스트 실무5초 테스트사용자에게 5초 또는 그 외의 짧은 시간동안 디자인(이미지)을 보여준 다음 숨긴다. 이미지가 사라지면 사용자에게 본 내용과 이미지가 전달하거나 담고있다고 생각하는 내용을 설명해달라고 요청한다. 만약 첫인상을 알고싶은 것이 목적이라면 ‘무엇이 눈에 띄었나요?’ 라고 질문한다.개방형 단어 선택 테스트이 테스트는 5초 테스트와 비슷하지만 시간 제한이 없다. 참가자에게 디자인을 보여주면서 이를 설명하도록 요청한다. 말로 할수도 있고, 텍스트로 적을 수도 있다. 시간 제한은 없으므로 우리는 가능한 한 많은 연관성과 레이블을 수집할 수 있다. 이후, 참가자가 생성한 단어와 설명이 일관되..
1. 관련이 있는 이미지 선택하기이미지는 다른 콘텐츠와 함께 존재하며, 사용자는 함께 존재하는 콘텐츠를 활용해 이미지를 해석한다. 닐슨 노먼 그룹의 시선 추적 연구에 따르면, 사용자는 텍스트를 강화하는 이미지에 더 집중한다. 그러므로 디자이너는 사용자가 이해할 ‘핵심 메시지’를 홍보하는 이미를 선택해야한다.관련성 없는 시각적 요소는 이 기회를 놓치는 것이며, 메시지가 기억에 남지 않게 할것이다. 예를 들어, 아래의 이미지는 겨울 옷을 입은 가족이 불꽃놀이를 즐기고 있다. 이 이미지는 이 홈페이지의 핵심인 ‘세무 서비스’ 내용과 아무런 관련이 없으며, 결과적으로 서비스의 핵심 메시지를 기억할 수 있는 역할을 하지 못하고있다.[❌ Don’t] 세무 서비스에 대한 이 잭슨 휴잇 페이지에는 불꽃놀이를 켜는 행복..
