모든 UI/UX 디자이너가 알아야 할 9가지 개발자 용어

UI/UX 디자이너를 위한 기술 언어 단순화

 

 

 

 

1. Margin

마진은 요소의 경계 밖에 있는 공간이다. 이는 해당 요소와 그 주변의 다른 요소 사이에 거리를 만든다.

예 : 캔버스에 버튼이나 이미지와 같은 요소를 배치할 때 요소 간 마진을 일관되게 유지해야한다. 요소 간 마진을 조정하거나 정렬 도구를 사용하여 일관된 간격을 유지할 수 있다. 예를 들어, 네비게이션 바나 배너 섹션을 디자인할 때 요소 주변에 공간을 확보하여 요소가 서로 너무 가깝거나 화면 가장자리에 너무 가까이 표시되지 않도록 해야한다.

 

 

 

 

 

2. Padding

패딩은 요소의 경계 내부에 있는, 콘텐츠(예: 텍스트나 이미지)와 해당 요소의 가장자리 사이의 공간을 말한다.

예: 텍스트 요소, 로고, 아이콘이 포함된 네비게이션 바를 작업하는 경우 패딩을 조정하여 모양을 개선하는 것을 고려해야한다. 네비게이션 바의 내부 간격을 늘리면 더 균형 잡히고 읽기 쉬운 모습을 만들 수 있다. 예를 들어, 상단과 하단에 24px 패딩을 설정하고, 좌우에 36px 패딩을 추가하면 탐색 요소 주위에 균형 잡힌 간격이 생성된다.

 

 

 

 

3. Border

테두리는 요소의 가장자리를 따라 흐르는 선으로, 요소의 경계를 정의하는 데 도움이 된다. 테두리의 두께, 스타일, 색상은 다양하다.

예: 카드나 입력 필드 구성요소를 디자인할 때 배경과 대조되게 하기 위한 테두리를 추가할 수 있다. 이 테두리는 입력 필드에 대한 명확한 경계를 제공하여 사용자가 클릭하거나 입력해야 할 곳을 더 쉽게 인식할 수 있도록 해준다. 사각형을 선택하고 선을 적용하고 두께, 색상, 스타일(실선, 점선 등)을 설정하여 쉽게 테두리를 추가할 수 있다. 예를 들어, 2px 두께의 검은색 테두리를 추가하면 입력 필드 주위에 선명한 윤곽선이 만들어져 시각적으로 구별이 쉬워진다.

 

 

 

 

 

 

4. Border-radius

Border-radius 는 요소의 모서리를 둥글게 만들어 덜 날카로워지고 디자인이 더 부드럽게 보이도록 하는 속성이다. 사소한 디테일이지만, 디자인을 더 현대적이고 친근하게 느끼게 할 수 있다.

예: 직사각형 버튼이나 카드를 디자인하는 경우 기본적으로 모서리는 날카롭고 직각이다. 모양을 부드럽게 하려면 border-radius를 적용할 수 있다. 예를 들어, border-radius를 20px로 설정하면 버튼의 모서리가 둥글어져 더욱 트렌디하고 친근한 모양이 된다.

 

 

 

 

5. Font Family

폰트 패밀리는 Arial, Times New Roman, Helvetica 등 선택한 특정 글꼴에 따라 정의된다.

예: 디자인 작업을 할 때 디자인의 일관성을 유지하기 위해 다양한 텍스트 요소에 맞는 폰트 패밀리를 선택해야 한다. 예를 들어, 가독성과 스타일을 보장하려면 본문에는 Inter Tight 와 같은 깔끔하고 현대적인 글꼴을 선택하는게 좋다. 이러한 폰트 패밀리 선택은 사이트의 모든 텍스트가 통일된 모양과 느낌을 갖도록 보장한다. Figma에서 이 글꼴을 글로벌 스타일로 설정할 수 있어 여러 텍스트 레이어에 쉽게 적용할 수 있다.

 

 

 

 

6. Grid system

그리드 시스템 은 웹페이지를 일련의 열과 행으로 나누어 콘텐츠를 일관되게 정렬하고 구성하는 데 도움이 되는 프레임워크이다. 디자인 도구에서 그리드를 사용하면 구조화된 프레임워크 내에서 요소를 구성할 수 있다.

예 : 금융 웹사이트를 디자인할 때 12열 그리드 시스템을 사용하면 텍스트, 이미지, 버튼 등의 요소를 균형 잡히고 시각적으로 매력적인 방식으로 배열하는 데 도움이 될 수 있다. 예를 들어, 헤더를 6개 열에 걸쳐 정렬하고 이미지를 4개 열 너비로 배치하여 모든 것이 완벽하게 정렬되도록 할 수 있다.

 

 

 

 

7. Flexbox

플렉스박스는 컨테이너 내에서 요소를 정렬하고 공간을 분배할 수 있는 CSS 레이아웃 모델로, 이를 통해 유연하고 반응성이 뛰어난 레이아웃을 더 쉽게 만들 수 있다.

예: Figma 또는 XD에서 자동 레이아웃(Figma) 또는 스택(XD)을 사용하여 Flexbox 동작을 시뮬레이션할 수 있다. 예를 들어, 버튼 행을 디자인하는 경우 자동 레이아웃을 사용하여 컨테이너 전체에 균등하게 간격을 둘 수 있다. 컨테이너 크기를 조정하면 Flexbox와 마찬가지로 버튼의 간격이 자동으로 조정된다.

이 기능은 어떤 화면 크기에서도 멋지게 보여야 하는 반응형 구성요소를 디자인하는 데 특히 유용하다.

 

 

 

 

 

8. SVG

SVG (Scalable Vector Graphics)는 XML을 사용하여 벡터 기반 그래픽을 정의하는 파일 형식으로, 품질을 손상시키지 않고도 크기를 조절할 수 있다.

예: 웹사이트 로고를 만들었다고 상상해 보아라. SVG(확장 가능 벡터 그래픽) 파일로 저장하면 품질을 잃지 않고 어떤 크기로든 크기를 조정할 수 있다. 즉, SVG 로고는 흐릿하거나 픽셀화되지 않고 작은 파비콘이든 큰 히어로 이미지이든 어떤 크기로든 웹사이트에 사용할 수 있다. 이렇게 하면 대형 모니터 디스플레이부터 작은 모바일 화면까지 모든 기기에서 로고가 선명하고 깨끗하게 표시된다.

9. Rem / Em

Rem 과 Em은 글꼴, 패딩, 여백과 같은 요소의 크기를 조정하는 데 사용되는 CSS의 상대적 단위이다. Rem은 루트 요소의 글꼴 크기를 기준으로 하는 반면, Em은 부모 요소의 글꼴 크기를 기준으로 한다.

예: Figma와 XD는 rem이나 em을 직접 사용하지 않지만, 글꼴 크기를 일관되게 유지하고 디자인 전체에 걸쳐 균일하게 크기를 조정하면 비슷한 효과를 얻을 수 있다. 예를 들어, 기본 글꼴 크기(예: 16px)를 설정하고 제목이나 버튼을 비례적으로 크기 조정하면 기본적으로 코드에서 rem 또는 em의 동작을 복제하는 것이다. 이 방법은 다양한 컴포넌트와 화면에서 디자인의 일관성을 유지하는 데 도움이 된다.

 

 

 

 

-

저자 : Bryson M. / Published in UX Planet

출처: https://medium.com/ux-planet/9-developer-terms-that-all-designers-need-to-know-97a55efaf068