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 구현 표준
    1. 모바일운영체제에대한표준: 모바일환경은각단말의OS와브라우저종류에따 라 큰 차이를 보인다. 모든 모바일 서비스는 다양한 사용자의 디바이스 환경에서 호환되도록 해야 한다. 최근에는 특별한 개발이슈가 발생하지 않는 한 모바일 웹으 로 개발하는 것을 기본으로 한다. 다만, 모바일 웹방식으로 제공시 기술적 제약이 있 거나 현저하게 비용이 증가할 우려가 있는 경우에는 다른 방식으로 제공할 수 있다. 이 경우에도 모바일 네이티브 앱 방식보다 모바일 앱의 기술과 모바일 웹의 기술을 동시에 적용하여 개발하는 하이브리드 앱(Hybrid App) 방식을 우선적으로 고려하여야 한다. 모바일 웹과 하이브리드 앱은 HTML, CSS, Javascript를 사용하여 구현된다.
    2. 증강현실 등 기술적 필요에 의해 앱(App)으로 개발이 불가피한 경우는 각각의 대상 디바이스별로 개발해야 한다. 특정한 사용자 집단을 대상으로 하고, 웹으로 구현 불 가한 기술 등을 사용해야 하는 등 특정한 사유가 있는 경우에 한해서는 앱으로 개발 할 수 있다. 앱 개발 시 각 플랫폼이 제공하는 UI 가이드 표준에 따라 개발하여 각 디바이스별로 최적의 기능과 UI를 제공하되, 모바일 서비스의 UI 디자인 가이드라인 기본원칙은 동일하게 준수하여 개발하여야 한다.
    3. 개발언어에 대한 표준 : 대부분의 모바일 웹과 하이브리드 앱은 HTML, CSS, Javascript를 사용하여 구현된다. 개발언어에 대한 UI표준은 모바일 웹과 하이브리드 앱에 공통되는 사항들로 기술하며, 이 두 가지 포맷의 서비스는 가이드에서 제시하 는 공통된 UI 표현을 적용하여 사용자에게 일관된 경험을 제공하여야 한다.
    4. 화면 해상도 : 모바일 폰의 기본 브라우저(Browser) 해상도는 320*480 PX이며 지 속적으로 고해상도의 스마트폰이 출시됨에 따라 확장성을 고려해야 한다. 또한 스마 트폰의 PPI(Pixel Per Inch)는 LCD모니터의 PPI(72ppi)보다 업 시 PC환경에서 확인하기보다 실제 적용대상 기기에서 확인 할 것을 권장한다. 모 바일 폰과 태블릿은 UI의 기본원칙은 동일하나 화면의 해상도 및 레이아웃에서는 차이를 보인다. 현재 태블릿PC의 기준 해상도는 600*1024PX, 768*1024PX, 800*1280PX, 1536*2048PX이다.높기 때문에 디자인 작업 시 PC환경에서 확인하기보다 실제 적용대상 기기에서 확인 할 것을 권장한다. 모 바일 폰과 태블릿은 UI의 기본원칙은 동일하나 화면의 해상도 및 레이아웃에서는 차이를 보인다. 현재 태블릿PC의 기준 해상도는 600*1024PX, 768*1024PX, 800*1280PX, 1536*2048PX이다.
  • 웹 운영체계에 대한 표준
    • 웹 표준 플랫폼은 원활한 리소스관리와 통합된 원칙아래 다양한 웹 서비스를 양산하 기 위해 제공되는 것으로 이를 활용하여 보다 체계화된 웹 서비스를 제공할 수 있다.
  • 모바일 웹 표준 : 스마트 폰 등 다양한 모바일 기기를 통해 웹 정보를 사용할 때 겪게 되는 불편함과 단말기에 따라 웹 콘텐츠를 각각 구축해야 하는 문제를 모바일 웹 표준 화를 통해 해결할 수 있다.

UI 구현 웹 표준 수립

  • 웹 표준이란 웹의 필수 구성요소인 HTML, CSS, Java Script 등에 대해서 w3c 국제표준 문법을 정확히 준수하여 웹 문서가 작성되었음을 의미한다.
  • 웹 표준의 올바른 준수를 위해 HTML 문법 및 CSS 문법에 대한 설계가 반드시 고려되 어야 한다.
  • 웹 표준 준수를 위한 웹페이지(웹문서)의 제작단계는 크게 4가지 과정으로 이루어진다. 웹사이트의 전체적인 골격에 해당하는 콘텐츠구성 단계를 시작으로 문서의 구조화 과 정에 해당하는 마크업 작업과정, 웹페이지의 표현에 해당되는 스타일시트 작업과정, 웹 사이트의 각종 동작(기능)구현에 해당되는 자바스크립트 작업과정으로 나뉜다.

웹 호환성

웹 호환성이란 사용자의 웹브라우저와는 상관없이 웹 콘텐츠가 동등하게 표현되고 웹서비 스가 오류 없이 동작해야함을 말한다. 웹 호환성 확보를 위해서 웹 사이트 내에서의 동작 설계, 레이아웃 설계, 플러그인 호환성 설계가 반드시 고려되어야 한다.

  • 서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스 를 제공하여야 한다.
  • 웹페이지의 문법을 선언하고, 선언한 문법을 올바른 방식으로 구현하여야 한다.
  • 웹페이지의 크기, 색채, 배치, 정렬 및 여백 등 시각적 속성은 W3C CSS 2.1 또는 CSS 3 으로 구현하여야 한다.
  • 웹호환성 확보로 크로스브라우징을 지원하여야 한다.
  • 동작 호환성, 레이아웃 호환성, 플러그인 호환성을 확보하여야 한다.

Interview

Contact

소개 이미지

안녕하세요!

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

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

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

kakao ID
@webstupids
public an
episode together.