0524.md

2017 05 24 summary

디자인 시안(psd파일)-> ASSET추출시 고려해야 될 사항

1. 브라우저의 지원사항에 따라 png와 svg 두가지 버전을 준비

• SVG → PNG 변환 온라인 서비스
• PNG → SVG 변환 온라인 서비스

2. 이미지 최적화

• 압축 : 용량을 줄인다.
  • 이미지 — jpg, png 압축 온라인 서비스
  • 이미지 — svg 압축 온라인 서비스
• 스프라이트 : 자주 바뀌지 않는 이미지는 스프라이트로 만든다.
  • 스프라이트 — png 이미지 생성 온라인 서비스
  • 스프라이트 — svg, png 아이콘 이미지 생성 온라인 서비스
• 아이콘화
  • iconizr
    • 아이콘의 png, svg 버전 생성가능.
    • 스프라이트/개별 파일로 생성 가능.
    • 각 아이콘 별 개별 클래스 생성 가능.
    • png 배율 설정 가능.
    • 스프라이트 이미지에서 각 아이콘간의 간격 설정 가능

chrome workspace 사용법

• 개발도구에서 변경한 사항을 소스파일에 적용시킬 수 있게 된다.

1. 개발도구 > settings(F1) > workspace > add folder로 작업 folder 추가.
2. 개발도구 > sources탭 > 좌측 path tree에서 작업 폴더에 오른쪽클릭 > add folder to workspace > path tree 안쪽에 오른쪽클릭 > map to network resource

• 이후 개발자 도구 내에서 변경한 사항을 저장 하면 원본파일에도 적용된다.

---

RWD 제작시 고려사항

• 적응형 웹 : ‘적응형 웹’은 서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 디바이스에 최적화된 마크업을 호출. 최적화된 마크업은, 꼭 필요한 정보만을 노출시키며 디바이스에 최적화된 이미지를 사용하고 플래시를 사용하지 않고 자바스크립트를 이용하여 장치를 분석하고 그에 맞는 동작을 적용.
• 반응형 웹: 미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드로 화면 크기의 변화에 따라 그에 맞은 크기가 됨. 새로운 웹 빌드를 추가하기 쉬우며 사이트를 재 구축해야하고 디바이스에 따라 성능이 저하될 수 있음.

콘텐츠 전략

• "mobile first" : desktop버전의 scaledown은 바람직하지 않다.
• 1 column layout
• main title을 크고 강하게
• 일관된 디자인 전략을 고수
• 눈에 보이지 않는 부분까지 고려
• content first
  • 쌓임
  • 순서
  • 맞물림

유연한 그리드 레이아웃

• 유연한 컨텐츠 크기 : 비율(%단위)를 사용한다. (자식요소크기 / 부모요소크기 * 100).
• subpixel problem
  • 원인 : 비율로 크기 처리시 픽셀 단위에 소수점 값이 생긴다. 이때 브라우저별 소수점 처리 방식이 달라 렌더링 된 결과물에서 차이가 발생. 원하지 않게 요소가 row에서 drop 됨.
  • 해결법 : isolate floating (margin-left로 위치지정. float:left와 margin-right:-100%로 눈에 보이는 요소 순서를 평등하게 만든다.)

유연한 이미지/미디어

• 컨테이너 요소의 폭에 맞춰 크기가 변경되는 이미지를 말한다.

  .responsive-scale {
    width: 100%;
    height: auto;
  }
  .responsive-scale-bg {
    width: 100%;
    padding-bottom: 66.6666667%;
    background: url(/*이미지경로*/);
    background-size: cover;
  }
  

• 재단이미지 : 컨테이너 요소의 폭에 맞춰 크기가 동적으로 잘려지는 이미지.

  • 재단이미지 방법 1

    .responsive-crop {
      width: 100%;
      height: 960px;
      background-image: url(/*이미지경로*/) center top;
      background-size: cover;
    }
    

  • 재단이미지 방법 2

    .responsive-container {
      position: relative;
      height: 120px;
    }
    .responsive-{
      position: absolute;
      left: 50%;
      width: 100%;
      height: auto;
      transform: translateX(-50%);
    }
    

• 유연한 아이프레임

  .responsive-container {
    position: relative;
    /* 4:3 = 75%,
       16:9 => 56.25%,
       21:9 = 42.857142857% */
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  

디바이스 픽셀 밀도

• 물리적 단위 공간 (주로 대각선이 1인치인 정사각형을 이용)에 들어가는 픽셀의 양을 의미
• RETINA display의 경우 픽셀밀도가 기존에 비해 두배로 올랐다.
• 따라서 bitmap graphic은 device에 따른 픽셀 밀도를 고려해 줘야 한다.
• window.devicePixelRatio 브라우저 내장 javascript의 함수 : 기기의 픽셀밀도값을 반환.
• 디바이스 픽셀 밀도에 따라 디바이스별 UI 크기도 다르게 작업해야 함.
  • 1배수로 작업 후 대응 디스플레이에 따라 스케일 업 애샛 추출
  • 포토샵에서 작업시 큰 스마트오브젝트로 1배수로 스케일 다운하여 작업.
• pt(애플), dp(Density-Independent Pixels 안드로이드) : 장치에 독립적인 단위.
• 인식의 용이성 고려 : 다음 사항에 따라 UI의 크기가 달라야함.
  • input method
  • physical screen size
  • distance from screen

중단점/미디어 쿼리

• 중단점(break point)
  • mobile : 4 column
  • tablet : 8 column
  • desktop : 12 column
• media query를 통해 같은 요소에 다른 스타일을 동적으로 지정할 수 있음

참고 : RWD Design Pattern