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

 

 

웹 개발자와 긴밀하게 작업해 본 적이 있다면 외국어처럼 느껴지는 기술 용어를 사용한 경험이 있을 것입니다.
이러한 용어를 이해하면 디자이너로서의 기술을 향상시키고 개발자와의 협업을 개선할 수 있습니다.

 

1. Margin(여백)

Margin은 요소의 경계 바깥쪽 공간입니다. Margin은 해당 요소와 주변의 다른 요소 사이에 거리를 만듭니다.

예시: 캔버스에 버튼이나 이미지와 같은 요소를 배치할 때 요소 사이의 간격을 일정하게 유지하세요.

요소를 드래그하거나 정렬 도구를 사용하여 여백을 조정하여 일관된 간격을 유지할 수 있습니다.
예를 들어 탐색 모음이나 배너 섹션을 디자인할 때 요소가 서로 너무 가깝거나 화면 가장자리 근처에 표시되지 않도록 요소 주변에 여백을 두세요.

 

 

 

2. Padding(패딩)

패딩은 요소의 경계 안쪽, 콘텐츠(예: 텍스트 또는 이미지)와 해당 요소의 가장자리 사이의 공간입니다.

예시: 텍스트 요소, 로고 및 아이콘이 포함된 탐색 모음으로 작업하는 경우 패딩을 조정하여 모양을 개선하는 것이 좋습니다.

탐색 모음 내의 내부 간격을 늘리면 보다 균형 잡히고 읽기 쉬운 모양을 만들 수 있습니다.

예를 들어 위쪽과 아래쪽에 24px 패딩을 설정하고 왼쪽과 오른쪽에 36px 패딩을 추가하면 탐색 요소 주위에 균형 잡힌 간격이 만들어집니다.

 

 

 

 

3. border(테두리)

테두리는 요소의 가장자리를 둘러싸는 선으로, 경계를 정의하는 데 도움이 됩니다.
테두리는 두께, 스타일 및 색상이 다양할 수 있습니다.

예시: 카드 또는 입력 필드 구성 요소를 디자인할 때 테두리를 추가하여 배경에서 눈에 띄게 만들 수 있습니다.

이 테두리는 입력 필드에 명확한 경계를 제공하여 사용자가 클릭하거나 입력해야 하는 위치를 더 쉽게 인식할 수 있도록 합니다. 사각형을 선택하고 획을 적용하고 두께, 색상 및 스타일(실선, 파선 등)을 설정하여 테두리를 쉽게 추가할 수 있습니다.
예를 들어 2px의 검은색 단색 테두리를 추가하면 입력 필드 주변에 명확한 윤곽선을 만들어 시각적으로 구분할 수 있습니다.

 

 

 

 

4. Border-Radius(테두리 반경)

테두리 반경은 요소의 모서리를 둥글게 만들어 날카로움을 줄이고 디자인을 더 부드럽게 보이게 하는 속성입니다.
사소한 디테일이지만 디자인을 더욱 모던하고 친근하게 만들 수 있습니다.

예시: 직사각형 버튼이나 카드를 디자인하는 경우 기본적으로 모서리는 날카롭고 직각입니다. 모양을 부드럽게 하려면 테두리 반경을 적용하면 됩니다.

예를 들어 테두리 반경을 20px로 설정하면 버튼의 모서리가 둥글어져 보다 모던하고 친근한 모양이 됩니다.

 

 

 

 

5.  Font Family(글꼴 패밀리)

글꼴 패밀리는 선택한 특정 서체(예: Arial, Times New Roman 또는 Helvetica)에 따라 정의됩니다.

예시: 디자인 작업 시 디자인의 일관성을 유지하려면 다양한 텍스트 요소에 대해 글꼴 패밀리를 선택해야 합니다.
예를 들어 가독성과 스타일을 보장하기 위해 본문 텍스트에 Inter Tight와 같은 깔끔하고 현대적인 글꼴을 선택합니다.

