🔖 UXUI 해외 주간 아티클 TOP3

🔖 2023년 6월 3주 TOP3

1️⃣ 위키미디어 프로젝트를 위한 단일 그리드 시스템 설계

2️⃣ 프로덕트 디자이너로서 ChatGPT를 사용하는 10가지 강력한 방법

3️⃣ 빠른 UI 디자인 팁4

1️⃣ 위키미디어 프로젝트를 위한 단일 그리드 시스템 설계

위키미디어 재단에서 처음 일하기 시작했을 때 프로젝트에서 일부 기본 레이아웃을 사용했지만, 기본 레이아웃 그리드 시스템이 없다는 사실에 놀랐습니다.

원래 인쇄 관점에서 그래픽 디자인을 공부했던 시각 디자이너로서 이것은 우리 디자인 툴킷의 기본 부분이 빠진 것처럼 느껴졌습니다.

그리드 시스템이 없으면 항목이 페이지에 있어야 하는 위치를 결정하고 여러 프로젝트에서 시각적 일관성을 유지하는 것이 더 어려울 것입니다.

어쩌면 저는 놀랄 필요가 없었어도 되었을 것 같습니다. 위키피디아는 2001년에 웹, 그리고 확실히 현대적인 웹 디자인이 초기 단계에 있을 때 시작되었습니다.

출시 이후 주요 디자인 패턴은 상대적으로 거의 없었습니다. 실제로 2021년 초에 시작했을 때 Wikipedia의 모양과 느낌을 변경하는 템플릿인 새로운 '스킨'의 마지막 릴리스는 2010년에 배포된 Vector(현재는 Vector Legacy라고 함)였습니다.

레이아웃 그리드 시스템을 웹에 적용하는 방법(CSS Grid와 Flexbox는 아직 개발 초기 단계에 있었고, 제대로 지원되지 않음)이므로 이 릴리스의 일부로 그리드 시스템이 구현되지 않은 것은 놀라운 일이 아닙니다.

나중에 콘텐츠 번역 프로젝트에 구현된 그리드 시스템을 도입하려는 시도가 있었지만, 그리드가 전 세계적으로 적용되지 않도록 기존 프로젝트에 그리드를 개조하는 것이 주요 작업이었을 것입니다.

운 좋게도 재단에 합류했을 때 첫 번째 프로젝트 중 하나는 데스크탑 개선 프로젝트의 시각적 디자인 작업이었습니다. 이것은 12년 만에 처음으로 웹 인터페이스를 대대적으로 재설계하는 일이 될 것이며, 따라서 위키 전체에서 레이아웃에 접근하는 방법을 다시 생각하고 그리드 시스템을 개발할 수 있는 드문 기회가 될 것입니다.

그리드 시스템이란 무엇이며 왜 필요한가요?

그리드는 인쇄된 페이지, 화면 또는 구축 환경이 될 수 있는 공간 내에서 콘텐츠를 구성하기 위한 시스템입니다.

그리드는 공간과 콘텐츠를 탐색하는 데 도움이 되는 시각적 리듬을 생성합니다. 그리드의 중요성을 인식하려면 신문을 읽거나 도시를 걷는 방법을 생각해 보십시오. 특별히 그리드를 의식하지 못할 수도 있지만 그리드가 없으면 콘텐츠를 소비하거나 길을 찾는 능력이 훨씬 더 어려울 것입니다.

최신 사용자 인터페이스 디자인 측면에서 그리드 시스템은 사람들이 사용할 수 있는 매우 다양한 화면 크기에서 유연하지만 일관된 레이아웃을 만들 수 있도록 하는 데 특히 중요합니다.

유동 격자를 사용하여 페이지 너비를 동일한 크기와 간격의 여러 열로 나눌 수 있습니다. 그런 다음 페이지 콘텐츠가 이러한 열에 맞춰 배치되고, 뷰포트가 수평으로 확장/축소될 때 이러한 유동 격자 열이 비례적으로 확장됩니다.

그리드 시스템은 우리 모두가 사용하고 있는 문서화된 구조를 기반으로 디자인 결정을 내릴 수 있게 해주고 결과적으로 보다 효율적이고 일관되게 디자인하는 데 도움이 되기 때문에 디자인 팀에게도 유용한 도구입니다.

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

