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 디자인

GUI 상세 디자인을 하기

UI 디자인이 성공하기 위한 요건

GUI 템플릿에 따라서 전체 화면을 디자인할 수 있다.
GUI 템플릿에 따라서 아이콘과 버튼을 디자인할 수 있다.

GUI 상세 디자인

UX 디자인의 기본 명제를 이해하고 있다면 프로세스를 이해하는 것은 간단하다. 사용자를 이해하고 그것을 디자인으로 연결시키면 되는 것이니 말이다. 그러나 디자인은 ‘자동판 매기(Bending machine)’가 아니다. 사용자 경험을 이해했다고 해서 자동으로 디자인이 만 들어지지는 않는다는 얘기다. 디자이너 개인의 창의성이나 지식, 경험 등이 ‘의도’를 형 성한 뒤, 이 ‘의도’를 통해 디자인이 만들어지는 것이다.

“사용자들의 경험을 이해하고, 그 이해를 바탕으로 디자인 한다.”

사용자 경험을 이해하는 과정에는 목표 수립, 제반 상황 분석, 이슈 도출, 필드리서치, 모 델링 등의 단계(Phase)가 있다. 뒷부분은 ‘사용자 경험 이해’를 바탕으로 디자이너의 의도를 효과적으로 표현하는 것과 관련돼 있다. 서비스 디자인에서 출발해 IA, 인터랙션 디 자인, UI 디자인, 그래픽 디자인까지 체계적으로 접근하는 것은 물론 반복적인 프로토타이 핑과 테스트 과정을 통해 최적의 결과를 창출해 나가는 작업이 이뤄진다.

UI 디자인이 성공하기 위해서 필요한 요건은 무엇인가?
명확한 목표

UX Design은 Bottom-up 기반이기 때문에 명확한 목표가 중요하다. 비즈니스적으로 불확실 한 도전에 UX Design을 적용했다고 해서 프로젝트가 성공할 수는 없다. 명확한 시장 선정 과 비즈니스 목표 수립이 필요하다. 가령 새로운 브랜드 커뮤니케이션을 위해서 어떤 채널 을 이용할 지 확신할 수 없다면 UX 프로젝트가 그 해답을 제시해줄 수 있다. 그러나 비즈 니스 목표도 불분명한 상태에서 모든 것을 UX Design에 맡기는 것은 잘못된 접근이다. 2013년 가을 이후 다양한 크기의 제품 군 출시를 준비하고 있어 iOS 6의 오토 레이아웃, 콘스트레인트를 더욱 강화한 상대적 레이아웃을 보편화하였다. 다음은 iOS7의 Dynamic UIKit에 대한 샘플이다. 또한, iOS의 경우 노티피케이션과 연동해서 좀 더 실용적인 멀티태스킹 환경 제공한다. 다 음은 그 실 예이다.

구체적인 이슈

두리뭉실한 이슈를 가지고 리서치를 진행한다면 어떻게든 도움은 되겠지만 원하는 성과는 기대하기 힘들다. 리서치는 통계분석이나 설문조사, 벤치마킹을 통해서는 해결할 수 없는 구체적인 이슈를 해결하는 과정이다.

적절한 리서치 대상자 선정

사용자 전체를 만난다는 것은 불가능하다. 또한, 불필요한 일이기도 하다. 리서치가 신뢰 할 수 있고 리서치 결과가 의미 있기 위해서는 적절한 대상자를 선정하는 게 관건이다.

깊이 있는 사용자 경험 이해

사용자들의 니즈 뿐만 아니라 이용 동기나 행태, 태도 등에 대한 포괄적인 이해가 중요하 다. 단지 사용자들이 현재 겪고 있는 문제점을 해결한다는 관점에서만 접근한다면 혁신적 인 결과를 얻기 힘들다. 다양한 리서치 기법을 활용하여 사용자들의 경험을 깊이 있게 파 악하는 과정이 중요하다.

체계적인 기법 활용