이렇게 글꼴 패밀리를 선택하면 사이트의 모든 텍스트가 통일된 모양과 느낌을 갖도록 할 수 있습니다. 이 글꼴을 Figma 또는 XD에서 글로벌 스타일로 설정하면 여러 텍스트 레이어에 쉽게 적용할 수 있습니다.

 

 

 

 

6. Grid System(그리드 시스템)

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

예시: 금융 웹사이트를 디자인할 때 12열 그리드 시스템을 사용하면 텍스트, 이미지, 버튼 등의 요소를 균형 잡히고 시각적으로 매력적인 방식으로 정렬하는 데 도움이 됩니다.

예를 들어 헤더를 6열에 걸쳐 정렬하고 이미지를 4열 너비에 배치하여 모든 요소가 완벽하게 정렬되도록 할 수 있습니다.

 

 

 

 

7. Flexbox(플렉스박스)

플렉스박스는 컨테이너 내에서 요소를 정렬하고 공간을 분배하여 유연하고 반응이 빠른 레이아웃을 쉽게 만들 수 있는 CSS 레이아웃 모델입니다.

예시: Figma 또는 XD에서 자동 레이아웃(Figma) 또는 스택(XD)을 사용하여 Flexbox 동작을 시뮬레이션할 수 있습니다.

예를 들어 버튼 행을 디자인하는 경우 자동 레이아웃을 사용하여 컨테이너 전체에 균일한 간격을 둘 수 있습니다. 컨테이너의 크기를 조정하면 버튼도 Flexbox와 마찬가지로 자동으로 간격을 조정합니다.
이 기능은 모든 화면 크기에서 보기 좋게 표시되어야 하는 반응형 컴포넌트를 디자인할 때 특히 유용합니다.

 

 

GIF by Azubuike Duru

 

 

8. SVG

SVG(확장 가능한 벡터 그래픽)는 XML을 사용하여 품질 저하 없이 확장할 수 있는 벡터 기반 그래픽을 정의하는 파일 형식입니다.

예시: 웹사이트 로고를 만들었다고 가정해 보겠습니다. 이 로고를 SVG(확장 가능한 벡터 그래픽) 파일로 저장하면 품질 저하 없이 원하는 크기로 크기를 조정할 수 있습니다.

즉, 작은 파비콘이든 큰 영웅 이미지이든 상관없이 웹사이트에 어떤 크기로든 SVG 로고를 흐릿하게 보이거나 픽셀화되지 않고 사용할 수 있습니다.
따라서 대형 모니터 디스플레이부터 작은 모바일 화면에 이르기까지 모든 기기에서 로고가 선명하고 또렷하게 표시됩니다.

 

 

 

9. Rem과 Em

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

예시: Figma와 XD는 rem 또는 em을 직접 사용하지 않지만 글꼴 크기를 일관되게 유지하고 디자인 전체에서 균일하게 크기를 조정하면 비슷한 효과를 얻을 수 있습니다.

예를 들어 기본 글꼴 크기(예: 16px)를 설정하고 그에 비례하여 제목이나 버튼의 크기를 조정하면 기본적으로 코드에서 rem 또는 em의 동작을 복제하는 것입니다.
이 방법은 다양한 컴포넌트와 화면에서 디자인 일관성을 유지하는 데 도움이 됩니다.

 

---

여백, 패딩, 반응형 디자인과 같은 용어가 Figma 또는 Adobe XD에서 작업에 어떻게 적용되는지 알면 디자인과 개발 간의 간극을 좁히는 데 도움이 될 수 있습니다.

이를 통해 협업을 원활하게 하고 실제 환경에서 실용적이고 쉽게 구현할 수 있는 디자인을 만들 수 있습니다.

출처:

https://uxplanet.org/9-developer-terms-that-all-designers-need-to-know-97a55efaf068