2️⃣ 프로덕트 디자이너로서 ChatGPT를 사용하는 10가지 강력한 방법

제품 디자이너로서의 효율성을 크게 향상시켜 줄 제가 가장 좋아하는 ChatGPT 프롬프트 목록입니다.

OpenAI의 ChatGPT는 과제 부정 행위에서 제품 구축에 이르기까지 모든 종류의 작업에 사용하는 사람들과 함께 도처에 있습니다. 최근에 나는 빈 캔버스 증후군을 없애고 더 빨리 생각하기 위해 ChatGPT를 사용하기 시작했습니다. 쓰기, 연구, 영감 얻기 및 분석에 사용할 수 있습니다.

다음은 디자이너로서 ChatGPT를 사용하는 10가지 강력한 방법입니다.

1. 기능별 영감 찾기

여러 번 텍스트 기반 AMA 기능과 같은 제품의 특정 기능을 생성하는 작업을 할당받을 수 있습니다. 이 기능이 있는 유사한 제품을 찾고 있다면 관련 옵션 목록을 제공하도록 ChatGPT에 요청하기만 하면 됩니다.

2. 기능 흐름 만들기

기능의 흐름이 궁금하십니까? 앱을 다운로드하고 알아내느라 시간을 보내는 대신 ChatGPT에 물어보는 건 어떨까요?

3. 복잡한 용어 설명

이해하고 싶은 것은 무엇이든 ChatGPT에 물어보세요. 더 잘 이해할 수 있도록 "멍청하게" 또는 "실제 사례로 설명"과 같은 프롬프트를 추가로 사용할 수 있습니다.

4. 사용자 요구 사항 이해

모든 기능에는 다루어야 할 몇 가지 기본 사용자 요구 사항이 있습니다. ChatGPT를 사용하여 목록을 작성하고 디자인하는 동안 체크리스트로 사용하세요.

5. 도구 및 웹사이트 검색

필요에 맞는 도구와 웹사이트를 찾아보세요.

6. AI 이미지 생성기를 위한 더 나은 프롬프트 만들기

현재 모든 AI 도구는 사용자가 제공하는 프롬프트만큼만 우수합니다. ChatGPT를 사용하여 고유한 요구 사항에 대한 자세한 프롬프트를 생성하세요.

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

3️⃣ 빠른 UI 디자인 팁4

카드의 고정 높이 정의

카드 디자인에 접근하는 가장 좋은 방법은 콘텐츠가 적은 카드의 경우 공백을 남겨두고 카드의 콘텐츠가 많은 경우 텍스트가 잘리도록 하여 하나의 높이를 정의하는 것입니다.

계층 제공

명확한 계층 구조를 설정하는 것은 사용자의 주의를 유도하고 콘텐츠 구조를 이해하는 데 필수적입니다.

그에 따라 필드 크기 조정

입력 필드의 길이는 필드에서 예상되는 정보의 양에 비례해야 합니다.

항상 눈에 띄어야하는 기본 CTA

기본 CTA는 사용자가 페이지에서 수행해야 하는 가장 중요한 작업입니다.

레이아웃 아래에 이미지 넣기

이 트릭을 사용하여 페이지 기사에 보다 몰입감 있는 느낌을 줍니다.

강력한 로고 위치

왼쪽 상단 모서리는 사용자가 찾을 것으로 기대하는 UI 디자인의 로고에 대한 일반적인 위치입니다.

자리 표시자를 레이블로 사용하지 않기

자리 표시자가 레이블로 사용되는 경우 특히 필드에 입력해야 하는 정보를 잊어버린 경우 사용자가 자리 표시자 텍스트를 입력으로 착각하기 쉽습니다.

텍스트 링크 제한

너무 많은 텍스트 링크는 사용자가 필요한 정보를 찾기 어렵게 만들 수 있으며 완료하려는 기본 작업에서 주의를 분산시킬 수도 있습니다.

모든 곳에서 선을 사용하지 않기

모든 곳에 선이 사용되면 명확한 시각적 계층 구조가 결여된 일관성 없는 디자인이 생성될 수 있습니다.

긴 형식의 진행률 표시줄 추가

진행률 표시줄은 방문자가 양식에 답변해야 하는 질문의 수를 표시하고 알려줍니다.

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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