🔖 UXUI 해외 인기 아티클

🔖 2022년 5월 1주 TOP3

1️⃣ 더 스마트한 UI 키트를 구축하는 방법

2️⃣ 10번의 UX 디자이너 구직 면접을 통해 알게 된 것

3️⃣ 반응형 웹사이트를 만들기 위한 완벽한 가이드

1️⃣  더 스마트한 UI 키트를 구축하는 방법

피그마 토큰과 스타일러 플러그인으로

최근에 저는 피그마에 디자인 보일러 플레이트를 공개했고, 저만의 디자인 프로세스를 시작하기 위해 이것을 만들었습니다. 자유롭게 사용해 보시고, 개선할 수 있는 방법에 관한 피드백을 부탁드립니다.

몇 달 동안 저는 제 프로세스를 추적하기 시작했습니다. 물론 모든 프로젝트는 다르지만, 많은 프로젝트에서 제 프로세스 중 일부가 동일하다는 것을 알게 되었습니다. 그래서 저는 모든 프로젝트의 베이스로 사용할 스타터 키트나 (설계 시스템이 아닌)보일러 플레이트 같은 것을 만들까 생각했습니다. 처음에는 공개되어 있는 일부 UI 키트가 제가 필요한 것을 줄 수 있을 거라고 생각했습니다. 하지만 적어도 제가 찾던 것은 찾을 수 없었습니다.

참고로 Skeleton의 CSS Boilerplate가 좋은 예입니다. 이는 가볍고, 반응형 그리드 시스템, 작은 양식 스타일, 반응형 텍스트 분류 체계와 일부 사용성 분류 체계를 갖추고 있습니다. 그뿐입니다. 색상이나 이미지에 관한 100가지 다른 스타일과 컴포넌츠 등은 없습니다. 시작하는 데 필요한 가장 간단한 항목만 있으면 되며 거기서부터 나아가면 됩니다. 오해하지 마세요. 큰 프레임워크를 사용하지 말라는 것은 아닙니다(항상 필요할 것입니다).

보일러 플레이트가 갖춰야 한다고 생각하는 핵심으로 넘어가 보겠습니다.

따라서 가장 큰 문제는 위에 나열된 거의 모든 점에 대해 피그마의 내부 옵션이 제한되어 있다는 것입니다. 그래서 저에게 도움이 될 만한 몇 가지 플러그인을 찾았고, Figma tokens plugin을 발견했습니다.

이는 테두리 반지름 또는 공간 구성 단위부터 다른 토큰을 참조할 수 있는 시맨틱 색상과 타이포그래피 스타일에 이르기까지, 전체 범위의 디자인 옵션에 사용될 수 있는 디자인 토큰을 사용할 수  있는 능력을 줄 것입니다. 저는 이 플러그인을 설치하고, 보일러 플레이트를 제작하기 시작했습니다.

아래는 그 과정에 관한 자세한 내용입니다.

색상

색상에 관해서는 일반적으로 기본 색상이 있는 "음영 접근 방식”을 취하고, 그로부터 다른 음영을 생성한 다음 중성 색조(회색)의 작은 팔레트와 결합합니다.

때로는 보조 색상도 사용합니다. 이러한 접근 방식은 Adam Wathans와 Steve Shoger의 책 Refactoring UI에서 가져온 것입니다. (저는 이 책을 강력히 추천합니다. 이 책에서 톤에 대해 배웠습니다.)

저는 CSS에서 하나의 변수를 변경하면 다른 모든 색상이 변경되는 것과 같이 스마트하게 작동하는 색상 시스템을 원했습니다. 이를 위해 HSL 형식을 기반으로 하는 "Figma 토큰 플러그인" 색상 분류 체계로 구축했습니다. 토큰 플러그인에서 "마스터 기본 색상 값"을 변경하면 기본 색상의 다른 9가지 음영이 그에 따라 변경됩니다. 또한 음영을 다른 텍스트 스타일에 연결시킬 수 있으며, 그것들도 변경됩니다.

유형

제 텍스트 스타일에 관한 크기 조정 시스템은 크게 변하지 않으므로 가장 자주 사용하는 3가지 표준에 맞는 프리셋을 구축합니다.

