Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]

3 947 vues

Publié le

- WSConf. Seoul 2016 / 2017
- 2016.12.17(토) / 2017.03.11(토). 한국 Microsoft
- 발표자 : 이환(하이브랩)

Publié dans : Technologie
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Sex in your area is here: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]

  1. 1. 이미지는 마크업의 반이다
  2. 2. 목차 1. 스프라이트의 기본 재료 – 이미지 2. 이미지를 저장하는 방법 3. 상황에 맞는 파일형식 고르기 4. 이미지 품질과 로딩속도 5. 이미지 스프라이트(Sprite)가 무엇인가요? 6. 스프라이트 제작과 코드 선언 7. 스프라이트 유형별 분석
  3. 3. 1. 스프라이트의 기본 재료 - 이미지
  4. 4. 4 / 이미지는 마크업의 반이다 UI개발자가 알아야 할 이미지는 무엇일까요?
  5. 5. 5 / 이미지는 마크업의 반이다 1.1 웹에서 많이 사용하는 이미지 파일형식 JPEG/JPG GIF  지원색상 : 24비트(16,777,215색)  2)손실 압축방식  1)압축률 ↑ 용량↓ 품질 ↓  4)트루컬러를 지원하며 대중적으로 사용됨  사용용도 : 사진, 제품사진 등 다양한 색상 이 필요한 이미지  지원 색상 : 8비트 (256색)  3) 무손실 압축방식  파일전송시간의 최소화를 위해 만들어짐  투명 지원, 반투명 X  여러 장의 이미지를 1개 파일에 담아 애 니메이션 효과가능  사용용도 : 색이 단순한 로고,블릿 기호 나 움직이는 아이콘 등
  6. 6. 6 / 이미지는 마크업의 반이다 1.1 웹에서 많이 사용하는 이미지 파일형식 JPEG/JPG GIF  지원색상 : 24비트(16,777,215색)  2)손실 압축방식  1)압축률 ↑ 용량↓ 품질 ↓  4)트루컬러를 지원하며 대중적으로 사용됨  사용용도 : 사진, 제품사진 등 다양한 색상 이 필요한 이미지  지원 색상 : 8비트 (256색)  3) 무손실 압축방식  파일전송시간의 최소화를 위해 만들어짐  투명 지원, 반투명 X  여러 장의 이미지를 1개 파일에 담아 애 니메이션 효과가능  사용용도 : 색이 단순한 로고,블릿 기호 나 움직이는 아이콘 등 1)이미지 압축 : 이미지의 정보가 손실되지 않고, 전송되는 시간도 줄이기 위해 압 축하며 손실/무손실 압축방식으로 나뉨 2)손실 압축방식 : 이미지를 압축했을 때 원래 가지는 정보의 일부가 손실되면서 압축됨, 불필요한 색, 정보를 삭제하기 때문에 압축률이 높을 수록 이미지가 깨짐 3)무손실 압축방식 : 이미지를 압축해도 이미지의 정보량(색상 등)이 변하지 않게 압축되나 압축률이 높을수록 파일용량이 커짐 4)트루컬러(true color)= full color = 24`비트 이상 컬러 = 자연의 색과 거의 동 일하여 사람의 눈으로 구별 어려움
  7. 7. 7 / 이미지는 마크업의 반이다 1.1 웹에서 많이 사용하는 이미지 파일형식 PNG  GIF와 JPEG의 장점을 합친 파일형식  GIF보다 압축률이 우수 PNG-8 PNG-24  지원 색상 : 8비트 (256색)  GIF와 거의 유사하나 용량이 적음  투명 지원, 반투명 X  사용용도 : 색이 단순한 로고,블릿 기호나 움직이는 아이콘 등  지원색상 : 24비트(16,777,215색)  투명, 반투명 모두 지원  무손실 압축하므로 큰 이미지의 경우 파일 용량이 매우 클수 있음  사용용도 : 배경이 투명/반투명한 다양한 색상의 이미지나 스프라이트  무손실 압축방식  반투명 지원
  8. 8. 8 / 이미지는 마크업의 반이다 1.2 한눈에 보는 이미지 파일형식 LOW HIGH 파일용량 PNG-8 GIF JPEG PNG-24 지원 색상수 PNG-8 = GIF JPEG PNG-24 이미지 품질 GIF PNG-8 JPEG PNG-24 투명, 반투명 JPEG 지원 X PNG-8, GIF 투명만 지원 PNG-24 ALL
  9. 9. 2. 이미지를 저장하는 방법
  10. 10. 10 / 이미지는 마크업의 반이다 2.1 포토샵을 활용한 이미지 저장방법 PSD 원본파일을 가급적 가지고 있어라! TIP
  11. 11. 11 / 이미지는 마크업의 반이다 3 Save : 저장하기 Save As…: 다른 이름으로 저장하기 Save for Web & Devices : 웹과 디바이스 용으로 저장하기 2.1 포토샵을 활용한 이미지 저장방법 단축키는 Alt+Shift+Ctrl+S TIP 2 1 1 2 3
  12. 12. 12 / 이미지는 마크업의 반이다 저 장 옵 션 2.1 포토샵을 활용한 이미지 저장방법 1 2 3 4 이미지 파일형식과 품질 설정 메타데이터 삭제 설정값에 따라 용량과 품질을 비교 저장
  13. 13. 13 / 이미지는 마크업의 반이다 GIF 저장옵션 PNG-8 저장옵션 2.1 포토샵을 활용한 이미지 저장방법
  14. 14. 14 / 이미지는 마크업의 반이다 PNG-24 저장옵션 2.1 포토샵을 활용한 이미지 저장방법
  15. 15. 15 / 이미지는 마크업의 반이다 잠깐, 메타데이터는 왜 삭제해야 하나요?
  16. 16. 16 / 이미지는 마크업의 반이다 cf. 메타데이터를 삭제해야 하는 이유? 메타데이터란? 촬영시간 촬영위치 정보 노출모드 사용 S/W 플래시 사용여부 해상도 사진크기 등 사진에 대한 정보
  17. 17. 17 / 이미지는 마크업의 반이다 메타데이터는 정보다 cf. 메타데이터를 삭제해야 하는 이유?
  18. 18. 18 / 이미지는 마크업의 반이다 메타데이터는 정보다 메타데이터가 있고, 없고의 차이? 메타데이터 없음메타데이터 있음 cf. 메타데이터를 삭제해야 하는 이유?
  19. 19. 19 / 이미지는 마크업의 반이다 메타데이터는 정보다 메타데이터 없음 용량 1,696KB 메타데이터 있음 용량 1,706KB cf. 메타데이터를 삭제해야 하는 이유? 1,706KB – 1,696KB = 10KB 차이!
  20. 20. 20 / 이미지는 마크업의 반이다 메타데이터는 개인정보다 cf. 메타데이터를 삭제해야 하는 이유?
  21. 21. 21 / 이미지는 마크업의 반이다 cf. 메타데이터를 삭제해야 하는 이유? 메타데이터란? 촬영시간 촬영위치 정보 노출모드 사용 S/W 플래시 사용여부 해상도 사진크기 등 사진에 대한 정보 오호.. 딱 걸려뜸!
  22. 22. 3. 상황에 맞는 파일형식 고르기
  23. 23. 23 / 이미지는 마크업의 반이다 3. 상황에 맞는 파일형식 고르기 파일용량과 퀄리티의 복합적 판단
  24. 24. 24 / 이미지는 마크업의 반이다 3. 상황에 맞는 파일형식 고르기  색상은 얼마나 가지고 있는지  반투명/투명한 배경을 가지고 있는지
  25. 25. 25 / 이미지는 마크업의 반이다 3. 상황에 맞는 파일형식 고르기 다양한 색상의 이미지
  26. 26. 26 / 이미지는 마크업의 반이다 3.1 다양한 색상의 이미지 ① GIF 파일 다양한 색상의 이미지에는 GIF는 적절치 않음. 원본
  27. 27. 27 / 이미지는 마크업의 반이다 ② PNG-8 파일 원본 ③ PNG-24 파일 GIF, PNG-8보다는 PNG-24가 다양한 색상을 가진 이미지에 적절 3.1 다양한 색상의 이미지
  28. 28. 28 / 이미지는 마크업의 반이다 ④ JPEG 파일 품질 80은 100과 비교했을 때 깨짐이 거의 없고 파일용량도 PNG-24에 비해 절반 이상 절감 다양한 이미지의 경우, 품질과 용량 측면에서 JPEG가 가장 효율적인 포맷 원본 3.1 다양한 색상의 이미지
  29. 29. 29 / 이미지는 마크업의 반이다 다양한 색상의 이미지에서는 JPEG를 사용하는 것이 가장 효율적 JPEG : 용량, 퀄리티 BEST GIF : 이미지 깨짐 PNG : 용량이 큼 3.1 다양한 색상의 이미지
  30. 30. 30 / 이미지는 마크업의 반이다 3. 상황에 맞는 파일형식 고르기 단순한 색상의 이미지
  31. 31. 31 / 이미지는 마크업의 반이다 3.2 단순한 색상의 이미지 단순한 색상 이미지는 png-8이 BEST!
  32. 32. 32 / 이미지는 마크업의 반이다 3. 상황에 맞는 파일형식 고르기 다양한 색상의 반투명 이미지
  33. 33. 33 / 이미지는 마크업의 반이다 3.3 다양한 색상의 반투명 이미지 반투명 이미지는 PNG-24가 BEST!
  34. 34. 4. 이미지 품질과 로딩속도
  35. 35. 35 / 이미지는 마크업의 반이다 4. 이미지 품질과 로딩속도 이미지 품질을 5단계(10, 30, 50, 80, 100)로 나누어 이미지 로딩속도를 측정
  36. 36. 36 / 이미지는 마크업의 반이다 4. 이미지 품질과 로딩속도 이미지 정보 파일형식 : JPG파일 크기 : 4320px × 3240px 속도 측정도구 Chrome 개발자 도구 – [Network] 체크 방식 품질이 다른 5개의 이미지가 첨부된 각 html 파일을 로드하여 이미지가 모두 나타날 때까지 걸리는 시간을 체크함
  37. 37. 37 / 이미지는 마크업의 반이다 이미지를 받기 직전까지 준비되는 시간 : 4+13+104+120=241ms=0.241s 이미지 받는 시간 : 7.23s 데이터 분석 방법 막대그래프에 마우스를 올려보면 로딩관련한 확인이 가능 (ms=1/1,000s) 이미지를 로드하는데 걸린 시간 = 0.241+7.23 = 총 7.47s 4. 이미지 품질과 로딩속도
  38. 38. 38 / 이미지는 마크업의 반이다 품질 100 품질 80 품질 50 품질 30 품질 10 이미지 용량 : 5.4MB 이미지 로드시간 : 7.0초 이미지 용량 : 2.6MB 이미지 로드시간 : 3.7초 이미지 용량 : 1,005KB 이미지 로드시간 : 2.2초 이미지 용량 : 582KB 이미지 로드시간 : 1.9초 이미지 용량 : 372KB 이미지 로드시간 : 1.5초 4. 이미지 품질과 로딩속도
  39. 39. 39 / 이미지는 마크업의 반이다 품질 100 품질 80 품질 50 품질 30 품질 10 이미지 용량 : 5.4MB 이미지 로드시간 : 7.0초 이미지 용량 : 2.6MB 이미지 로드시간 : 3.7초 이미지 용량 : 1,005KB 이미지 로드시간 : 2.2초 이미지 용량 : 582KB 이미지 로드시간 : 1.9초 이미지 용량 : 372KB 이미지 로드시간 : 1.5초 4. 이미지 품질과 페이지 로딩속도 [결과] 이미지 품질(화질)이 좋을 수록 파일용량은 커지고, 이미지 로딩속도는 느려짐 무조건 좋은 품질의 이미지를 사용하는 것은 좋은 방법 X. 각 콘텐츠의 용도에 따라 적절한 파일형식과 품질을 정하는 것은 UI개발자의 몫
  40. 40. 5. 이미지 스프라이트(Sprite)란?
  41. 41. 41 / 이미지는 마크업의 반이다 5.1 스프라이트는 무엇인가요? 스프라이트란 여러 개의 개별 이미지를 하나로 만드는 것으로, 페이지 속도이슈를 최소화 할 수 있는 이미지 최적화 기법 - 스프라이트 이미지 - 개별 이미지
  42. 42. 42 / 이미지는 마크업의 반이다 5.1 스프라이트는 무엇인가요? 스프라이트란 여러 개의 개별 이미지를 하나로 만드는 것으로, 페이지 속도이슈를 최소화 할 수 있는 이미지 최적화 기법 이미지 : 1개 총 용량 : 36.9KB 스프라이트 이미지 이미지 : 100개 총 용량 : 156KB 개별 이미지
  43. 43. 43 / 이미지는 마크업의 반이다 5.2 스프라이트에 적합한 이미지 자주 바뀌는 이미지 자주 바뀌는 않는 이미지 이미지는 2종류로 나뉨
  44. 44. 44 / 이미지는 마크업의 반이다 자주 바뀌는 이미지 자주 바뀌는 않는 이미지 쇼핑몰 배너, 상품 이미지 등 GNB, LNB, 검색창, 로그인, 하단 푸터, 버튼요소 등 5.2 스프라이트에 적합한 이미지 어떤 이미지가 스프라이트에 적합할까요?
  45. 45. 45 / 이미지는 마크업의 반이다 쇼핑몰 배너, 상품 이미지 등 GNB, LNB, 검색창, 로그인, 하단 푸터, 버튼요소 등 5.2 스프라이트에 적합한 이미지 어떤 이미지가 스프라이트에 적합할까요? 자주 바뀌는 않는 이미지자주 바뀌는 이미지
  46. 46. 46 / 이미지는 마크업의 반이다 자주 바뀐다는 것은 매번 교체를 위한 어떠한 액션이 필요하다는 뜻 이로 인해 스프라이트 작업할 때 기존에 있던 다른 이미지에 영향을 줄 수 있음 5.2 스프라이트에 적합한 이미지 자주 바뀌지 않는 이미지가 스프라이트에 적합
  47. 47. 47 / 이미지는 마크업의 반이다 스프라이트를 사용하면 무엇이 좋아요?
  48. 48. 48 / 이미지는 마크업의 반이다 웹브라우저는 서버로부터 이미지를 요청. 만약 100개의 이미지가 사용되었다면 100번 요청. 서버 요청횟수가 많아지면 그만큼 로딩속도가 느려져 좋은 경험을 주지 못함. 하지만, 스프라이트는 이미지 개수가 줄어들기 때문에, 서버 요청횟수를 최소화한 몇 번의 통신만으로도 다양한 이미지를 볼 수 있는 장점. 5.3 스프라이트의 장점 웹페이지 로딩속도가 빨라집니다.
  49. 49. 49 / 이미지는 마크업의 반이다 5.3 스프라이트의 장점 1번 이미지 요청/다운 오~ 완전 빨리 떠~ HTTP 서버 [스프라이트를 사용했을 때 기분좋은 사용자의 모습] HTTP 서버 [개별 이미지를 사용했을 경우 짜증내는 사용자의 모습] 아악! 왜케 느려? 100번 이미지 요청/다운
  50. 50. 50 / 이미지는 마크업의 반이다 많은 이미지들을 1개의 파일로 관리할 수 있고, 네이밍에 대한 부담도 줄어들기 때문에 관리측면에서도 유용. 5.3 스프라이트의 장점 파일 관리가 깔끔해집니다.
  51. 51. 51 / 이미지는 마크업의 반이다 스프라이트 적용 전 스프라이트 적용 후 5.3 스프라이트의 장점 100개 1개
  52. 52. 6. 스프라이트 제작과 코드 사용
  53. 53. 53 / 이미지는 마크업의 반이다 6.1 스프라이트 제작하기 ① background 레이어 생성 Tip) background 레이어에 색을 입히면 이미지들이 잘 구분됨.
  54. 54. 54 / 이미지는 마크업의 반이다 2px 2px 2px 2px 6.1 스프라이트 제작하기 ② 각 SNS 아이콘 이미지들 추가하고,아래와 같이 이미지 간 최소 2px 이상 간격을 줌. Tip) 간격을 주는 이유는 태블릿의 Safari 브라우저에서 이미지가 조금 넘쳐 보이는 버그를 방지하기 위함.
  55. 55. 55 / 이미지는 마크업의 반이다 ③ 가장자리들의 여백을 최소 화해서 자름 ④ 배경의 투명도 지원, 깨짐 정도, 파일용량 등을 고려하 여 PNG, GIF, JPG 중 선택하 여 저장 6.1 스프라이트 제작하기 Tip) 각 성격에 맞는 이미지들끼리 묶어야 효과적
  56. 56. 56 / 이미지는 마크업의 반이다 6.2 스프라이트 코드 선언하기 ① 스프라이트 이미지를 사용하려면 background속성을 사용 ② 스프라이트 공통 클래스 .spr_share를 선언하고 사이즈, 이미지 경로 등을 입력 결과화면 HTML CSS
  57. 57. 57 / 이미지는 마크업의 반이다 ③ 각각의 이미지들은 background-position으로 좌표값을 지정 6.2 스프라이트 코드 선언하기 결과화면 HTML CSS
  58. 58. 58 / 이미지는 마크업의 반이다 디바이스 대응시, 스프라이트 크기/위치는 짝수로 하는 것이 좋다
  59. 59. 59 / 이미지는 마크업의 반이다 디바이스의 해상도 대응 cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
  60. 60. 60 / 이미지는 마크업의 반이다 다양한 디바이스의 해상도 (2배 기준으로 설명) cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
  61. 61. 61 / 이미지는 마크업의 반이다 cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? 홀수크기 (원본) 315px 103px 짝수크기 104px 316px CSS width : 158px height : 54px background-size : 158px 54px 원본 사이즈가 315*103인 홀수 크기의 이미지가 있습니다. 1) 원본 사이즈 그대로 홀수크기로 이미지를 사용해보고, 2) 짝수크기로도 조정했을 때의 차이점 알아보겠습니다.
  62. 62. 62 / 이미지는 마크업의 반이다 홀수크기 짝수크기 cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? 아이폰7
  63. 63. 63 / 이미지는 마크업의 반이다 홀수크기 짝수크기 cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? 아이폰7 홀수 크기의 이미지를 사용했을때 짝수 크기보다 뿌옇게 보이는 것을 알 수 있습니다.
  64. 64. 64 / 이미지는 마크업의 반이다 홀수크기 (원본) 짝수크기 53px 52px 한글자를 확대해서 보아도, 홀수크기가 더 뿌옇게 보이고, 1px 더 큰것을 볼 수 있습니다. cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
  65. 65. 65 / 이미지는 마크업의 반이다 홀수크기 (원본) 짝수크기 53px 52px 한글자를 확대해서 보아도, 홀수크기가 더 뿌옇게 보이고, 1px 더 큰것을 볼 수 있습니다. cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? 왜 그럴까요?
  66. 66. 66 / 이미지는 마크업의 반이다 디바이스 해상도 대응을 위해 50% 사이즈 크기로 선언해야 하다보니 소수점을 피하기 위한 원래 크기보다 1px 크게 background-size가 선언되어 이미지가 늘어나면서 뿌옇게 보이는 현상이 발생 315px 316px cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? 1px
  67. 67. 67 / 이미지는 마크업의 반이다 스프라이트 이미지 위치에 따라 어떻게 표현되는지 대해 알아보겠습니다. 각각 홀수, 짝수 위치에 이미지를 놓고 디바이스에서 확인 홀수 위치 짝수 위치 97, 288 96, 288 0,0 0,0 cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? CSS width : 46px height : 46px background-size : -48px -144px
  68. 68. 68 / 이미지는 마크업의 반이다 홀수 위치 짝수 위치 흰 여백 생김 cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? 아이폰7
  69. 69. 69 / 이미지는 마크업의 반이다 홀수 위치 짝수 위치 흰 여백 생김 cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? 아이폰7 왜 그럴까요?
  70. 70. 70 / 이미지는 마크업의 반이다 이미지가 홀수 위치에 놓였지만, 소수점을 피하기 위한 짝수값 선언을 위해 원래의 위치보다 -1px 인 위치에 background-position값을 선언했기 때문입니다. 실제위치 : 97, 288 이미지 선언기준 : 96, 288 background-position:-48px -144px cf. 스프라이트 크기/위치를 짝수로 해야하는 이유? 50% 1px
  71. 71. 71 / 이미지는 마크업의 반이다 스프라이트 이미지의 크기나 위치를 홀수로 할 경우, 이미지가 정확한 비율로 표현되지 않기때문에 짝수로 하는 것이 좋습니다. 짝수가 최고!
  72. 72. 72 / 이미지는 마크업의 반이다 6.3 주의사항 스프라이트 원본 PSD는 꼭 보관하세요. 여럿이서 작업을 하다 보면 이미지 위치가 다른 사람 이미지와 겹치거나 파일이 없어지는 경우가 발생. 이를 대비하기 위해 반드시 원본 PSD을 이미지가 있는 위치에 함께 보관하는 것이 좋음. 오른쪽 이미지와 같이 가이드를 활용하여 이미지 영역을 명확 히 해두면 다른 사람이 작업을 하더라도 동일 위치에 이미지가 겹치는 상황을 방지할 수 있음. 이미지 크기, 용량이 너무 크지 않도록 해야 합니다. 이미지의 개수를 줄이기 위해 하나의 이미지에 계속 합치다 보면 이미지 크기, 용량이 커질 수 밖에 없다. 결국 본래 스프라이트 사용목적에 어긋나게 됨. 그래서 초기에 어떤 이미지를 스프라이트로 만들 것인지 판단하는 것이 중요. 크기가 커진다면 유사한 콘텐츠끼리 묶어 별도로 스프라이트를 만들거나, 개별 이미지로 사용하는 것이 좋다. 가이드(guides)
  73. 73. 7. 스프라이트 유형별 분석
  74. 74. 74 / 이미지는 마크업의 반이다 7. 스프라이트 유형별 분석 홈페이지 종류 쇼핑몰형 이벤트& 프로모션형 기업형 개인형 스프라이트는 콘텐츠에 따라 공통으로 사용하기도 또는 특정 콘텐츠 전용으로 사용합니다. 스프라이트를 홈페이지 유형별로 어떻게 사용하면 좋은지 알아보겠습니다.
  75. 75. 75 / 이미지는 마크업의 반이다 1)구성 : 메인 / 소개 / 정보 / 홍보 / IR / 채용 등 2)특징 : 기업형 사이트는 사이트 전체에 기업만의 특성(CI, 분위기 등)을 반영하게 됩니다. 메인 페이지는 디자인적인 화려함과 서브 페이지의 간단한 요약 등이 주로 노출됩니다. 서브 페이지는 기업소개나 채용정보 등 상세한 내용을 담고 있습니다. 3)스프라이트 구성 7.1 기업형 공통 페이지에서 공통으로 노출되는 부분은 공통 스프라이트로 묶어주면 좋습니다. 주로 페이지의 상단, 하단이 해당됩니다. 메인 페이지 메인 페이지는 메인 페이지에서만 노출되기 때문에, 메인 페 이지 전용 스프라이트로 묶습니다. 서브 페이지 그 외 페이지는 회사 소개나 채용 등 정보 제공용이므로 큼 직한 이미지나 텍스트, 공통 가이드가 들어가므로 서브 페이 지 전용 스프라이트로 묶어주면 좋습니다.
  76. 76. 76 / 이미지는 마크업의 반이다 [메인 페이지] [서브 페이지] [서브 페이지] 공통 스프라이트 7.1 기업형
  77. 77. 77 / 이미지는 마크업의 반이다 7.2 쇼핑몰형 1)구성 : 메인 / 상품상세 / 상품리스트 / 장바구니 등 2)특징 : 단순한 접근이 아닌 흥미를 유발하여 소비자로 하여금 최종 구매단계까지 이르도록 유도해 야 하기 때문에 상품 진열(홍보)에 크게 초점을 둡니다. 메인 페이지는 카테고리 별 BEST상품이나 기획전 및 이벤트를 노출하며, 그 외 페이지는 상품의 상세나 카테고리 별 리스트, 장바구니 등으로 이루어져 있습니다. 3)스프라이트 구성 공통 카테고리 별 상품 리스트들 가이드는 대부분 똑같기 때문에 한꺼번에 스프라이트로 묶습니다. 메인/서브 페이지 서브페이지와 메인 페이지와 카테고리목록을 표현하는 가이 드가 다를 수 있습니다. 다를 경우에는 해당 영역의 전용 스 프라이트로 묶습니다.
  78. 78. 78 / 이미지는 마크업의 반이다 공통 스프라이트 전용 스프라이트 7.2 쇼핑몰형
  79. 79. 79 / 이미지는 마크업의 반이다 7.3 이벤트 & 프로모션형 1)구성 : 메인 / 상세 2)특징 : 단발성 페이지들로, 사용자의 참여를 유도하기 위해 디자인적으로 화려한 큼직한 이미지들 로 구성되며, 복잡한 구조의 마크업이 필요하지 않습니다. 응모하기 버튼, 문자 받기 등 이벤트에 해당하는 콘텐츠가 포함됩니다. 3)스프라이트 공통 페이지 구성이 단순하여 용량에 제한이 없다면, 전부 스프 라이트로 해도 상관없습니다.
  80. 80. 80 / 이미지는 마크업의 반이다 7.4 개인형 1)구성 : 개인마다 다름 2)특징 : 개인의 성향에 따라 홈페이지 구성이 달라집니다. 정보전달의 목적이라면 대부분 블로그 형 식으로 제공이 되고, 포트폴리오 목적이라면 화려함이 가미된 리스트 형식으로 제공이 됩니다. 3)스프라이트 공통 공통으로 노출되는 이미지라면 공통 스프라이트로 묶어 주면 좋습니다. 기업형에 비해 콘텐츠 많지않아 서브페이 지이더라도 용량 제한이 없다면 공용 스프라이트 1개로 사용해도 좋습니다.
  81. 81. Thank you.

×