1주차 - 6/28
6/28 SWOT 분석, 포지셔닝 맵
웹의 개념
웹의 특징
- 그림, 사진, 영상, 텍스트 등의 멀티 미디어를 하이텍스트 방식으로 연결
- HTTP의 특저 규칙에 따라 인터넷을 통해 문서 및 기타 웹 리소스에 참조
적응형 웹
- 특정 뷰포트 크기에 맞게끔 웹 페이지를 만들어서 별도로 제공
- 데스크탑과 모바일을 따로 만들어서 접속하는 디바이스에 맞게 랜딩되어지도록 설계된 웹
- 네이버
- 데스크탑 랩탑으로 진입시 naver.com 웹페이지를 보여주고, 태블릿 모바일로 진입 시 m.naver.com 웹 페이지를 보여줌. 서로 다른 URL -> 디바이스에 따라 화면을 대응
- 네이버는 1%일지라도 접속하는 인원이 많다보니, 제일 작은 모니터를 기준으로 만든다
반응형 웹
- 하나의 웹 페이지가 뷰포트의 크기에 반응하여 크기와 레이아웃이 그때그때 변경되는 디자인
- CSS에서 미디어 쿼리를 활용
- 최소 3개는 만든다
모바일 퍼스트
- 모바일 퍼스트 원칙의 반응형 웹사이트
- 현재의 모바일 유저가 많아져서 모바일을 기준으로 만든다
- 모바일 -> 테블릿 -> 웹
레이아웃 그리드 설정
- 코딩할 때 항상 짝수를 기준으로 숫자를 정해야 함
- Column Grid - 12 Count / Type - Stretch(반응형) / Margin(컨테이너 정한 후에 계산) / Gutter - 20(30)
- 컬럼의 갯수 - 반응형 웹에서는 12, 16을 많이 사용
- 컨테이너 - 디자인이 들어가는 영역, 서비스마다 다름. 디자이너가 서비스의 특성에 따라 다르게 정함
- 거터 - 디자인 컨셉에 따라 넓게 또는 좁게 설정
- 마진 - 전체 컨테이너를 정한 후에 계산. 1920 - 컨테이너 - 마진
- 테블릿
- Column Grid - 8 count / Type - Stretch(반응형) / Margin - 32 / Gutter - 20
- 모바일
- Cloumn Grid - 4 Count / Type - Stretch / Margin 16(20) / Gutter - 12
- 주의할 점
- Gutter - 홀수로 만들지 않는다. 코딩을 할 수 없다. 모바일 디자인에서는 8의 배수, 4의 배수가 좋다
- Gutter에 따라 스타일이 달라보인다. 디자인 컨셉에 따라 거터를 정해야 한다.
브레이크 포인트
- 반응형 웹 사이트를 설계하기 위해서 디바이스 크기에 따라 레이아웃이 변하는 기준점
- 모바일, 테블릿, 데스크톱 3개의 브레이크 포인트를 설정
https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints
플랫폼 선택은 어떻게 할까?
- 모바일 앱
- 스마트폰의 기능이 필요한 경우
- 개인 정보 보호 또는 보안이 필요한 경우
- 다양한 사용자 경험을 제공해야 하는 경우
- 웹
- 저렴한 개발 비용을 고려할 경우
- 빠르게 개발하고 배포해야 하는 경우
자기 SWOT
약점 (Weaknesses)
- 생각이 많다: 생각이 많아 쓸데없는 곳에 시간을 소모할 때가 있다.
- 시간 관리: 효과적인 시간 관리를 위한 전략이 부족하다.
|
강점 (Strengths)
- 학습 열정: 새로운 것을 배우는 것을 좋아하고, 회복탄력성이 좋다.
- 문제 해결 능력: 복잡한 문제를 분석하고 해결할 수 있는 능력이 있다.
- 코딩 능력: HTML, CSS, Javascript 언어와 기술을 다룰 줄 안다.
- 디자인 툴 숙련: 포토샵과 일러스트레이터 등 주요 디자인 소프트웨어를 다룰 줄 안다.
|
위협 (Threats)
- 경쟁 심화: IT 및 디자인 분야에서 잘하고 열정 있는 사람들이 많아 경쟁이 심하다.
- 기술 변화 속도: 기술의 빠른 변화로 인해 지속적인 학습과 적응이 필요하다.
- 불확실한 시장 상황: 경제 상황이나 산업 트렌드의 변화로 인해 취업 및 프로젝트 기회가 불확실할 수 있다.
|
기회 (Opportunities)
- 프로덕트 디자인 교육: UX/UI 스나이퍼 프로그램을 통해 프로덕트 디자인을 배울 수 있는 기회에 참여했다.
- 네트워킹: 디자이너들과 네트워킹할 수 있는 환경이 있으며, 강사님을 통해 새로운 기회를 파악할 수 있다.
- 온라인 자원: 관련 자료와 튜토리얼이 온라인에 많이 있어, 스스로 학습할 수 있는 기회가 많다.
|
모바일 앱 선택과 실행
- 맥락 도구(Contextual Tool): 선택한 항목을 조작할 수 있는 기능이 나타난다
- 롱탭을 했을 때 선택 도구가 나타나는 방식
- 더 보기 아이콘
- 목록 내 활동(In line Action)
- 목록 옆에 기능이 있는 방식, 스와이프로 숨겨진 기능을 호출해서 더보기/플래그/삭제 기능이 나타난다
- 아이폰의 메세지, 카카오톡
- 툴바(Tool Bar)
- 옵션 메뉴(Option Menu)
- 주활동 버튼(Call to Action Button)
- UX 여정상 주 활동을 마무리 짓거나 특정 작업을 완료하는 중요한 버튼
- 다른 버튼보다 강조 되어야 하며 보통 가운데 크게 배치
- 다른 보조 보튼이 있을 경우네는 시각적으로 더 시선을 끌어야 함
- 쿠캣과 마켓컬리 모두 브랜드 컬러 사용
- 상태 변화 버튼
피그마 실습
- Constraints
- 프레임을 기준으로 X,Y 값을 가지는 것
- 반응형 디자인에 활용하기 좋다
- 텍스트를 길게 채워서 확인을 해볼 것
https://wdnote.tistory.com/190