..  👇 더 자세한 내용은 아래 원문에서 확인해주세요.

2️⃣ 10번의 UX 디자이너 구직 면접을 통해 알게 된 것

UX 디자인 직무에 지원한 지 한 달이 지났고, 10번의 면접을 거쳤습니다. 제가 이 과정을 통해 배운 것은 다음과 같습니다.

만약 여러분이 저를 팔로우하고 계신다면, 지금쯤 제가 2개의 UX 디자인 자격증을 마쳤다는 것을 아실 겁니다. 그중 하나는 Google UX 디자인 자격증이고, 다른 하나는 UX 전략, UX 라이팅과 UI 디자인에 더 집중할 수 있었던 브라질 UX 디자인 자격증이었습니다.

저는 법학 학위를 취득했기 때문에, UX 디자인으로 직무를 전환하는 것이 재미있고도 힘든 여정이었습니다.

하지만 많은 전문가가 지금 이러한 전환을 하고 있다는 것을 알고 있고, 그것이 제가 여기 있는 이유입니다. 우리 함께 이 여정을 헤쳐 나가 봐요.

이 기사에서는 다음과 같은 내용을 공유하겠습니다:

저는 제 여정을 공유하기 위해 여기에 있으며, 바라건대 여러분은 저와 같은 실수를 하지 않기를 바랍니다.

면접 절차는 보통 어떻게 되나요? 먼저 헤드헌터가 찾아오고, 어떤 경우에는 여러분이 이력서를 보내면 헤드헌터가 당신에게 문자를 보내거나 LinkedIn 등에서 여러분을 찾다가 문자를 보낼 것입니다. Linkedin에서 문자를 보낸 후 전화를 걸거나 직접 여러분의 전화와 이메일로 문자를 보낼 수도 있습니다. 브라질에서는 일반적으로 WhatsApp에서 문자를 보내므로 프로필 사진에 신경 쓰시길 바랍니다.

헤드헌터 면접

제 경험에 따르면 이러한 면접은 매우 빠르고 비공식적이었으며, 때로는 전화 통화로, 대부분은 30분을 넘지 않는 화상 통화로 진행되었습니다.

대부분 헤드헌터는 기술적인 UX 디자인 절차에 대해 알지 못하고, 회사가 찾고 있는 정보만 갖고 있으며, 여러분은 이러한 요구 사항에 적합하다는 것을 증명해야 합니다.

면접 후, 헤드헌터가 여러분의 정보를 회사에 보내면, 그들은 당신에게 다시 면접을 볼 수도 있고 그렇지 않을 수도 있습니다.

만약 여러분이 수년간의 경험이 없는데 중간 수준의 직책을 맡을 위험이 있는 경우, 그들은 다시 전화를 걸지 않을 가능성이 크지만, 이는 과정의 일부일 뿐이므로 의욕을 잃지 말고 계속 지원하세요.

시작하기 전에 간단한 팁

지원하는 모든 직무에 대해 직무 설명을 저장하고, 지원하는 동안 응시한 테스트 또는 답변한 질문에 대해 메모하세요. 모든 직무 설명은 면접에 귀중한 정보가 될 수 있으므로 저장하는 것을 잊지 마세요.

..  👇 더 자세한 내용은 아래 원문에서 확인해주세요.

3️⃣  반응형 웹사이트를 만들기 위한 완벽한 가이드

반응형 웹 디자인은 모든 디바이스 또는 브라우저의 크기와 기능에 맞게 조정되므로 방문자가 항상 최상의 사이트 버전을 볼 수 있습니다. 오늘날 시장에서 사용할 수 있는 장치, 브라우저, 해상도가 너무 다양하기 때문에 반응형 웹 사이트를 만드는 것은 이제 성공적인 사용자 경험을 만드는 데 필수적입니다.

새로운 반응형 프로젝트를 시작하려는 디자이너 또는 웹 제작자라면 하나의 고정된 최종 레이아웃을 구상하기보다 상대적인 크기와 비율로 생각하는 데 적응해야 할 것입니다. 반응형 웹 사이트를 처음부터 끝까지 만드는 방법에 대한 전문가 팁을 읽고 가세요.

