- 출간 정보
- 2017.11.10. 전자책 출간
- 2017.11.15. 종이책 출간
- 파일 정보
- 11.8MB
- 203쪽
디자이너가 묻고 개발자가 답하는 웹 이야기 상세페이지
책 소개
<디자이너가 묻고 개발자가 답하는 웹 이야기> 웹 디자이너는 아름답게 디자인한 웹 페이지를 사용자에게 보여주고 싶어합니다. 하지만 완성된 웹 페이지는 웹 디자이너가 처음 생각한 디자인과 완벽하게 같지 않은 경우가 많습니다. 디자인대로 구현할 수 없거나 디자인대로 구현하면 문제가 생길 수 있는 경우 마크업 개발자는 웹 디자이너에게 디자인 변경을 요청합니다. 웹 디자이너는 의도한 디자인이 제대로 구현되었는지 마크업 결과를 확인하고 필요한 경우 적절하게 디자인을 변경합니다. 이런 커뮤니케이션은 웹 서비스를 개발하고 테스트하는 단계까지 계속됩니다.
만약 어떤 디자인은 구현할 수 있고 어떤 디자인은 구현할 수 없는지, 브라우저가 어떤 것은 표현할 수 있고 어떤 것은 표현할 수 없는지 웹 디자이너가 잘 알고 있다면, 웹 디자이너와 마크업 개발자 사이에서 불필요하게 반복되는 커뮤니케이션을 줄일 수 있을 것입니다.
이 책에서는 다음과 같은 내용을 다룹니다.
• 디자이너와 마크업 개발자의 작업 환경
• 사용자의 인터넷 이용 환경
• HTML과 CSS로 구현할 수 있는 디자인과 구현할 수 없는 디자인
• 웹 서비스 검수 시 주의할 점과 유용한 도구
저자 프로필
저자 소개
서미연
NHN Technology Services
현재 NHN Technology Services에서 프런트엔드 개발자로 일하고 있으며, 네이버 서비스에서 로그인, 회원가입, 내정보, 통합검색, 공통 댓글, 스포츠, 쥬니어네이버 등의 마크업을 담당했다.
사내외에서 웹 접근성, WebKit, 실버라이트 관련 강의를 했으며, 저서로는 “웹킷 CSS 바이블: 실무 편”, “웹킷 CSS 바이블: 레퍼런스 편”이 있다.
유용웅
NHN Technology Services
현재 NHN Technology Services에서 UX 디자이너로 일하고 있으며, 네이버 로그인, 회원가입, 고객센터 등 네이버 서비스 공통 기능의 디자인을 진행하고 있다.
한세대학교 특별 강의를 비롯해 사내외에서 다수의 디자인 관련 강의를 했다.
목차
1. 왜 웹 디자이너가 원하는 대로 구현되지 않는 건가요?
1.1 웹 디자이너와 마크업 개발자의 대화
1.2 웹 디자이너와 마크업 개발자의 작업 환경
1.3 사용자의 인터넷 이용 환경
2. 텍스트
2.1 글꼴
2.2 크기와 모양
Q1. 꼭 웹 안전 글꼴을 사용해야 하나요?
Q2. 웹 글꼴을 사용하면 안 되나요?
Q3. 모바일용 웹 페이지에서 가느다란 글꼴을 사용하면 안 되나요?
Q4. 글자 크기를 13픽셀로 설정하니 이상하게 보여요.
Q5. 한글과 영문이 섞여 있는 텍스트에서 영문만 색이나 크기를 다르게 할 수 있나요?
Q6. 마크업이 변경될 때 텍스트 위아래 여백이 왜 달라지는 건가요?
Q7. 브라우저의 종류에 따라 위아래 여백이 달라 보여요.
Q8. 한글과 영문에서 위아래 여백에 차이가 나는 이유는 뭔가요?
Q9. 가변적인 텍스트 마크업 가이드에는 적당한 값을 넣어두면 안 되나요?
Q10. 한글과 영문이 섞여 있는 텍스트의 자간을 -1픽셀로 설정했더니 영문만 겹쳐요.
Q11. 말줄임표로 인한 공백과 말줄임표의 위치를 맞출 수 없나요?
Q12. 텍스트에 커닝 옵션을 적용할 수 없나요?
Q13. 밑줄의 위치와 색, 모양을 조정할 수 있나요?
Q14. 줄이 바뀔 때 단어가 잘리지 않게 할 수 있나요?
Q15. 툴팁 도움말 위치나 색을 변경할 수 있나요?
3. 이미지
3.1 이미지 형식
3.2 CSS로 만들 수 있는 그래픽 요소
3.3 배경 이미지
3.4 섬네일 이미지
3.5 버튼 이미지
Q16. 모바일용 웹 페이지는 왜 이미지를 2배 크기로 만들어야 하나요?
Q17. 포토샵의 블렌딩 효과는 적용할 수 없나요?
Q18. 블러 효과를 적용할 수 없나요?
Q19. 이미지 모서리를 둥글게 만들거나 동그란 이미지를 만들 수 있나요?
Q20. 마스크 효과를 적용할 수 있나요?
4. 선
4.1 선 스타일
Q21. 표의 세로선이 가로선에 끊어진 것처럼 보여요.
5. 사용자 입력
5.1 폼 요소
Q22. 폼 요소를 직접 만들거나 이미지를 폼 요소 위에 덮어씌워서 사용하면 안 되나요?
Q23. 클릭 영역에 점선이나 파란 선이 안 보이게 할 수 없나요?
Q24. 모바일용 웹 페이지에서 터치 영역 표시를 없앨 수 없나요?
6. 레이아웃
6.1 고정형/유동형/반응형 레이아웃
6.2 모바일 기기의 세로 모드와 가로 모드
Q25. 모바일용 웹 페이지는 왜 모든 픽셀 단위 숫자를 짝수로 지정해야 하나요?
Q26. 한 영역에 고정 너비와 유동 너비를 섞어서 사용할 수 없나요?
Q27. 모바일 화면에서 레이아웃이 틀어져요.
7. 부록
7.1 웹 페이지 검수 시 미리 확인할 사항
7.2 웹 페이지 검수에 유용한 도구
7.3 웹 디자이너가 알아두면 좋은 CSS 속성
리뷰
구매자 별점
0.0 점
점수비율
- 5
- 4
- 3
- 2
- 1
0명이 평가함
리뷰 작성 영역
내가 남긴 별점 0.0
별로예요
그저 그래요
보통이에요
좋아요
최고예요
'구매자' 표시는 리디북스에서 유료도서 결제 후 다운로드 하시거나 리디셀렉트 도서를 다운로드하신 경우에만 표시됩니다.
- 무료 도서 (프로모션 등으로 무료로 전환된 도서 포함)
- '구매자'로 표시되지 않습니다.
- 시리즈 도서 내 무료 도서
- '구매자’로 표시되지 않습니다. 하지만 같은 시리즈의 유료 도서를 결제한 뒤 리뷰를 수정하거나 재등록하면 '구매자'로 표시됩니다.
- 영구 삭제
- 도서를 영구 삭제해도 ‘구매자’ 표시는 남아있습니다.
- 결제 취소
- ‘구매자’ 표시가 자동으로 사라집니다.
리뷰 신고하기
이 책과 함께 구매한 책
이 책과 함께 둘러본 책
본문 끝 최상단으로 돌아가기
