0
PORT
FOLIO

A Space to Future's Publisher

스크롤을 내려주세요!

About

소개 이미지

꿈을 설계하고 디자인 하다.

안녕하세요! 웹스토리보이입니다. 저는 공간을 만드는 것을 좋아합니다. 단 하사람이라도 제가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠습니다. 웹 사이트라는 공간은 상상을 넘어 우리에게 많은 창의력과 영감을 줍니다. 이러한 공간에서 다 같이 꿈을 꾸고 열정적인 엔지니어가 됐으면 좋겠습니다.

이 사이트는 웹스토리보이와 함께 포트폴리오를 완성하고 다같이 정보를 공유하는 사이트입니다. 스터디와 포트폴리오 강의는 매달 강남에서 열리며, 한달에 한번씩 모집합니다. 포트폴리오 강의는 포트폴리오를 만들기 위한 스킬을 배우는 강의이며, 기존에 학원에서 배우지 못한 중급 이상의 기술과 포트폴리오의 퀄리티를 높이는 강의입니다. 포트폴리오 스터디는 혼자서 만들기 힘든 포트폴리오를 도와주는 스터디입니다. 초보 단계에서 느낌는 어려움을 스터디를 통해 해결 할 수 있습니다. 혼자서 하면 힘들 수 있지만 다 같이 하면 좀 더 수월 할 수 있습니다.

웹스토리보이와 같이 포트폴리오를 완성하려면 첫째 유튜브에 공유된 웹표준 사이트 만들기, 반응형 사이트 만들기, 메가박스 사이트 만들기 영상을 보고, 포트폴리오 강의를 들으면서 스터디 하는 것을 추천합니다. 아직 우리는 부족한게 많고 가야할 길이 많이 남았지만 우리의 꿈을 위해 노력한다면 언젠간 99%의 실력이 될 것입니다.

  • 99HTML
  • 99CSS
  • 99Javascript
  • 99jQuery
passion led
us here

Project

UI.UX DESIGN/UI 구현

UI 구현

UI 설계 검토하기

UI 디자인 가이드 이해

UI 제작을 위하여 UI 디자인 가이드를 이해하고 이를 기반으로 구현 가능성 여부를 학습 목표 검토할 수 있다.
구현 환경에 따라서 구체적인 UI 프로세스의 이해와 설계 변경 여부를 파악할 수 있다

UI 디자인 가이드에 대한 이해

UI 디자인 가이드의 정의

UI 디자인가이드는 UX기획, UI디자인이 완료된 화면을 토대로 해당 프로젝트의 화면 구현과 실물 개발에 필요한 이미지 리소스, 텍스트 크기, 기타 컴포넌트의 속성 및 위치 등을 정리한 문서이다.

  • UI 디자인의 목적은 사용자의 사용성을 높이기 위해 시간 및 조작의 흐름과 심미 성까지 고려하여 사용의 편리성과 접근성을 높이는데 있다.
  • UI 디자인 가이드 기본 원칙
    • 효율적인 업무지원이 되게 설계해야 한다.
    • 입력의 사용성을 높여야 한다.
    • 이해하기 쉽게 디자인해야 한다.
    • 시각적으로 간결하게 디자인해야 한다.
  • UI 디자인 가이드의 요소
    • 사용자 경험에 대한 정의
    • 서비스의 핵심기능
    • 호환성과 확장성
    • 정보소외 계층의 접근성
    • UI 디자인과 레이아웃 일관성
    • 이미지 사용에 대한 지침

완성된 디자인을 각각의 구성요소의 해당되는 영역을 자르고(컷팅), 그 이미지 소스에 대한 위치 값과 크기 값을 표시한다.

UI 디자인 가이드의 필요성