반응형 웹사이트를 만드는 방법

1. 와이어프레임 시작하기

반응형 웹사이트를 만드는 과정은 항상 레이아웃 계획 세우기부터 시작되며 초기 레이아웃에 와이어프레임보다 더 좋은 도구는 없습니다. 와이어프레임은 미래 디자인의 도식적 표현이며, 조직적이면서도 충실도가 낮은 방식으로 레이아웃을 구조화하는 편리한 방법입니다.

다음은 와이어프레이밍 시 고려해야 할 몇 가지 중요한 사항입니다.

✔️ WIREFRAME을 광택이 나지 않게 유지합니다.

속도와 단순성은 와이어프레임의 두 가지 주요 속성입니다. 제품 설계의 초기 단계에서 사용자에게 가장 적합한 솔루션을 실험하고 확인해야 합니다. 와이어프레임 픽셀을 완벽하게 만드는 데 추가 시간을 소비하지 마세요. 대신 레이아웃을 생성하고 미학보다는 기능 및 정보 아키텍처에 중점을 두고 대상 고객 및 이해 관계자와 함께 유효성을 검사하세요.

✔️ 다양한 디바이스에 대한 와이어프레임 생성

모바일, 태블릿, 데스크탑은 사람들이 웹을 탐색하는 데 사용하는 가장 일반적인 유형의 장치입니다. 와이어프레임을 생성할 때 세 그룹 모두를 시도하고 주소를 지정하여 디자인이 이들 그룹에 걸쳐 잘 확장되는지 확인하세요.

2. 중단점(breakpoints) 정의하기

중단점은 반응형 디자인의 빌딩 블록으로 반응형 웹 사이트를 만들 때 중요한 단계입니다. 중단점은 방문자가 모든 표시 영역 크기에서 항상 가능한 최상의 사이트 버전을 볼 수 있도록 디자인이 조정되는 픽셀 값입니다.

중단점은 CSS 미디어 쿼리 너비(최소 너비 및 최대 너비) 및 높이(최소 높이 및 최대 높이)로 정의됩니다. 이러한 미디어 쿼리는 특정 미디어 속성이 적용되는 조건을 결정하므로 콘텐츠를 렌더링하는 장치 또는 브라우저 유형에 따라 스타일을 변경할 수 있습니다.

Editor X에서 웹사이트를 구축하는 경우 데스크톱(1,001픽셀 이상), 태블릿(751-1,000픽셀) 및 모바일(350-750픽셀)과 같은 3개의 기본 중단점이 있습니다. 기존 중단점을 편집하거나 코드 없이 프로젝트의 요구 사항에 맞게 사용자 지정 중단점을 추가할 수도 있습니다.

보편적인 중단점 세트는 없지만 선택할 때 따를 수 있는 몇 가지 권장 사항이 있습니다.

가능한 최소한의 중단점 수를 유지하려고 합니다. 디자이너는 중단점과 일치하도록 콘텐츠를 조정해야 하므로 최대 장치 유연성을 위해 약 3개의 중단점을 위해 노력해야 합니다.

중단점을 선택하는 주요 기준은 장치가 아니라 보유하고 있는 콘텐츠여야 합니다. 콘텐츠는 레이아웃이 컨테이너에 맞게 조정되는 방식을 결정해야 합니다.

✔️ 모든 뷰포트에 대한 디자인 커스토마이즈

다양한 중단점에서 표시하거나 숨길 항목에 대해 의도적이어야 합니다. 예를 들어 모바일에서 일반적인 접근 방식은 최상위 탐색 옵션을 숨기고 대신 햄버거 메뉴를 사용하는 것입니다. 이 접근 방식을 사용하면 화면의 공간을 더 많이 절약할 수 있고 콘텐츠 중심의 경험을 할 수 있습니다. 동시에 사용자 경험을 저해할 수 있는 콘텐츠를 숨기지 않도록 합니다. .. 👇 더 자세한 내용은 아래 원문에서 확인해주세요.

..👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램