UI는 뭐고 UX는 뭔데..
웹디자인 용어 벼락치기
기본 웹페이지 제작 용어
SB(Story Board)
스토리보드
화면 설계서
개발 전 기획자들이 화면 설계를 위해 작성
WBS(Work Breakdown Structure)
작업 분할 구조도 (전체 스케쥴 표)
기획, 디자인 등 파트별로 나눠 세부적으로 스케쥴링하는 것
As-is, To-be
As-is 개선되기 전 현재 상태(구버전)
To-be 개선된 후의 상태(신버전)
Needs
고객의 요구사항
CMS(Contents Manegement System)
전문지식 없이 관리할 수 있도록 웹 에디터를 이용해 사이트를 쉽게 변경할 수 있는 시스템
PG(Pament Gateway)
소액결제 대행서비스
PM(Project Manager)
프로젝트 총괄 책임자
TFT(Task Force Team)
부서별 선별된 인원들이 임시팀을 만들어 활동하는 것
과업지시서
발주업체가 입찰업체에 웹사이트를 제작해달라는 요구사항서
고객이 제작
RFP(Request For Proposal)
제안요청서 발주자가 특정 과제의 수행에 필요한 요구사항(과업지시서)을 체계적으로 정리해 제시하는 서류
Front End
눈에 보이는 부분을 개발하는 영역
예) HTML, CSS, Java
Back End
눈에 보이지않는 부분을 개발하는 영역
예) 서버간의 통신, 데이터베이스, API
구축
신규 웹서비스를 제작하는 것
무에서 유를 창조하는 단계
리뉴얼
기존 서비스를 업그레이드
디자인만 조금 손보는 것
고도화
기존 서비스의 시스템을 업그레이드
백앤드단을 개선
성능(속도, 오류 개선) 개선
유지보수(System Manegemant)
기존서비스를 운영
UX(User Experience)
서비스 또는 제품을 이용하며 사용자가 느끼는 모든 생각과 경험
UX 디자인은 사용자가 웹페이지를 사용할 때의 반응과 행동을 예상하며 사이트 내부를 구성하는 것
사용자의 만족도 향상을 위해 사용자 중심적으로 설계된 디자인
예) 통상적으로 사용되는 익숙한 위치에 검색이나 로그인 버튼을 배치
UI(User Interface)
기능을 편리하게 사용하는 방법
UX구성의 세부 디자인
즉, 사용자에게 보이는 시각적인 부분을 담당
예) 폰트, 컬러, 버튼의 모양, 레이아웃 등 외적인 것
행동 유도성
사용자의 행동을 유도하는 것
예) ‘구매’ 또는 ‘동의’ 버튼에 눈에 띄는 컬러를 입힘, 깜빡이는 효과를 넣어 회원가입을 유도
반응형 웹사이트
웹의 해상도, 레이아웃 등이 휴대폰, 태블릿, 컴퓨터 등 모든 스마트 기기에 최적화되어 유동적으로 변환되는 웹페이지
PC버전, 모바일 버전을 따로 만들지 않아도 되어서 경제적
크로스 브라우징
다양한 컴퓨터 환경이나 브라우저에서 정보를 동일하게 표현하기 위해 필요
인터넷 익스플로러, Opera, FireFox, Mac 운용체계의 Safari에서 동일한 웹이 다르게 표현될 수 있으므로
웹사이트가 브라우저마다 호환되는지를 사전에 테스트해보는 과정
요소
Main/Index 페이지
흔히 메인화면이라고 말함
도메인으로 접속해 처음 뜨는 화면
웹사이트의 첫 화면
Header
상단의 영역
브랜드 로고, 네비게이션바가 위치한 부분을 지칭
Footer
하단의 영역
회사정보, 저작권 정보, 정보보호책임자 등이 위치
Favicon
상단 브라우저 탭 타이틀 옆에 위치한 아이콘
레이아웃
화면 내의 버튼, 배너, 폰트 등 요소들을 효과적으로 배치하는 것
웹사이트의 화면구성과 전반적 배열을 의미
그리드
격자, 바둑판의 눈금
레이아웃을 구현할 때 이용
시각적 직서와 일관성을 유지시키기 위함
GNB(Global Navigation Bar)
웹 페이지 내의 현재 위치와 이동 경로를 모아놓은 영역
보통 웹사이트 메인 상단에 위치하는 메인메뉴를 말함
LNB(Local Navigation Bar)
GNB의 하위 메뉴
메인메뉴 내 세부메뉴
SNB(Serve Navigation Bar)
좌측의 메뉴
서브 메뉴
Tab menu
요즘은 서브 메뉴와 많이 혼용
Location, Bread crums
현재 위치를 알려줌
Tree menu
웹에서는 잘 볼 수 없고 관리 시스템에서 자주 사용
Quick menu
스크롤을 내릴때마다 따라다니는 메뉴
예) 한번에 위로가기, 아래로 가기
Select menu
클릭하면 펼쳐지는 메뉴
예) 생년월일 선택시 주르륵 뜨는 것 1999,2000 등
Depth
뎁스(깊이)
뎁스가 많을수록 홈페이지가 무거워지고 복잡해짐
Visual
광고 배너나 이미지를 넣은 부분
Layer Popup
DRV
화면을 가리며 나오는 팝업
Radio button
동그란 버튼 둘 중 하나를 선택
재 클릭시 해제 불가능
단일 선택
체크박스
클릭하고 해제가 가능
다중 선택
Input
입력
타이핑으로 입력해야하는 요소
Icon
의미가 있음
예) O/X, 삼각형(아래로 이동)
Bullet
의미가 없음
예) 약관 내 '·' (리스트 분리를 위할 뿐)
언어
언어(Programming Language)
컴퓨터에게 명령이나 연산을 시킬 목적으로 설계되어 기계와 의사소통을 할 수 있게 해주는 언어
HTML
가장 단순한 형태의 웹 언어
하이퍼텍스트()를 작성하기 위해 개발되었으며, 웹 문서를 만들고 이동하기 위해 사용됨
CSS
웹 문서의 전반적 스타일을 나타내는 시트
HTML은 기본적인 것을 구축하고 그것을 꾸며주는 언어
Java script
자바 스크립트
웹 페이지를 살아 움직이게 만들어주는, 동적 모션을 넣어주는 스크립트 언어
웹 퍼블리싱
디자이너로부터 전달받은 시안을 브라우저에 적용시키기 위해 HTML, CSS, JS등을 이용한 코딩작업
기타
SEO (Search-Engine Optimization)
검색엔진 최적화
자료 수집 및 순위를 매기는 방식에 맞게 검색 결과 상위 노출을 하는 작업
구글 에널리틱스
구글의 웹분석 서비스
웹사이트 트래픽을 추적해 보고해주는 서비스
웹 호스팅
웹 서버를 빌리는 서비스로 웹사이트 호스팅 서비스를 통해 운영됨
웹 서버
브라우저에 코드, 이미지, 데이터베이스를 저장하는 공간
도메인
사이트 주소
예) 다음 www.daum.co.kr
*추가로 들었던 의문 '.com, .co.kr의 차이점'은?
약자로 끝나는 도메인: .com
.com: compony 기업
.net: network 네트워크 관련 기업
.org: organization 기관
.gov: governance 정부 관련
.rec: research 연구소
국가코드로 끝나는 도메인: .co.kr(Korea)