UI 디자인 가이드는 UI 디자인을 개발하기 위한 설명서, 즉 개발자와 디자인 실무자를 연 결해주는 일종의 협업 도구이다. 업무의 효율성을 향상할 목적으로 UI 디자인에 따른 규 칙을 세우고 이것을 적용하는 과정이라 할 수 있다. UI 디자인이 최상의 사용자 경험을 위한 다양한 문제와 요구를 해결하는 창조적인 사고 작업이라면, UI 디자인 가이드는 이 를 위해 지켜야할 공통의 규칙이라고 할 수 있다.

모바일 서비스 UI 디자인 가이드의 화면 구성 요소 분석
  • Indicator 영역 : 각종 서비스의 알림 및 수신, 네트워크 ,배터리 상태 등을 아이콘화 하여 제공한다.
  • Header 영역 : 기관의 로고 또는 사이트 명을 제공하여 사이트의 정체성(Identity)을 전달한다.
  • Navigation 영역 : 주로 홈이나 이전 또는 최상위 메뉴 같은 주요 이동만 제공되며 모 바일 웹의 경우 브라우저 내비게이션 버튼을 활용하므로 생략하는 경우도 있다.
  • Content 영역 : 사용자에게 전달하고자 하는 주요 정보를 담는다.
  • Button 영역 : 필요한 경우에만 제공되며, 버튼은 해당 콘텐츠 아래에 배치하는 것이 일반적이나 상단에 위치시키는 경우도 있다.
  • Footer 영역 : 저작권, 연락처, PC웹으로의 링크 등의 내용이 제공된다.
세로형/가로형 배치
  • 모바일 화면은 가로 스크롤보다는 세로 스크롤이 편리하므로 서비스의 콘텐츠 레이 아웃은 단일 칼럼의 세로 레이아웃을 기본형으로 적용한다. 그러나 서비스의 성격에 따라 가로 레이아웃을 기본형으로 적용하는 것이 가능하다
  • 레이아웃은 세로형/가로형 변환시 반응형 웹을 권장하며, 가로폭에 따라 레이아웃이 유동적으로 변경 및 브라우저 지원을 한다.
  • 해상도의 가로(width)값을 픽셀이 아닌 퍼센트(%)로 제작하여 가로 크기에 따라 레이 아웃의 비율이 변경되도록 하고, 변경된 폭에 따라 내용도 같이 움직이게 한다.
  • Flexible images를 이용하여 이미지의 가로값이 자동으로 계산되어 가로 크기의 비율 대로 사이즈가 조절되게 한다.
  • 미디어쿼리(Media Queries)를 통해 해상도의 가로값에 따라 CSS 처리를 다르게 한다
모바일 디자인 가이드 레이아웃
  • Status Bar : 디바이스의 시스템 상태와 정보를 표시하는 영역으로 Default상태로 고정
  • Navigation Bar 1 : 기본 네비게이션 바로 메인으로 가기와 즐겨찾기 버튼 등이 위치
  • Navigation Bar 2 : 타이틀 표시와 네비게이션의 기능을 함께 포함한 영역으로 메뉴, 쓰기, 뒤로 가기 등 기능성 메뉴와 현재 위치의 타이틀을 함께 표시하며 각 콘텐츠 별 메뉴에 따라 변경
  • Main Area : 메인 콘텐츠를 보여주는 영역으로 기본정보와 메뉴, 리스트, 콘텐츠 뷰 등 다양한 속성을 포함
  • Tab Bar : 네비게이션 바 아래에 위치하며 서로다른 depth의 메뉴를 활성화하며 콘 텐츠에 따라 생략 혹은 위치가 변경 가능
  • Tool Bar : 화면의 가장 하단에 위치하며 다양하고 복잡한 기능을 제공함

HIG 가이드라인(Human Interface Guideline) 테마

  • 존중(Deference): UI는 사용자가 콘텐츠를 이해하고 상호작용하는 데 도움을 주어야 하지만, 콘텐츠에 대한 집중을 방해하지 마라.
  • 명료함(Clarity): 글씨는 어떤 크기에서도 읽을 수 있어야 하며, 아이콘은 정확하고 명 료해야 하며, 장식은 미묘하면서도 정확해야 하며 기능으로부터 모티를 얻은 디자인을 지향해라.
  • 깊이(Depth): 눈으로 보이는 레이어와 실제같은 움직임으로 사용자의 재미와 이해를 증가 시켜라.

