글로벌을 타겟으로 한 모바일 게임을 제작중인 팀 <쿡앱스>에서 만든 용어정리집 입니다. 게임회사 실무에서 실제로 사용중인 용어들을 직군 단위와(통계,마케팅,기획,그래픽,개발,사운드/영상 등) 중요도로 나누어 정리해 두었습니다.
https://www.cookapps.com/
글로벌을 타겟으로 한 모바일 게임을 제작중인 팀 <쿡앱스>에서 만든 용어정리집 입니다. 게임회사 실무에서 실제로 사용중인 용어들을 직군 단위와(통계,마케팅,기획,그래픽,개발,사운드/영상 등) 중요도로 나누어 정리해 두었습니다.
https://www.cookapps.com/
1. 스크립트를 통한 접근성은 어떻게 지켜야 할까?
2. 목차 순서로 최종 실무예시 및 해결법에 대해서 중점적으로 다루겠습니다.
3. 접근성은 마크업만 지키면 되는가? 대부분은 접근성은 마크업 개발자들의 책임이라고 생각합니다.
4. 시멘틱 마크업은 필수적이긴 하지만 접근성의 전부라고 할수 없습니다.
5. 기획 디자인 부터 서버개발까지 사용성에 맞는 화면구성 및 디자인 그리고 그에 맞는 데이터 형식을 출력하는데에 모두 접근성을 고려해야합니다.
6. 성능을 저하시켜서 접근성을 지키기보다는 최신 환경 기준에 구환경에서는 최소한의 컨텐츠 가독이 가능하게 하여 신기술 도입장벽을 허물고 생산성을 높히는 단계적 향상을 추구하고 있습니다.
7. 모두 똑같은 정보를 습득할수 있게 전달력이 좋고 가독성이 좋은 것을 접근성이라고 개인적으로 결론 지어봤습니다.
8. 자바스크립트 발전 방향을 알아보겠습니다.
9. 브라우저를 벗어난 활용과 화면 구현을 100% 자바스크립트만으로 그리는 형식으로까지 발전하고 있습니다.
10. 이전에 멀티미디어 플러그인의 리치 인터넷 애플리케이션 형태들이 스크립트만으로 구현하고 있는 추세입니다.
11. 자바스크립트로 html DOM 구조를 변경하다보니 컨텐츠가 엉뚱한 위치에 위치에 생성되기도 합니다.
12. 이런 문제점들에 대해서 어떠떻게 고려할지 예시를 통해서 살펴보도록 하겠습니다.
13. 모든 마우스 액션에 상응하는 키보드 이벤트를 중복으로 줘야 됩니다. mousedown과 keydown, mouseup과 keyup, click과 keypress, mouseover과 focus, mouseout과 blur. 예시를 보시면 mouseover 에만 들어가있는 탭 컨텐츠 노출 기능이 tab 키로 이동시에는 노출이 안됩니다. 따라서 같은 액션을 focus 에도 중복으로 넣어줘야 됩니다.
14. a 링크 태그의 href 속성을 무시하고 click 이벤트를 통해 액션을 제어지만 href 의 속성을 최대한 이용하여 스크립트 미지원 환경에서도 최종적으로 같은 결과의 액션이 일어나도록 처리해줘야 됩니다.
예시를 보시면 스크립트에서 "이동하시겠습니까?" 의 확인 창을 띄운 후 페이지 이동을 하려는 동작을 요할때 a 태그의 href 이동 경로 url 을 그대로 갖고 와서 확인 누르면 이동할수 있게 처리하면 좋습니다.
15. 피이지내에서 사용자 이벤트에 의해 컨텐츠 생성할때 innerHTML 을 많이 사용하지만 해당 document 위치에 문자열 형식의 innerHTML 을 사용하시기 보다는 createElement를 통해서 가상객체를 먼저 생성한 후 appendChild 로 삽입해 주도록 합니다.
예시를 보시면 추가 버튼을 누르면 입력란이 추가로 생성되는데 이와 같이 스크립트에서는 createELement 를 활용하여 넣어주시면 됩니다.
16. show hide 기능을 쓸때는 이벤트 핸들러 바로 뒤에 노출되도록 HTML 구조도에 맞게 보여지도록 하셔야 됩니다.
첫번째 예시로는 설정 버튼을 누르면 노출되는 설정메뉴들이 바로 설정버튼 다음에 나오도록 해야됩니다.
두뻔째 예시로는 전화 입력 폼 에서 번호가 아닌 문자를 입력하시면 경고 dialog 창이 나타나는데 이를 바로 뒤에 넣지 못넣는다면 focus 를 dialog 의 첫번째 텍스트에 focus를 주시고 dialog 내부에 있는 버튼들에 tabindex=1 속성을 줘서 tab 키로 탐색시 dialog 안에서만 이동되고 닫게되면 열리기 전 영역이나 원하는 영역으로 focus 를 주시면 됩니다.
17. a,input,buuton 등 Html 기본 이벤트 핸들러 태그들 외에 어쩔수 없이 액션을 넣어야할 경우 click 이벤트만으로 처리하게 되면 키보드 접근이 안되기 때문에 tabindex=0 , keypress 이벤트, aria-role 속성도 추가해주시면 접근이 가능합니다.
예시를 보시면 img 태그로 되어있는 썸네일 이미지를 클릭하면 큰이미지가 변경이 되는데 click 이벤트만 주고 있어서 키보드 접근이 안됩니다. 위와 같이 해당 속성 및 추가 이벤트를 주시면 키보드로도 이벤트가 활성화 됩니다.
18. 자동 슬라이드 되는 효과나 동영상에 대해서 재생/정지 기능을 제공을 해야합니다. 특히 라이브러리를 사용하실때 이런 접근성이 용이한 기능들이 존재하는지 확인하고 이용해주세요.
19. 브라우저마다 지원 함수들이 다른게 존재하는데 조건문을 줘서 브라우저별 그에 맞는 함수들을 모두 지원해줘야 됩니다.
예시로 addEventListener 함수는 ie8이하에서 지원이 안되고 대신 attachEvent 함수를 지원하고 있기 때문에 조건문으로 addEventListener 인식시 해당 함수를 사용하고 attachEvent 인식시에 이 함수를 사용하게 크로스 브라우징 처리를 해줍니다.
20. 시간과 고려를 통해 더욱 많은 사람들과 소통하고 공유할 수 있기를 바랍니다.
SearchLove London | Will Critchlow, 'The Threat of Mobile' Distilled
Our focus on responsive websites and our fascination with app store rankings may be blinding us to the real threats and opportunities of the mobile revolution. In particular, as Google continues to ratchet up its mobile-first approach to design and Facebook looks more and more like a mobile channel, what should we be changing in our campaigns and strategies?
An immersive workshop at General Assembly, SF. I typically teach this workshop at General Assembly, San Francisco. To see a list of my upcoming classes, visit https://generalassemb.ly/instructors/seth-familian/4813
I also teach this workshop as a private lunch-and-learn or half-day immersive session for corporate clients. To learn more about pricing and availability, please contact me at http://familian1.com
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
If you’re working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain.
Hitchhiker's guide to the front end development정윤 김
2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 front-end development 트렌드 및 프로세스 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
Een globale inleiding op het gebied van internetveiligheid. We maken gebruik van meldknop.nl (dat is wel een site voor de jeugd, maar blinkt uit in overzicht en gebruiksgemak) en van informatie van Seniorweb.nl
1. 스크립트를 통한 접근성은 어떻게 지켜야 할까?
2. 목차 순서로 최종 실무예시 및 해결법에 대해서 중점적으로 다루겠습니다.
3. 접근성은 마크업만 지키면 되는가? 대부분은 접근성은 마크업 개발자들의 책임이라고 생각합니다.
4. 시멘틱 마크업은 필수적이긴 하지만 접근성의 전부라고 할수 없습니다.
5. 기획 디자인 부터 서버개발까지 사용성에 맞는 화면구성 및 디자인 그리고 그에 맞는 데이터 형식을 출력하는데에 모두 접근성을 고려해야합니다.
6. 성능을 저하시켜서 접근성을 지키기보다는 최신 환경 기준에 구환경에서는 최소한의 컨텐츠 가독이 가능하게 하여 신기술 도입장벽을 허물고 생산성을 높히는 단계적 향상을 추구하고 있습니다.
7. 모두 똑같은 정보를 습득할수 있게 전달력이 좋고 가독성이 좋은 것을 접근성이라고 개인적으로 결론 지어봤습니다.
8. 자바스크립트 발전 방향을 알아보겠습니다.
9. 브라우저를 벗어난 활용과 화면 구현을 100% 자바스크립트만으로 그리는 형식으로까지 발전하고 있습니다.
10. 이전에 멀티미디어 플러그인의 리치 인터넷 애플리케이션 형태들이 스크립트만으로 구현하고 있는 추세입니다.
11. 자바스크립트로 html DOM 구조를 변경하다보니 컨텐츠가 엉뚱한 위치에 위치에 생성되기도 합니다.
12. 이런 문제점들에 대해서 어떠떻게 고려할지 예시를 통해서 살펴보도록 하겠습니다.
13. 모든 마우스 액션에 상응하는 키보드 이벤트를 중복으로 줘야 됩니다. mousedown과 keydown, mouseup과 keyup, click과 keypress, mouseover과 focus, mouseout과 blur. 예시를 보시면 mouseover 에만 들어가있는 탭 컨텐츠 노출 기능이 tab 키로 이동시에는 노출이 안됩니다. 따라서 같은 액션을 focus 에도 중복으로 넣어줘야 됩니다.
14. a 링크 태그의 href 속성을 무시하고 click 이벤트를 통해 액션을 제어지만 href 의 속성을 최대한 이용하여 스크립트 미지원 환경에서도 최종적으로 같은 결과의 액션이 일어나도록 처리해줘야 됩니다.
예시를 보시면 스크립트에서 "이동하시겠습니까?" 의 확인 창을 띄운 후 페이지 이동을 하려는 동작을 요할때 a 태그의 href 이동 경로 url 을 그대로 갖고 와서 확인 누르면 이동할수 있게 처리하면 좋습니다.
15. 피이지내에서 사용자 이벤트에 의해 컨텐츠 생성할때 innerHTML 을 많이 사용하지만 해당 document 위치에 문자열 형식의 innerHTML 을 사용하시기 보다는 createElement를 통해서 가상객체를 먼저 생성한 후 appendChild 로 삽입해 주도록 합니다.
예시를 보시면 추가 버튼을 누르면 입력란이 추가로 생성되는데 이와 같이 스크립트에서는 createELement 를 활용하여 넣어주시면 됩니다.
16. show hide 기능을 쓸때는 이벤트 핸들러 바로 뒤에 노출되도록 HTML 구조도에 맞게 보여지도록 하셔야 됩니다.
첫번째 예시로는 설정 버튼을 누르면 노출되는 설정메뉴들이 바로 설정버튼 다음에 나오도록 해야됩니다.
두뻔째 예시로는 전화 입력 폼 에서 번호가 아닌 문자를 입력하시면 경고 dialog 창이 나타나는데 이를 바로 뒤에 넣지 못넣는다면 focus 를 dialog 의 첫번째 텍스트에 focus를 주시고 dialog 내부에 있는 버튼들에 tabindex=1 속성을 줘서 tab 키로 탐색시 dialog 안에서만 이동되고 닫게되면 열리기 전 영역이나 원하는 영역으로 focus 를 주시면 됩니다.
17. a,input,buuton 등 Html 기본 이벤트 핸들러 태그들 외에 어쩔수 없이 액션을 넣어야할 경우 click 이벤트만으로 처리하게 되면 키보드 접근이 안되기 때문에 tabindex=0 , keypress 이벤트, aria-role 속성도 추가해주시면 접근이 가능합니다.
예시를 보시면 img 태그로 되어있는 썸네일 이미지를 클릭하면 큰이미지가 변경이 되는데 click 이벤트만 주고 있어서 키보드 접근이 안됩니다. 위와 같이 해당 속성 및 추가 이벤트를 주시면 키보드로도 이벤트가 활성화 됩니다.
18. 자동 슬라이드 되는 효과나 동영상에 대해서 재생/정지 기능을 제공을 해야합니다. 특히 라이브러리를 사용하실때 이런 접근성이 용이한 기능들이 존재하는지 확인하고 이용해주세요.
19. 브라우저마다 지원 함수들이 다른게 존재하는데 조건문을 줘서 브라우저별 그에 맞는 함수들을 모두 지원해줘야 됩니다.
예시로 addEventListener 함수는 ie8이하에서 지원이 안되고 대신 attachEvent 함수를 지원하고 있기 때문에 조건문으로 addEventListener 인식시 해당 함수를 사용하고 attachEvent 인식시에 이 함수를 사용하게 크로스 브라우징 처리를 해줍니다.
20. 시간과 고려를 통해 더욱 많은 사람들과 소통하고 공유할 수 있기를 바랍니다.
SearchLove London | Will Critchlow, 'The Threat of Mobile' Distilled
Our focus on responsive websites and our fascination with app store rankings may be blinding us to the real threats and opportunities of the mobile revolution. In particular, as Google continues to ratchet up its mobile-first approach to design and Facebook looks more and more like a mobile channel, what should we be changing in our campaigns and strategies?
An immersive workshop at General Assembly, SF. I typically teach this workshop at General Assembly, San Francisco. To see a list of my upcoming classes, visit https://generalassemb.ly/instructors/seth-familian/4813
I also teach this workshop as a private lunch-and-learn or half-day immersive session for corporate clients. To learn more about pricing and availability, please contact me at http://familian1.com
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
If you’re working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain.
Hitchhiker's guide to the front end development정윤 김
2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 front-end development 트렌드 및 프로세스 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
Een globale inleiding op het gebied van internetveiligheid. We maken gebruik van meldknop.nl (dat is wel een site voor de jeugd, maar blinkt uit in overzicht en gebruiksgemak) en van informatie van Seniorweb.nl
카메라 앱은 사용자가 찍은 사진을 필터, 스티커 등을 사용하여 변형시키고 소셜 미디어에 공유할 수 있게 함으로써, 사용자들에게 재미를 주고, 개개인의 개성을 표현할 수 있게 합니다.
하지만, 기존 카메라 앱은 사진에 담긴 의미를 파악하고, 해당 의미를 변형해 새로운 결과물을 만들어 내는 데에는 한계가 있습니다.
머신러닝랩에서는 이러한 한계를 극복하기 위해 딥러닝 방식을 사용하여 카메라 앱을 만들었습니다.
3가지 종류의 카메라 앱(명화 합성 서비스, 헤어 색상 변환 서비스, 배경 합성 서비스)을 출시하였고, 각각의 앱에 적용된 기술들과 변환 성능의 향상을 위하여 개선해본 것들을 이야기 하고자 합니다.
목차
1. 왜 딥러닝을 이용한 카메라 앱인가?
2. 딥러닝 카메라 앱
- 명화 합성 서비스
- 헤어 색상 변환 서비스
- 배경 합성 서비스
대상
딥러닝을 이용한 이미지 합성에 관심이 있는 사람
Improve CSS IR & Sprites Image Techniques for Accessibilityyamoo9
[12.09] 제10회 2014 정보접근성 동향 세미나 발표 자료
Windows High Contrast Mode 감지 및 CSS 활성화 Images 비활성화 상태 체크 감지 스크립트, ImproveIR.js를 활용한 IR 테크닉 접근성 향상
코드 소스 다운로드
https://github.com/yamoo9/Improve-IR-Accessible-Tech
5. 5 / 이미지는 마크업의 반이다
1.1 웹에서 많이 사용하는 이미지 파일형식
JPEG/JPG GIF
지원색상 : 24비트(16,777,215색)
2)손실 압축방식
1)압축률 ↑ 용량↓ 품질 ↓
4)트루컬러를 지원하며
대중적으로 사용됨
사용용도 : 사진, 제품사진 등 다양한 색상
이 필요한 이미지
지원 색상 : 8비트 (256색)
3) 무손실 압축방식
파일전송시간의 최소화를 위해 만들어짐
투명 지원, 반투명 X
여러 장의 이미지를 1개 파일에 담아 애
니메이션 효과가능
사용용도 : 색이 단순한 로고,블릿 기호
나 움직이는 아이콘 등
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 / 이미지는 마크업의 반이다
1.1 웹에서 많이 사용하는 이미지 파일형식
PNG
GIF와 JPEG의 장점을 합친 파일형식
GIF보다 압축률이 우수
PNG-8 PNG-24
지원 색상 : 8비트 (256색)
GIF와 거의 유사하나 용량이 적음
투명 지원, 반투명 X
사용용도 : 색이 단순한 로고,블릿 기호나
움직이는 아이콘 등
지원색상 : 24비트(16,777,215색)
투명, 반투명 모두 지원
무손실 압축하므로 큰 이미지의 경우 파일
용량이 매우 클수 있음
사용용도 : 배경이 투명/반투명한 다양한
색상의 이미지나 스프라이트
무손실 압축방식
반투명 지원
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
10. 10 / 이미지는 마크업의 반이다
2.1 포토샵을 활용한 이미지 저장방법
PSD 원본파일을 가급적 가지고 있어라!
TIP
11. 11 / 이미지는 마크업의 반이다
3
Save : 저장하기
Save As…: 다른 이름으로 저장하기
Save for Web & Devices :
웹과 디바이스 용으로 저장하기
2.1 포토샵을 활용한 이미지 저장방법
단축키는 Alt+Shift+Ctrl+S
TIP
2
1
1
2
3
12. 12 / 이미지는 마크업의 반이다
저
장
옵
션
2.1 포토샵을 활용한 이미지 저장방법
1
2
3
4
이미지 파일형식과 품질 설정
메타데이터 삭제
설정값에 따라 용량과 품질을 비교
저장
13. 13 / 이미지는 마크업의 반이다
GIF 저장옵션 PNG-8 저장옵션
2.1 포토샵을 활용한 이미지 저장방법
14. 14 / 이미지는 마크업의 반이다
PNG-24 저장옵션
2.1 포토샵을 활용한 이미지 저장방법
35. 35 / 이미지는 마크업의 반이다
4. 이미지 품질과 로딩속도
이미지 품질을 5단계(10, 30, 50, 80, 100)로 나누어
이미지 로딩속도를 측정
36. 36 / 이미지는 마크업의 반이다
4. 이미지 품질과 로딩속도
이미지 정보
파일형식 : JPG파일
크기 : 4320px × 3240px
속도 측정도구 Chrome 개발자 도구 – [Network]
체크 방식
품질이 다른 5개의 이미지가 첨부된 각 html 파일을
로드하여 이미지가 모두 나타날 때까지 걸리는 시간을 체크함
37. 37 / 이미지는 마크업의 반이다
이미지를 받기 직전까지
준비되는 시간 :
4+13+104+120=241ms=0.241s
이미지 받는 시간 : 7.23s
데이터 분석 방법
막대그래프에 마우스를 올려보면 로딩관련한 확인이 가능 (ms=1/1,000s)
이미지를 로드하는데 걸린 시간
= 0.241+7.23 = 총 7.47s
4. 이미지 품질과 로딩속도
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 / 이미지는 마크업의 반이다
품질 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개발자의 몫
41. 41 / 이미지는 마크업의 반이다
5.1 스프라이트는 무엇인가요?
스프라이트란 여러 개의 개별 이미지를 하나로 만드는 것으로,
페이지 속도이슈를 최소화 할 수 있는 이미지 최적화 기법
-
스프라이트
이미지
-
개별
이미지
42. 42 / 이미지는 마크업의 반이다
5.1 스프라이트는 무엇인가요?
스프라이트란 여러 개의 개별 이미지를 하나로 만드는 것으로,
페이지 속도이슈를 최소화 할 수 있는 이미지 최적화 기법
이미지 : 1개
총 용량 : 36.9KB
스프라이트
이미지
이미지 : 100개
총 용량 : 156KB
개별
이미지
43. 43 / 이미지는 마크업의 반이다
5.2 스프라이트에 적합한 이미지
자주 바뀌는 이미지 자주 바뀌는 않는 이미지
이미지는 2종류로 나뉨
44. 44 / 이미지는 마크업의 반이다
자주 바뀌는 이미지 자주 바뀌는 않는 이미지
쇼핑몰 배너, 상품 이미지 등 GNB, LNB, 검색창, 로그인, 하단 푸터, 버튼요소 등
5.2 스프라이트에 적합한 이미지
어떤 이미지가 스프라이트에 적합할까요?
45. 45 / 이미지는 마크업의 반이다
쇼핑몰 배너, 상품 이미지 등 GNB, LNB, 검색창, 로그인, 하단 푸터, 버튼요소 등
5.2 스프라이트에 적합한 이미지
어떤 이미지가 스프라이트에 적합할까요?
자주 바뀌는 않는 이미지자주 바뀌는 이미지
46. 46 / 이미지는 마크업의 반이다
자주 바뀐다는 것은 매번 교체를 위한 어떠한 액션이 필요하다는 뜻
이로 인해 스프라이트 작업할 때 기존에 있던 다른 이미지에 영향을 줄 수 있음
5.2 스프라이트에 적합한 이미지
자주 바뀌지 않는 이미지가 스프라이트에 적합
48. 48 / 이미지는 마크업의 반이다
웹브라우저는 서버로부터 이미지를 요청.
만약 100개의 이미지가 사용되었다면 100번 요청.
서버 요청횟수가 많아지면 그만큼 로딩속도가 느려져 좋은 경험을 주지 못함.
하지만, 스프라이트는 이미지 개수가 줄어들기 때문에,
서버 요청횟수를 최소화한 몇 번의 통신만으로도
다양한 이미지를 볼 수 있는 장점.
5.3 스프라이트의 장점
웹페이지 로딩속도가 빨라집니다.
49. 49 / 이미지는 마크업의 반이다
5.3 스프라이트의 장점
1번 이미지 요청/다운
오~ 완전 빨리 떠~
HTTP 서버
[스프라이트를 사용했을 때 기분좋은 사용자의 모습]
HTTP 서버
[개별 이미지를 사용했을 경우 짜증내는 사용자의 모습]
아악! 왜케 느려?
100번 이미지 요청/다운
50. 50 / 이미지는 마크업의 반이다
많은 이미지들을 1개의 파일로 관리할 수 있고,
네이밍에 대한 부담도 줄어들기 때문에 관리측면에서도 유용.
5.3 스프라이트의 장점
파일 관리가 깔끔해집니다.
51. 51 / 이미지는 마크업의 반이다
스프라이트 적용 전 스프라이트 적용 후
5.3 스프라이트의 장점
100개 1개
53. 53 / 이미지는 마크업의 반이다
6.1 스프라이트 제작하기
① background 레이어 생성
Tip) background 레이어에 색을 입히면 이미지들이 잘 구분됨.
54. 54 / 이미지는 마크업의 반이다
2px
2px 2px
2px
6.1 스프라이트 제작하기
② 각 SNS 아이콘 이미지들
추가하고,아래와 같이 이미지
간 최소 2px 이상 간격을 줌.
Tip) 간격을 주는 이유는 태블릿의 Safari 브라우저에서
이미지가 조금 넘쳐 보이는 버그를 방지하기 위함.
55. 55 / 이미지는 마크업의 반이다
③ 가장자리들의 여백을 최소
화해서 자름
④ 배경의 투명도 지원, 깨짐
정도, 파일용량 등을 고려하
여 PNG, GIF, JPG 중 선택하
여 저장
6.1 스프라이트 제작하기
Tip) 각 성격에 맞는 이미지들끼리 묶어야 효과적
56. 56 / 이미지는 마크업의 반이다
6.2 스프라이트 코드 선언하기
① 스프라이트 이미지를 사용하려면 background속성을 사용
② 스프라이트 공통 클래스 .spr_share를 선언하고 사이즈, 이미지 경로 등을 입력
결과화면
HTML
CSS
57. 57 / 이미지는 마크업의 반이다
③ 각각의 이미지들은 background-position으로 좌표값을 지정
6.2 스프라이트 코드 선언하기
결과화면
HTML
CSS
58. 58 / 이미지는 마크업의 반이다
디바이스 대응시,
스프라이트 크기/위치는 짝수로 하는 것이 좋다
63. 63 / 이미지는 마크업의 반이다
홀수크기
짝수크기
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
아이폰7
홀수 크기의 이미지를 사용했을때
짝수 크기보다 뿌옇게 보이는 것을 알 수 있습니다.
64. 64 / 이미지는 마크업의 반이다
홀수크기 (원본) 짝수크기
53px 52px
한글자를 확대해서 보아도,
홀수크기가 더 뿌옇게 보이고, 1px 더 큰것을 볼 수 있습니다.
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
65. 65 / 이미지는 마크업의 반이다
홀수크기 (원본) 짝수크기
53px 52px
한글자를 확대해서 보아도,
홀수크기가 더 뿌옇게 보이고, 1px 더 큰것을 볼 수 있습니다.
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
왜 그럴까요?
66. 66 / 이미지는 마크업의 반이다
디바이스 해상도 대응을 위해 50% 사이즈 크기로 선언해야 하다보니
소수점을 피하기 위한 원래 크기보다 1px 크게 background-size가 선언되어
이미지가 늘어나면서 뿌옇게 보이는 현상이 발생
315px
316px
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
1px
67. 67 / 이미지는 마크업의 반이다
스프라이트 이미지 위치에 따라 어떻게 표현되는지 대해 알아보겠습니다.
각각 홀수, 짝수 위치에 이미지를 놓고 디바이스에서 확인
홀수 위치 짝수 위치
97, 288 96, 288
0,0 0,0
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
CSS
width : 46px
height : 46px
background-size : -48px -144px
68. 68 / 이미지는 마크업의 반이다
홀수 위치
짝수 위치
흰 여백 생김
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
아이폰7
69. 69 / 이미지는 마크업의 반이다
홀수 위치
짝수 위치
흰 여백 생김
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
아이폰7
왜 그럴까요?
70. 70 / 이미지는 마크업의 반이다
이미지가 홀수 위치에 놓였지만,
소수점을 피하기 위한 짝수값 선언을 위해 원래의 위치보다 -1px 인 위치에
background-position값을 선언했기 때문입니다.
실제위치 : 97, 288
이미지 선언기준 : 96, 288
background-position:-48px -144px
cf. 스프라이트 크기/위치를 짝수로 해야하는 이유?
50%
1px
71. 71 / 이미지는 마크업의 반이다
스프라이트 이미지의 크기나 위치를 홀수로 할 경우,
이미지가 정확한 비율로 표현되지 않기때문에
짝수로 하는 것이 좋습니다.
짝수가 최고!
72. 72 / 이미지는 마크업의 반이다
6.3 주의사항
스프라이트 원본 PSD는 꼭 보관하세요.
여럿이서 작업을 하다 보면 이미지 위치가 다른 사람 이미지와
겹치거나 파일이 없어지는 경우가 발생.
이를 대비하기 위해 반드시 원본 PSD을 이미지가 있는 위치에
함께 보관하는 것이 좋음.
오른쪽 이미지와 같이 가이드를 활용하여 이미지 영역을 명확
히 해두면 다른 사람이 작업을 하더라도 동일 위치에 이미지가
겹치는 상황을 방지할 수 있음.
이미지 크기, 용량이 너무 크지 않도록 해야 합니다.
이미지의 개수를 줄이기 위해 하나의 이미지에 계속 합치다 보면 이미지 크기, 용량이 커질 수 밖에 없다.
결국 본래 스프라이트 사용목적에 어긋나게 됨. 그래서 초기에 어떤 이미지를 스프라이트로 만들 것인지 판단하는 것이 중요.
크기가 커진다면 유사한 콘텐츠끼리 묶어 별도로 스프라이트를 만들거나, 개별 이미지로 사용하는 것이 좋다.
가이드(guides)
74. 74 / 이미지는 마크업의 반이다
7. 스프라이트 유형별 분석
홈페이지 종류
쇼핑몰형
이벤트&
프로모션형
기업형 개인형
스프라이트는 콘텐츠에 따라 공통으로 사용하기도 또는 특정 콘텐츠 전용으로 사용합니다.
스프라이트를 홈페이지 유형별로 어떻게 사용하면 좋은지 알아보겠습니다.
75. 75 / 이미지는 마크업의 반이다
1)구성 : 메인 / 소개 / 정보 / 홍보 / IR / 채용 등
2)특징 : 기업형 사이트는 사이트 전체에 기업만의 특성(CI, 분위기 등)을 반영하게 됩니다.
메인 페이지는 디자인적인 화려함과 서브 페이지의 간단한 요약 등이 주로 노출됩니다.
서브 페이지는 기업소개나 채용정보 등 상세한 내용을 담고 있습니다.
3)스프라이트 구성
7.1 기업형
공통
페이지에서 공통으로 노출되는 부분은 공통 스프라이트로
묶어주면 좋습니다. 주로 페이지의 상단, 하단이 해당됩니다.
메인
페이지
메인 페이지는 메인 페이지에서만 노출되기 때문에, 메인 페
이지 전용 스프라이트로 묶습니다.
서브
페이지
그 외 페이지는 회사 소개나 채용 등 정보 제공용이므로 큼
직한 이미지나 텍스트, 공통 가이드가 들어가므로 서브 페이
지 전용 스프라이트로 묶어주면 좋습니다.
77. 77 / 이미지는 마크업의 반이다
7.2 쇼핑몰형
1)구성 : 메인 / 상품상세 / 상품리스트 / 장바구니 등
2)특징 : 단순한 접근이 아닌 흥미를 유발하여 소비자로 하여금 최종 구매단계까지 이르도록 유도해
야 하기 때문에 상품 진열(홍보)에 크게 초점을 둡니다.
메인 페이지는 카테고리 별 BEST상품이나 기획전 및 이벤트를 노출하며, 그 외 페이지는 상품의
상세나 카테고리 별 리스트, 장바구니 등으로 이루어져 있습니다.
3)스프라이트 구성
공통
카테고리 별 상품 리스트들 가이드는 대부분 똑같기 때문에
한꺼번에 스프라이트로 묶습니다.
메인/서브
페이지
서브페이지와 메인 페이지와 카테고리목록을 표현하는 가이
드가 다를 수 있습니다. 다를 경우에는 해당 영역의 전용 스
프라이트로 묶습니다.
79. 79 / 이미지는 마크업의 반이다
7.3 이벤트 & 프로모션형
1)구성 : 메인 / 상세
2)특징 : 단발성 페이지들로, 사용자의 참여를 유도하기 위해 디자인적으로 화려한 큼직한 이미지들
로 구성되며, 복잡한 구조의 마크업이 필요하지 않습니다.
응모하기 버튼, 문자 받기 등 이벤트에 해당하는 콘텐츠가 포함됩니다.
3)스프라이트
공통
페이지 구성이 단순하여 용량에 제한이 없다면, 전부 스프
라이트로 해도 상관없습니다.
80. 80 / 이미지는 마크업의 반이다
7.4 개인형
1)구성 : 개인마다 다름
2)특징 : 개인의 성향에 따라 홈페이지 구성이 달라집니다. 정보전달의 목적이라면 대부분 블로그 형
식으로 제공이 되고, 포트폴리오 목적이라면 화려함이 가미된 리스트 형식으로 제공이 됩니다.
3)스프라이트
공통
공통으로 노출되는 이미지라면 공통 스프라이트로 묶어
주면 좋습니다. 기업형에 비해 콘텐츠 많지않아 서브페이
지이더라도 용량 제한이 없다면 공용 스프라이트 1개로
사용해도 좋습니다.