[참고자료] UI 기능과 용어

 

전공자가 아니면 (컴퓨터 공학, 시각 디자인 등) 인터페이스 용어에 대해 알기가 어렵다.

팝업, 드롭다운과 같이 자주 용어를 볼 수 있는 것들이라면 문제가 없겠지만

"화면에 떠다니는 버튼이요.", "꼬집듯이 화면 막 줄어들게 하는거요." 등

뭔가 명확한 용어를 사용하고 싶을 때 보면 좋을 사이트들을 모아보았다.

 

 

(1) 애플의 UI 디자인

https://developer.apple.com/kr/design/tips/

UI 디자인 기본 원칙 - Apple Developer

애플에서 정리한 UI 디자인의 기본 원칙이라는 글이다.

UI 디자인 구성에 대해서 어떻게 설명해야할지 난감할 때 보면 좋은 글이다.

 

터치 제어기는 어떻게 해주세요, 왜곡은 어떻게 주세요! 등

 

https://developer.apple.com/kr/design/resources/

Apple 디자인 리소스

애플에서 정리한 디자인 리소스들이다.

디자인 가이드들을 이렇게까지 제공한다고? 생각이 들 정도이다.

 

 

 

https://developer.apple.com/design/human-interface-guidelines/components

Components | Apple Developer Documentation

애플의 컴포넌트 모음

 

<출처 : 애플 디벨로퍼>

 

구글도 이런 비슷한 것들을 정리해두었지만 애플 스토어만큼 빡세게 앱을 검수하는 (ㅋ) 곳이 없기 때문에 왠만하면 이 가이드 라인대로 작업하게 된다.

또, 애플과 구글의 작업이 크게 다르지 않고 기본 문법은 같아서 오히려 이 문서를 따라 인터페이스 작업을 하면 편하다.

 

 

 

(2) UI 컴포넌트 모음

https://ionicframework.com/docs/components

UI Components | Ionic Documentation

ionic DOCS 라는 사이트이다.

여기서는 다양한 컴포넌트들을 한눈에 보기 쉽게 설명해두었다.

 

여기에 적혀있는 badge 의 경우 사람에 따라 "레드닷", "알림" 등으로 불리는데 그게 뭐예요? 라고 할 때 badge 라고 용어를 말해주면 훨씬 커뮤니케이션이 쉽겠지...!

 

 

https://mui.com/material-ui/all-components/

Material UI components - Material UI

비슷한 사이트로는 Material UI 사이트가 있다.

위와 살짝 다른점은 기능별로 컴포넌트를 분리하여 기능별로 찾기 쉽다는 점.

 

 

 

네비게이션도 드로어인지 탭인지 등은 기본적으로 상식이라 생각하고 알아두면 정말 일할 때 편하다.

 

이런 사이트를 미리 알았더라면 더 편했을텐데.. 라는 아쉬움과 이제 알아서 다행이다라는 여러가지 감정이 든다.