안드로이드 머터리얼 UI 가이드라인의 대표적인 특징

  • 시스템 바 : 시스템 바는 알림을 표시하고 기기의 상태를 알리거나 앱 사이를 이동하는 역할을 가지고 보통 앱과 언제나 함께 표시된다. 앱이 영화나 그림처럼 몰입형 콘텐츠 를 제공하는 경우는 방해받지 않도록 시스템 바를 숨겨서 전체 화면으로 콘텐츠를 즐 기게 할 수 있다.
    • 상태 표시줄(Status Bar) : 사용자 확인이 필요한 알림을 왼쪽에, 시간이나 배터리 양, 네트워크 신호 강도 등을 오른쪽에 표시한다. 상태 표시줄을 아래로 스와이프하 면 세부 알림 사항이 나온다.
    • 내비게이션 바 : 안드로이드 4.0 폰에 처음 추가된 내비게이션 바는 하드웨어 키가 없는 기기에만 표시된다. 내비게이션 바에는 이전, 홈, 최근 앱 컨트롤이 있으며, 안 드로이드 2.3 이하 버전 앱을 사용할 경우 해당 앱의 메뉴를 띄우는 컨트롤이 함께 표시된다.
    • 결합 바(Combined Bar) : 태블릿 형태 기기는 상태 표시줄과 내비게이션 바를 하나로 결합하여 하나의 바로 나타내고 화면 아래에 위치한다.
  • 알림(Notifications) : 알림은 상태 표시줄을 통해 언제든지 접근할 수 있는 짧은 메시 지이다. 알림은 업데이트나 일정 알림 등 중요하긴 하지만 사용자를 방해할 필요는 없 는 정보를 제공한다. 상태 표시줄을 아래로 스와이프하여 알림 서랍(notifications drawer) 을 열 수 있고, 그 상태에서 각 알림을 터치하면 그 알림에 해당하는 앱이 열린다.
  • 일반적인 앱 UI
    • 메인 액션 바 : 앱의 명령 및 통제 센터이다. 메인 액션 바는 앱의 계층과 뷰를 탐 색하고 중요한 작업을 다루는 요소를 담고 있다
    • 뷰 컨트롤 : 앱이 제공하는 여러 뷰를 전환할 수 있는 방법을 제공한다. 일반적으로 뷰는 앱 데이터를 다양하게 배치하거나 다양한 기능을 제공하도록 구성.
    • 콘텐츠 영역 : 앱의 콘텐츠를 표시하는 공간
    • 분할 액션 바 : 분할 액션 바는 액션들을 추가 바에 배치하는 방법으로, 메인 액션 바 아래나 화면 하단에 배치.

