UXUI

1 60·30·10 비율이란 색을 고르는 일만큼 어디에 얼마나 칠하느냐가 중요하다. 방을 꾸밀 때 벽은 넓게 한 가지 톤으로, 가구는 그보다 적게, 쿼션·액자 같은 소품은 포인트로 조금만 쓰는 것과 같다. 화면도 색의 면적을 이 비율로 나눈다. 비율 이름 칠하는 곳 60% 바탕 배경·가장 넓은 면. 연한 중립색 30% 보조 카드·구역 같은 큰 덩어리. 흰색·연회색 10% 강조 … 더 읽기

▪ 만들 것 웹사이트 한 곳을 6개 항목으로 평가해 칸을 모두 채운 벤치마킹 보고서 1건. ▪ 왜 하는가 벤치마킹은 경쟁 사이트를 여러 관점에서 같은 기준으로 비교 분석해, 내 서비스를 어떻게 다르게 만들지 정하는 조사다. 콘텐츠·화면 구조·디자인·홍보처럼 항목을 나눠 경쟁 사이트를 살펴보면, 그들이 잘하는 점과 부족한 점이 항목마다 드러난다. 그 차이에서 내 서비스가 따라갈 점과 다르게 … 더 읽기

▪ 만들 것 1차시 벤치마킹에서 찾은 차별화를 바탕으로 정한 콘셉트 한 문장과 톤&매너(색·글꼴·이미지 느낌)를 한 장에 모은 디자인 방향성 시트 1건. ▪ 왜 하는가 벤치마킹에서 따라갈 점과 다르게 갈 점을 찾았다면, 다음은 그 방향을 실제 디자인 언어로 옮기는 일이다. 사이트가 어떤 한 가지 방향(콘셉트)으로 가는지, 색과 글꼴과 이미지가 어떤 느낌(톤&매너)인지 먼저 정해 두면, 이후 설계와 … 더 읽기

▪ 만들 것 4차시 와이어프레임·스토리보드에 톤&매너를 입혀 마감한 디자인과, 그것을 옮긴, 웹표준을 지킨 반응형 바닐라 홈 화면(index.html·style.css·script.js 세 파일). ▪ 왜 하는가 설계까지 끝냈다면, 마지막은 화면을 실제로 보이게 만들고 코드로 옮기는 일이다. 와이어프레임은 골조였고, 여기에 2차시 톤&매너(색·글꼴)를 입히면 디자인이 된다. 그 디자인을 생성형 AI 도구로 코드로 옮기면, 브라우저에서 도는 웹이 된다. 기획부터 구현까지 한 줄로 … 더 읽기

▪ 만들 것 사이트에 담을 내용을 비슷한 것끼리 묶고 메뉴 이름을 붙여, 홈 아래 대메뉴와 하위 메뉴를 계층으로 그린 정보구조도 1건. ▪ 왜 하는가 콘셉트와 톤&매너로 방향을 정했다면, 다음은 사이트에 무엇을 어떻게 담을지 골대를 세우는 일이다. 정보구조는 집을 지을 때 먼저 그리는 설계도면과 같다. 내용을 아무렇게나 나열하면 사용자가 원하는 것을 찾지 못한다. 비슷한 내용을 묶고 … 더 읽기

1. 기획은 왜 필요한가 눈에 보이는 서비스와 화면은 결과물일 뿐이다. 그 아래에는 보이지 않는 준비 과정이 있다. 빙산: 수면 위에 떠 있는 부분이 서비스·디자인이라면, 그것을 떠받치는 수면 아래의 큰 덩어리가 기획이다. 집짓기: 집을 지으려면 영향을 주는 여러 요소와 변수를 미리 꼼꼼히 점검하고 계획해야 한다. 기획 없이 만들면 결과물이 흔들린다. 무엇을, 왜, 어떻게 할지를 먼저 정해 … 더 읽기