UX Design에는 사용자 경험 이해를 디자인으로 연결시키는 뛰어난 기법들이 있다. 가령 페르소나를 잘 정의한다면 어떤 사용자들을 타겟으로 삼아서 제품을 디자인할 지가 분명 해진다. 사용자 시나리오는 전체적인 이용 흐름 관점에서 새로운 아이디어들을 도출할 수 있는 기회를 제공한다. UX Design의 장점을 충분히 활용하기 위해서는 체계적인 기법 활 용이 중요하다.

풍부한 리소스 활용

뛰어난 ‘사용자 경험 이해'가 빈약한 ‘리소스 풀(pool)’ 때문에 가치 절하될 수 있다. 사용자 경험을 아무리 잘 이해했다고 하더라도 결국 우리의 목적은 그것을 해결할 디자인 을 만드는 게 목적이기 때문이다. 기술이나 각 디자인 영역별 전문적인 역량은 물론 최신 트랜드에 대해서도 풍부한 리소스가 있어야 한다.

활발한 프로토타이핑

모든 것이 준비됐을 때 프로토타이핑을 한다는 것은 무리가 있다. 어느 시점에서든 활발 하게 프로토타이핑이 시도되고 팀원들 사이에서 토론되어져야 한다. 화면 디자인을 하기 위한 중요한 요소 로 의미 별 정보 그룹으로 구성하여 배치하는 방법 이 있다.

  • 중요도, 사용빈도, 연관성, 조작순서 등을 고려하여 의미단위로 묶어서 배치한다.
    • 조작(이동, 편집, 삭제), 탐색(검색, 정렬), 보기(날짜별, 위치별) 등 정보 속성에 따라 그룹핑하여 배치한다.
    • 전체 조작 관련 기능(정렬, 전체 삭제 등)과 선택된 콘텐츠 조작 관련 기능(편집, 삭제 등)을 구분하여 배치한다.
    • 추가/삭제(제거, 지우기)와 같은 상대적인 기능은 하나의 Set으로 묶은 후 빈도 별로 배치한다.
  • 정보 그룹과 그룹 사이에는 구분선 또는 여백 등을 통해 시각적으로 구분시킨다.
  • 핵심 기능이 되는 20%를 현화면내 제공하고, 그 외에는 옵션 또는 하위Depth에 제공 한다.
다양한 기기의 특성을 반영하여 GUI를 설계하여야 한다.

즉, 기기의 물리적 특성과 사용 환경을 반영하여 사용자에게 최적화된 경험을 제공한다. 스마트폰의 경우 Smartphone 특성 분석 및 Principle 도출하도록 설계하여야 하며, 물리적, 사용 행태적, 환경적 요소를 기준으로 Phone 특성 분석 및 정의를 하여야 한다.

물리적 특성과 빠르게 전환되는 GUI 설계를 해야 한다.

물리적 특성을 고려하여 최적화 된 동선을 제공하도록 GUI를 설계하여야 한다. 즉, 항상 소지하고 정적이고 동적인 환경에서 사용함을 고려하여 한손/양손 사용시의 동 선과 단순한 조작 방법을 제공하도록 설계하여야 한다.

UX 제작 GUIDE는 다음과 같다.

  • 한 손 및 양손 조작시의 운지 동선을 모두 고려해야 한다.
  • 자주 접근하는 Common Control은 가능한 한 손 조작 영역 내 배치한다.
  • 조작 동선은 컨텐츠 영역을 최대한 가리지 않는다.
  • 기본 터치 영역은 엄지 손가락 터치 영역 기준으로 제공한다.
  • 기본적으로 Portrait mode를 기준으로 디자인한다.
결사용 맥락에 맞는 자연스러운 경험을 제공

사용 맥락에 맞는 자연스러운 경험을 제공할 수 있도록 다음의 UX 가이드를 활용하여 설계해야 한다.

태그

Interview

Contact

소개 이미지

안녕하세요!

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

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

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

kakao ID
@webstupids
public an
episode together.