이력서 관련 내용이 가장 도움이 되었다. 이력서를 한장으로 만드는것에 대해선 알았지만,
경력별, 직업별로 어떻게 효과적으로 구성할지 고민이 되었었다. 직종을 막론하고 도움이 될듯.
뿐만 아니라, 동료 평가를 하면서 다른 사람들의 UX에 관한 열정과 문제해결 흐름을 알게되어서 의미있었다.
또한 영어 단어 유사어로 고급지게 바꿔주는 사이트를 알게되어서 좋았다ㅎㅎ
구글 UX 자격증 - 웹사이트를 위한 동적 사용자 인터페이스(UI) 구축
2023/11/28
모듈 1
1. 반응형 디자인/앱
기기의 사이즈에 따라 자동으로 웹사이트가 변경됨
=> 각각의 요소가 다른 스크린 사이즈에서 어떻게 반응할지 고려
노트북과 데스크탑의 경우 다른 일반적인 높이는 768px, 900px, 1080px 및 1440px입니다.
접힌 부분의 평균은 800px입니다.
a. 장점
- 만들기에 빠르고 쌈
- 다운로드가 필요없음
- 반응형
b. 단점
- 인터넷 연결 필요
- 찾기 힘들 수 있음
- 유지보수가 어려울수도 (모든 디바이스에 적용해야함)
1-1. 전용 모바일 앱 (네이티브 모바일 앱)
실제 모바일 기기에 들어가고 폰 스크린아이콘을 통해 접속
a. 장점
- 인터넷 접속을 요구하지 않음
- 음성, 카메라, 위치 서비스와 같은 핸드폰 내장 기능을 사용함
- 디자인에 자유 (제스쳐, 애니메이션)
b. 단점
- 구축하기에 비쌈
- 모바일 기기 플랫폼에 따라 다른 버전을 만들어야함
- 장치의 저장용량을 필요함
2. 웹사이트 정보 아키텍쳐 계획
정보 아키텍쳐: 그들이 제품이 어디에 있는지, 원하는 정보가 어디에 있는지 사용자들이 이해하기 위해
콘텐츠를 조직화하기
a. 중요한이유
- 웹사이트의 구조를 조직화하고 정의함
- 제품의 높은 레벨의 뷰를 제공
- 이해관계자가 디자인을 리뷰하게 도와줌
- 데이터를 어떻게 정렬하는지 이해하도록 도와줌
- 디자인을 성장하고 이터레이트하게 도와줌
2-1. 일반적인 웹사이트 구조
구조
- 하이라키, 시퀀스, 매트릭스, 데이터베이스
a. 하이라키 모델: 정보의 넓은 카태고리(부모)-자세한 정보(자식)로 좁혀가는 탑다운 방식
b. 시퀀스 모델: 스텝바이스텝 과정으로 유저가 거쳐가게 해주는 웹사이트 구조
c. 매트릭스: 콘텐츠가 여러 방향으로 연결되어 있어서 사용자는 그들의 길을 따름
d. 데이터 베이스: 서치기능(해시태그)처럼 정보의 구조화된 모음으로 데이터 베이스를 믹스한 구조
웹사이트 구조 모델의 좋은점
- 사용자 기대를 충족함
- 네비게이션 증대 **제일 중요**
- 테스트와 효율
- 웹사이트를 더욱 빠르게 제작
3. 사이트맵란?
어떻게 페이지가 우선순위가 매겨지고, 링크되고, 레이블 붙는지에 대한 다이어그램
=> 어떤 페이지의 연결성을 요하는 지 확인
=> 전체 흐름 확인
=> 접근성을 위해 중요
3-1. 사이트맵 구축하기
[구축 방법]
- 웹페이지에서 찾을 수 있는 페이지 생각
- 경쟁사 웹페이지 확인
- 사용자의 정보를 다시 생각해보기
- 홈페이지부터 시작하기 (첫 시작)
- 메인 콘텐츠의 카테고리명 명명하기
- 차일드 페이지라 불리는 하위 페이지명명
- 추가아티클
- How to create a UX Sitemap: a simple guideline
- Sitemaps & Information Architecture (IA)
=>불필요하고 중복적인 컨텐츠 제거
=> 사용자 멘탈 모델 고려, 작업완료의 단계를 최소화 하기, 변경사항이 있을시 꾸준한 업데이트
- 5 Visual Sitemap Examples for Website Designs
=> 시각 템플릿 제공 5가지
4. 웹사이트 레이아웃
- 싱글 컬럼 레이아웃: 모바일 => 좁고 여러열 콘텐츠 불가, 시선흐름 위-> 아래
- 멀티 컬럼 레이아웃: 명백한 초점(focal point)가 있어, 유저의 관심을 끌기위한 구분되는 영역임
(예. 상단 배너 이미지를 강조) 예시 사이트 파이낸셜 타임즈
- 박스 레이아웃: 다양한 사이즈와 비율의 박스와 네모상자를 포함함
- 피쳐 이미지 레이아윳: 전체 사이트에서 하나의 이미지/영상 강조하여 감정을 불러일으킴 + 상단 탭 고정이 많음 => 하이퀄리티 예시 노르웨이사이트
- 비대칭 레이라웃: 페이지의 양쪽이 발란스가 부족한 레이아웃 (예. F쉐이프 레이아웃, Z쉐입 레이아웃)
-카드 그리드 레이아웃: 모두 동일한 카드 그리드
- 계층 레이어 케이크 레이아웃: 여러개의 열, 레이아웃으로 쌓임 (투 칼럼, 다른 두가지 레이아웃을 여러개 쌓음)
=> 예시 QFC 외식몰
5. 와이어프레임
- 먼저 각 페이지마다 필요한 정보를 모으기
- 5가지의 다른 레이아웃으로 작성하기
- 상자와 엑스 라인으로 컨텐츠 표현하기
[체크리스트]
- 플레이스 홀더 되었나?
- 여러개의 요소중 좋은 요소만 뽑았나?
- 여러 화면의 접근성 고려하였나?
- 더 작은 화면의 크기에 맞춰 작업하였나?
6. 반응형 레이아웃 그리기
- 사용성을 늘림
- 좋은 UX를 제공해줌
- 모바일 트래픽을 일으킴
- 돈과 시간을 아낌
a. 햄버거 메뉴: 콘텐츠에 집중하고 네비게이션을 숨김
b. 카드: 관련 정보를 빠르게 스캔, 하이라키를 나타냄
c. 캐러셀: 빠르게 정보를 살펴봄, 많은 이미지 제공
d.CTA: 클릭 유도하는 대화영 버튼
6-1. 아티클
=> [장점]
- 더 많은 모바일 장치를 통한 접근, 하나의 버전으로 리소스 절약, 검색 엔진이 더 나은 위치 검색 제공 SEO개선, 디자인 일관성
- CSS를 통한 미디어 쿼리 320~767/1023~768/1024 자동 조정
- 모바일 우선으로 작업
- SVG 벡터 그래픽 사용
- 장치는 3개 고려
- 사용자 상황에 맞게 콘텐츠릐 우선순위 지정
- 글꼴을 통해 접근성 높이기
11 powerful examples of responsive web design
마이크로 소프트 Responsive design techniques
UWP를 통해 모든 장치에 대응 하는 => 해당 기기에서만 사용가능한 기능, 각 디스플레이별 다른 입력 기능
리포지션(수직 관계로 쌓이기), 크기 조정, 리플로, 표시, 특정 UI 숨기기, 인터페이스 전환, 분기처리 재설계
5 UI Patterns: Navigation That Makes Good UX Sense
웹: 드롭다운, 앱: 햄버거, 상단 고정위치 네비게이션, 메가메뉴
Navigation design: Almost everything you need to know
의미 있는 라벨로 SEO를 강화하고 관련성 높은 정보를 제공
7. 디지털 와이어프레임 전환
[진행하기전 고려요소]
- 목표로 하는 아이디어가 있는가?
- 동료나 매니저에서 종이 와이어프레임에 관한 피드백을 받았는가?
- 기초적인 시각 요소를 고려완료 했는가?
8. 접근성 향상을 위해 와이어프레임 개선
- 헤딩: 단락, 아티클, 세션의 처음의 눈에 띄는 타이블, 서브타이틀
- 랜드마크: 인터페이스의 영역을 알려주는 기능(예. 네비게이션, 서치박스, 푸터 등등)
- 최초 포커스: 그들이 문제를 완료하기 위해 어떻게 유저의 관심을 끌지? => 맨 처음 주요 관심을 끌기
9. 게슈탈트 사용하기
사물을 받아드릴 때 유사한 요소 그룹짓기, 패턴을 인지하기, 복잡한 이미지 단순화하기
- similarity: 유사한 요소는 같은 기능을 할거라 예상
- proximity: 근접한 그룹끼리 비슷한 기능
- common reigion: 공통영역은 비슷한 기역
[강의 후기]
It was nice to explore media queries in detail for the responsive web. The previous company also produced two versions of the mobile and web in a reactive manner because it was a hybrid web app. Even with the same function, the UI to be shown is different depending on the display. Since the 'display' tag was blocked in CSS', it can be said that it was 'branched'.
모듈 2
1. 충실도 낮은 프로토타입
- 로우파이: 어떻게 프로덕트가 보이고 행동할지에 대한 기본 아이디어 구조
- 하이파이: 최종 제품의 룩앤 필과 매치되고 기능성을 보여주는 다듬어진 디자인
2. 와이어프레임
- 제품이나 화면의 아웃라인이나 스케치
- 목업: 최종 제품을 나타내기 위한 하이파이 디자인
3. 디자인시스템
미리 세운 기준에 따라 팀이 디자인하고 개발할수 있는 재사용가능한 요소와 가이드라인
[키요소]
콤포넌트, 컬러, 아이콘, 레이아웃, 카피, 애니메이션, 타이포, elevation, 일러스트레이션
[디자인 시스템]
- 비쥬얼 스타일: 일관성 제공, UX증가
- 가이드 라인: 디자인 원칙, 편집 원칙, 실행 => 어떻게 요소나 스타일이 쓰여야하는지 명확한 룰
- UI 콤포넌트: 기능의 연속성 제공 : 제스쳐, 기능 등
- 개발자를 위한 서포트 코드: : 요소나 콤포넌트를 위해
3-1. 디자인 시스템의 이점
- 디자이너와 유저를 위한 연속성을 제공
- 브랜드 아이덴티티 강조
- 규모의 디자인을 가능
- 효율성 증대로 시간과 돈을 아낌
4. 프로토타입
기능적으로 증명하기 위한 초기 모델
- 로우파이: 콘텐츠 대체자를 쓰는 상호작용 버전
- 하이파이: 최종 제품과 룩앤필이 동일한 구체적인 상호작용버전
=> 비쥬얼 요소: 실제와 유사하게 진행
=> 네비게이션: 맞는 방향설정과 안내가 맞는지?
=> 인터렉션
[의문 가지기]
- 사용자가 한 화면에서 다른 화면으로 어떻게 가는지?
- 뒤로가기 버튼처럼 어떻게 아이콘이랑 네비게이션이랑 놓여있는지?
- 어떤 포인트에서 유저 저니가 끝나는지?
4-1. 프로토타입 제작방식
- 목업의 레이아웃 제작
- 스크린을 연결하기
- 인터렉션 디테일 만들기
- 애니메이션 적용하기
- 모든 스크린을 완료하기
- 작업을 공유하기
4-2. 프로토타입 웹접근성을 위해 주석 달기
- WCAG web content acessibility guidelines
: 장애인들에게 어떻게 웹 콘텐츠를 더 접근성 있게 만들건지 설명
- 주석 만들기 CTA버튼과 같이 주석
- 표준 탐색 순서인 왼쪽위-> 오른쪽 아래를 벅어나는 항목은 주석 첨가
=> 횡단순서/횡류 (travesal order): 앱이나 웹의 네비게이션 플로우
- 위계있는 구조: 스크린 리더가 구조를 빠르게 파악 h1, h2와 같은 헤딩을 통해
- 레이블 사용하기: 콘트롤하는 요소의 이유를 안내
- 색상대비: 색명 유의, 대비 유의 => WEBAIM
[아티클]
Home - The A11Y Project
The A11Y Project is a community-driven effort to make digital accessibility easier.
www.a11yproject.com
모듈 3
1. 엔지니어 팀과 협력
- 프론트엔드 개발자: 유저가 만나는 인터페이스를 위한 코드 작성
- 백엔드 개발자: UX 사이트맵과 기능을 위해 웹사이트 구조와 데이터 저장 및 대생을 위한 코드 작성
[최종 판단]
- 디자인이 실제로 사용할 유저 경험을 대변하는가?
- 최종 에셋으로 텍스트, 아이콘, 이미지가 대체 되었는가?
- 외부적 가이드 라인이 없이도 유저나 참여가자 디자인을 해석하고 상호작용할 수 있는가?
2. 포트폴리오 프로젝트 추가
a. 케이스 스터디: 디자인 프로젝트 요약
- 프로젝트 목표와 목적
- 프로젝트내에서 역할
- 팀이 따른 과정
- 프로젝트의 결과
- 타겟유저
- 리서치와 얻은 결과물
- 스케치와 와이어 프레임
- 완성된 결과물
- 주요한 챌린지
- 무엇을 배웠는지?
3. UX 디자이너로서 피드백 수용
- 다른 디자이너의 프로젝트에 대해 내 의견을 공유하는게 편안한가?
- 나의 디자인에 대해 멤버들에게 피드백을 정기적으로 주고 받는가?
3-1. 피드백 수용의 좋은점
- 디자인 개선 => 이전에 고려할 수 없었던 제안
- 자신감과 스킬을 만듬
- 디자이너로서 나의 시야를 넓힘 => 나의 편견을 없애며 챌린지를 해결내감
3-2. 피드백을 주는 방법
- 각 상황을 적용하기 => 그들의 배경과 경험을 생각
- 피드백을 지지할만한 이유가 있음 => why를 전달하기
- 솔루션이 아니라 디자인에 대한 피드백 제공
3-3. 디자인 크리틱의 기본
디자인 크리틱: 작업에 대한 피드백을 듣기위해 UX 디자이너들이 계획한 기간
=> 명확한 목적과 좋은 준비가 있다면 유용함
a. 퍼실리에이터: 크리틱 세션을 진행하고 프로세스를 가이드함 => 모든 사람이 참여하도록 노력
b. 프레젠터: 다른 사람들과 업무를 공유하는 디자이너
c. 리뷰어: 디자인에 대한 피드백을 주고 명확한 행동을 제공함
d. 노트작성자: 아이디어와 피드백을 기록
[진행방식]
- 퍼실리에이터가 디자인 크리틱 개괄 전달, 목표 정의, 목적 안내
- 프레젠터가 디자인 일을 공유함
- 리뷰어들이 피드백하기
- 크리틱세션 랩업하기
=> 관련없는 내용은 패스, 시간 지키키
=> 효과 있는 것과 없는 것을 구체적으로 설명하기, 문제 해결이아닌 방향 제안으로 진행
3-4. 크리틱의 모범사례
[좋은 문제]
- 누굴위하여 디자인하였나?
- 어떤 문제를 해결하려 하나?
- 어떻게 너의 디자인이 풀렸는지? 안풀렸는지?
- 어떤 프로세스에 있는지?
- 너의 디자인의 어떤 부분에서 어떤 피드백을 받기위함건지?
[좋은 반응]
- 피드백을 받고, 명확하게 요구할건지 답변할건지?
- 활달한 듣기에 집중하기
- 세션후에 행동할 준비하기
[프레젠터 피드백 받기]
- 프레젠터가 활동적으로 듣고 있는지?
- 프레젠터가 노트를 하고 있는지?
- 프레젠터가 묻는 후속질문의 타입은?
[피드백 주는 방법]
- 그들의 피드백에 적절한 이유를 공유하는지?
- 솔루션을 제안하기 보다는 디자인 문제를 해결하는데에 집중하고 있는지?
- 크리틱의 목적과 맞는 피드백을 하고 있는지?
3-5. 피드백을 실제 행동으로 변경
- 크리틱에 적은 세션
- 어떻게 디자인 피드백을 종합적으로 다룰것인가?
- 나의 디자인이나 유저 경험을 향상시키기 위해서 어떻게 행동을 취할것인가?
모듈 4
1. UX 디자이너의 일
a. 제너럴리스트: 다양한 책임을 가짐
b. 스페셜리스트: 특정한 UX 디자인 롤을 깊게 파고들음
- 인터렉션 디자인 잡의 키워드
유저플로우, 와이어프레임, 인터페이스 목업, 프로토타입
-비쥬얼 디자이너
프로덕트, 기술이 어떻게 보이는지 집중: 아이콘, 타이포, 컬러, 스페이스, 레이아웃, 브랜드
- 모션 디자이너
페이지들 간의 부드러운 트랜지션에 관하여: 트랜지션, 애니메이션
-UI 디자이너
디지털 인터페이스의 모습과 기능 고려
- 프로덕트 디자이너
비쥬얼, 인터렉션 디자인을 정부 작업하면서, 어떻게 전체 프로덕트가 함께 맞물려 돌아가는지에 대한 책임
2.잡서치: 외국의 잡서치 방식 흥미로움...
- 직접 지원
- 디자인포굿
- 프리랜서
- 미디엄, eventbtie, 밋업
- 퍼스널 워킹: 가족, 친구, 친구, 이전 동료와 매니저
- 컨퍼런스, 취업박람회
3. 트래커 만들기
- 회사 이름
- 위치 또는 통근
- 회사 웹사이트 링크
- 연락 지점, 메모 또는 지원 활동
- 회사의 종류
- 회사나 직무를 다른 회사나 직무와 구별하는 데 도움이 될 수 있는 추가 참고사항
4. 키워드 작업
직업에 대한 특정 키워드를 말함 => 이력서에 강조하기
5. 이력서
컨텍 포인트, 교육, 직업 경력, 스킬 작성, 수상, 관심사
=> **한장으로 마무리하기
=> 중요한 성취를 작성하기
- 포트폴리오와 연결하기
- 전문 네트워킹 페이지 연결하기
- 특정 직업에 맞는 이력서 만들기
=> 자신만의 로고를 만든게 귀여움
[이력서 참고 사이트]
- 10 Amazing Designer Resumes that Passed Google’s Bar
=> 자신만의 로고를 사용, 한장으로 끝냄
- Create Your Resume for Google: Tips and Advice
**=> 직종에 상관 없이 효과적인 이력서 안내 **
- Create a professional resume 어도비에서 제공
=> 인디자인 형식으로 제공해줘서 활용도는 낮을 듯
-The 100 InDesign Resume Templates You Need in 2023
=> 실제 제공되는 내용이 부족함?? 음..
5-1. 이력서 조언
- UX 디자인이 아니더라도 리더쉽 기회가 있었던 포인트에 대해 적기
- 포트폴리오 링크를 이력서에 첨부하기
- 디자인 프로세스, 디자인 문제, 디자인 창의성 => 문제를 어떻게 생각하고 어떻게 해결하려 했는지 중요
- 내가 한것, 어떻게 협동했는지, 해당 롤에서 무엇을 이루었는지?
5-2. 직무 설명기반으로 이력서 업데이트
- 각 회사에 맞춘 이력서 제작
- 잡 디스크립션에 스킬이랑 업무 책임을 확인하기
- 회사명, 직급명 명확하게 구분해서 이력서 정리해두기
**유의어 유사어 영어에서 변경해주는 사이트**
Thesaurus.com - The world's favorite online thesaurus!
Thesaurus.com is the world’s largest and most trusted online thesaurus for 25+ years. Join millions of people and grow your mastery of the English language.
www.thesaurus.com
'UXUI' 카테고리의 다른 글
| 구글 UX 자격증 - 사회적으로 좋은 사용자 디자인과 직업 준비하기 (2) (0) | 2023.12.02 |
|---|---|
| 구글 UX 자격증 - 사회적으로 좋은 사용자 디자인과 직업 준비하기 (1) (0) | 2023.12.01 |
| 구글 UX 자격증 - hi-fi 디자인과 프로토타입을 피그마에서 구현하기 (0) | 2023.11.22 |
| 구글 UX 자격증 - 리서치 스터디 계획하기 (0) | 2023.11.13 |
| 구글 UX 자격증 - 와이어 프레임과 low-fi 프로토타입 만들기 (0) | 2023.11.08 |