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 아키텍쳐 설계

태스크 플로우 작성하기

태스크 플로우 작성

사용자가 이용하는 서비스에 대하여 경험 경로 및 과정을 예측할 수 있다.
모든 화면들이 시나리오 흐름과 옵션에 따라 어떤 경로를 갖게 되는지 작성할 수 있다.
각 흐름에 따라서 태스크 플로우(Task Flow)를 작성할 수 있다.

사이트맵과 태스크 플로우

사이트맵 정의

웹사이트의 특정 영역을 대표하는 페이지들을 시각적으로 보여주는 것을 의미한다. 회사 조직도처럼 생겼으며 사이트의 수직적인 구조를 보여준다.

태스크 플로우 정의

사용자들이 웹사이트를 항해하는 중 취하는 경로나 과정을 보여준다. 사용자의 옵션이나 경로를 상세히 보여주기 위해 제작된다.

시나리오 기반의 태스크 분석

정의
  • 사용자의 니즈와 요구사항을 기반으로 사용자가 우리 서비스를 이용하여 어떤 작업을 수행하도록 할 것인가 정해야 하는데 이를 태스크(과업)이라고 한다.
  • 이 태스크(과업)을 누가 어떤 상황에서 어떻게 수행하는가를 그리는 과정이 시나리오 작업이다.
  • 태스크(과업) 분석은 이 서비스를 통하여 앞에서 정의한 페르소나가 무엇을 할 수 있 을지, 사용자들에게 어떤 기능들을 제공할 것인지에 대하여 사용자의 입장에서 정리 하는 과정이다.
태스크(과업) 도출 과정
  • 시나리오를 기반으로 페르소나의 관점에서 작성한다.
  • 단순 기능의 나열이 아니라 페르소나가 필요한 태스크(과업)을 선정한다.
  • 목적에 부합하는 태스크(과업)를 선정한다.
  • 가장 중요한 태스크(과업)이 무엇인지 우선 순위를 정한다.
  • 웹 또는 모바일에서 제공하기 적합한가 검토한다.
태스크 플로우 (다이어그램) 작성 이유
  • 복잡한 인터렉션 흐름을 쉽게 파악하는 데 도움을 준다.
  • 플로우 다이어그램이나 사이트맵을 이용해 사용자가 어디에서 어디로 이동하고 공통 태스크를 어떻게 완료하는지 확인해 보면 개발에 걸리는 시간을 예측하거나 개발자에 게 디자인을 설명할 때 도움을 준다.
  • 태스크 플로우 (다이어그램) 작성 도구인 비지오(Visio)나 옴니그라플(OmniGraffle)나 Axure PR 프로나 어도비 인디자인나 오픈오피스 드로(OpenOffice Draw) 또는 발사믹 (Balsamiq) 등을 사용하여 서비스 및 흐름의 변경에 쉽게 업데이트 하는 데 도움을 준다.

태스크 플로우 설계

제공하기로 결정한 모든 기능을 포함하되, 가장 많이 이용하는 태스크를 가장 편리하게 사용할 수 있도록 디자인하기 위하여 중요한 태스크에 대한 시나리오에 맞추어 태스크 의 흐름을 정하고 이를 화면의 단계로 도출해야 한다.

스케치하기

처음부터 끝까지 전체적으로 문제를 조망하기에 엄청 유용한 방법이다. 스케치는 제품이 나 기능을 시각화 할 때 가장 먼저 하는 일이다. 동시에 요소 간의 연관성에 따라 각각 어디에 배치할지 생각하기 시작해야 한다. 빨리 그려보고 버릴 수 있는 스케치로 해보는 게 적절하다.

Interview

Contact

소개 이미지

안녕하세요!

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

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

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

kakao ID
@webstupids
public an
episode together.