웹디자인#3
LeeMir, 09 March 2021
2강 - 웹사이트 개발 프로세스 이해
웹 사이트 개발 프로세스
- 7단계 프로세스
- 프로젝트 계획 수립
- 분석
- 콘텐츠 구성
- 인포메이션 아키텍처
- 디자인
- 개발/제작
- 테스트 런칭
- 크게 분석 => 설계 => 구현의 순서로 이루어짐
- 분석
- 요구사항 분석
- 벤치마킹
- 기능, 정책 정의(문서 작성)
- 일정 산출
- 설계
- 사이트 구조 설계
- 사이트 맵 작성(★)
- 화면 설계
- 화면 정의서 작성(★★)
- 구현
- 디자인
- 퍼블리싱
- 개발
- 테스트
- 웹사이트 오픈
- 이후 약 1년간 모니터링
- 분석
웹 디자인 개발 프로세스
- 콘셉트 정의
- 클라이언트로부터 어떤 콘셉트로 디자인할 지 상의
- 프로토타이핑
- 디자인 시안 제작
- 시안을 여러개 제작하되, 클라이언트에게는 2~3가지를 제시할 것
- 1차 클라이언트 평가
- 디자인 시안 제작
- 스타일 설정
- 프로토타이핑에서 한 평가에서 피드백을 받아 베리에이션 진행
- 2차 클라이언트 평가
- 3차, 4차로 이어질 수 있음
- 시안을 많이 제시하지 않아야 클라이언트의 빠른 결정을 도울 수 있음
- 최종 디자인으로 템플릿 제작
- 템플릿 디자인
- 템플릿 가이드 제작
- 레이아웃, 색상, 폰트
- HTML 코딩
웹 사이트 개발 인력
- 웹 기획자
- 클라이언트 뿐 아니라 모든 개발 인력들과 컨택하면서 총괄
- 화면정의서(스토리보드)를 작성
- PPT로 제작, 색상과 폰트 같은 디자인적인 요소는 절대 들어가지 않음
- 오로지 텍스트와 라인
- 웹 디자이너
- Photoshop, AdobeXD, Sketch 등 프로그램을 이용해 화면을 디자인
- 디자인 감각과 디자인 기술이 중요
- 기획자, 개발자 등과 이야기할 일이 많아 커뮤니케이션 능력이 있어야 함
- 웹 퍼블리셔
- 홈페이지의 UI를 제작
- HTML, CSS, JS, jQuery 등을 사용해 문서를 작성
- 프론트엔드
- 웹 프로그래머
- 백 엔드 개발자
- 웹서버 구축 및 사용자 DB를 효율적으로 웹으로 연동할 수 있는 기술 뿐 아니라 DBMS(DataBase Management System)의 환경을 이해하고 있어야 한다
- PHP, ASP, JSP, C, JAVA 등을 사용해 웹 브라우저와 서버가 소통하는 체계를 만든다
웹 디자이너의 역할
- 메인 디자이너 : 경력자
- 비주얼 콘셉트를 정의하고 콘셉트에 맞는 메인 화면을 주로 디자인하며, 메인 디자인과 디자인 스타일 가이드를 정리
- 서브 디자이너 : 신입(3년 이내 경력)
- 메인 디자이너의 보조적인 역할을 진행하며, 디자인 스타일 가이드를 바탕으로 베리에이션 작업을 진행
- 퍼블리셔
- 퍼블리셔가 따로 있는 회사라면 코딩은 퍼블리셔가 한다
웹 디자인의 역사
- 초창기 웹사이트
- 1991년, CUI
- 웹 디자인의 시작
- GUI
- 자바 스크립트의 등장
- 정적 사이트
- 플래시의 보편화
- CSS의 보급
- 반응형 웹 디자인의 출현
- Mobile First
웹 디자인의 기능
- 디자인의 목표는 ‘미’와 ‘기능’
- 미적 측면과 기능적 측면을 동시에 만족시켜야 함
- 쉬운 정보 전달
- 중요한 정보를 사용자가 더 빠르고 쉽게 이용할 수 있도록 유도하는 가시성 있는 웹 디자인을 구현해야 함
- 높은 사용 편의성
- 웹 디자인은 사용자 중심으로 설계되어야 하며 그만큼 사용 편의성도 높아야 함
- 사용자 참여 유도
- 웹 사이트는 웹 2.0(현재 4.0)부터 대화가 가능한 양방향 매체
- 시각적 즐거움 제공
- 사용자가 오래 머무르게 하는 것이 유리
- 긍정적 인상 제공
- 웹 디자인은 웹 사이트의 콘텐츠에 맞는 인상을 불어넣어 콘텐츠 가치를 높여야 한다
웹 디자인 요소
- 정보 디자인 요소
- 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 돕는 것
- 네이게이션(Nav) 디자인, 폼(Form) 디자인, 아이콘 레이블(Label)
- 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 돕는 것
- 기술 디자인 요소
- 웹 디자인은 다른 분야 디자인보다 빠른 기술 습득력이 중요
- 새로운 기술을 반영한 디자인을 해야하기 때문
- 기술 디자인은 웹 디자인을 구현하는 데 필요한 기술을 습득하고, 습득한 기술을 반영한 디자인을 뜻함
- 로딩 속도와 상호작용
- 비트맵 이미지와 벡터 이미지
- SVG 이미지가 대세
- 웹에서 쓰는 이미지는 72ppi가 적당하고, 인쇄물은 300dpi가 적당하다.
- 파일 형식과 컬러 모드
- 웹 디자인은 다른 분야 디자인보다 빠른 기술 습득력이 중요
- 시각 디자인 요소
- 웹 디자인은 정보 제공과 기술적인 요소도 중요하지만 심미적인 요소도 중요
- 타깃 사용자가 선호하며 감성을 자극하는 디자인을 제공하면 많은 사람들이 찾는 웹 사이트가 될 것임
- 디자인 스타일과 함께 가독성, 여백, 비례 등도 웹 디자인의 중요한 시각 디자인 요소
- 파노라마 배경 이미지(패럴랙스 스크롤링)
- 시네마 그래프
- 이미지와 글자 혼합 형식
- 이미지가 잘 보이는지, 글자가 잘 읽히는지, 전달하려는 메시지가 잘 전달되는지