머터리얼 UI 구성요소

  • 탭: 액션 바의 탭은 뷰나 기능적 요소의 탐색과 전환을 용이하게 해주며, 분류된 데이 터 셋을 쉽게 찾을 수 있게 해 준다.
  • 리스트: 여러 줄의 항목을 세로로 정렬해서 보여준다. 리스트는 하위 탐색 뿐 아니라 데이터를 선택할 때에도 사용할 수 있다.
  • 그리드 리스트: 표준 리스트 뷰 대신 사용할 수 있다. 그리드 리스트는 이미지와 함께 데이터 모음을 보여주기 위한 가장 적당한 방법이다. 단순한 리스트와는 달리 그리드 리스트는 수직, 수평 방향으로 스크롤 할 수 있다.
  • 스크롤: 스크롤은 사용자가 스와이프 제스처를 사용해서 화면을 벗어나는 내용을 볼 수 있게 해주며 스크롤의 속도는 제스처의 속도와 같다.
  • 스피너: 여러 값 모음 중 값 하나를 빠르게 선택할 수 있게 해준다. 기본 상태에서 스 피너는 현재 선택중인 값을 보여주고 스피너를 터치하면 다른 모든 사용 가능한 값들 이 드롭다운 메뉴에 표시되며 사용자는 그 중 하나를 새로 선택할 수 있다.
  • 버튼: 텍스트나 이미지로 구성되는 버튼은 사용자가 터치했을 때 어떤 동작이 일어날지 알기 쉽게 전달해준다. 안드로이드는 기본 버튼 및 무테 버튼(테두리나 배경이 없는 버 튼)이라는 두가지 타입의 버튼을 지원하고 텍스트 레이블 또는 이미지를 포함한다.
  • 텍스트 필드: 텍스트 필드는 사용자가 텍스트를 입력할 수 있게 한다. 텍스트 필드는 한 줄 또는 여러 줄이 될 수 있고 텍스트 필드를 터치해 커서가 놓이면 키보드가 자동 으로 표시된다. 또한, 텍스트 입력에 더해 텍스트 선택(자르기, 복사하기, 붙여넣기)과 자동 완성을 통한 데이터 찾기와 같은 다양한 기능을 지원한다.
  • 탐색 바와 슬라이더: 대화형 슬라이더는 연속 또는 불연속적인 범위의 값을 슬라이더 끝을 움직여서 선택할 수 있다. 가장 작은 값은 왼쪽, 가장 큰 값은 오른쪽에 있고 슬 라이더의 상호작용적 속성 때문에 슬라이더는 볼륨, 밝기, 채도와 같은 강도 레벨을 반 영하는 설정을 위한 기능이다.
  • 프로그레스와 활동: 프로그레스 바(progress bar)와 활동 표시(activity indicator)는 사 용자에게 무언가가 진행중이며 시간이 약간 걸린다는 것을 알리는 데에 사용한다.
  • 스위치: 스위치에는 세 가지 종류(체크박스, 라디오 버튼, 온오프 스위치)가 있고 스위 치를 통해 사용자는 원하는 선택을 할 수 있다.
  • 대화 상자: 대화 상자(dialog)는 앱에서 작업을 계속 진행하기 위해 결정사항이나 필요 한 추가 정보를 사용자에게 묻는다. 이러한 요청은 단순한 확인/취소 결정부터 좀 더 복잡한 조절 설정이나 텍스트 입력까지도 포함한다.
  • 피커: 피커(picker)는 값들의 모음에서 값 하나를 선택하는 간단한 방법을 제공한다. 위/ 아래 버튼을 터치하거나, 키보드/스와이프 제스처로 값을 선택할 수도 있다.

태그

Interview

Contact

소개 이미지

안녕하세요!

포트폴리와 스터디와 포트폴리오 강의는 여기서 신청을 받습니다. 스터디와 강의는 웹퍼블리셔 취업 또는 이직을 목표로 한 분만 지원을 받습니다. 다음의 내용을 적고 보내주시면 신청됩니다.

이름 : 누구누구
나이 : 몇 살
배움 이력 : ex)국비학원 6개월 수료
배움 과목 : ex)스터디 or 강의 or 둘다
취업 준비 기간 : ex)1개월
카카오 아이디 : 단톡 초대를 위함

강의와 스터디는 보통 대기 기간이 2~3달 정도 소요됩니다. 그 부분을 계산하시고 신청해주시기 바랍니다. 메일이 확인되면 메일로 신청 계좌가 전송되고 입급하시면 예약이 완료됩니다. 완성된 포트폴리오 사이트와 공부 방법들은 다 같이 볼 수 있도록 공유됩니다. 스터디 또는 강의를 참여하는 분들은 이 부분을 동의한 것으로 간주되며, 이 부분을 확인 후 신청해주시기 바랍니다. 여러분이 보내 주신 개인 정보는 참고만 하고 즉시 파기함을 알려드립니다.

kakao ID
@webstupids
public an
episode together.