개발자로 전업하기전에 잠깐 편집디자인일을 한적이있습니다. 그래서 처음 개발일을 시작할때도 사실은 웹마스터라는 직업이 한창 유행할때 그쪽으로 진로를 잡았습니다만, 너무 사람이 많아 취업이 안된다는 이야기를 듣고 포기를 한 기억이 나네요.
현재 개발자, 디자이너, 퍼블리셔 이렇게 나뉘어지는 영역구분이 퍼블리셔의 영역이 점점 디자이너로 넘어가는 단계인것 같습니다. 예전에는 디자인 영역인 CSS부분에 접근하기에 너무 힘들었지만 이제는 CSS조차 프레임워크로 손쉽게 반응형웹을 만들 수 있으니 전문분야가 점차로 엷어지는 느낌입니다. 물론 세부적으로 들어가면 역량이 차이가 나겠습니다만, 우리나라 클라이언트들이 그런걸 신경을 쓰나요? 중간과정이야 어떻든 결과물만 만들어내면되니 참 걱정이네요.
개발자로서 장래에 대한 대비책으로 퍼블리싱을 공부하기로 하고 이제까지 공부하면서 느낌점/강의팁등을을 공유할 예정인데, 개발자가 보는 시선에서 접근하는것 방법이라 디자이너분들께서는 왜 이런이야기를 쓸데없이 할까? 이렇게 생각될 수도 있겠네요.
HTML5를 이해하기 위해서는 브라우저의 특성을 파악하셔야됩니다. 제일 골치덩이인게 Internet Explorer 죠. 특히 7버전과 8버전이 문제입니다. 왜냐하면 웹표준이 문제가 됩니다. 여기서 웹표준이란 W3C라는 월드와이드웹재단에서 표준안으로 권고하는 사항을 말하는데요.
마이크로소프트에서 자기들만 잘난맛에 맘대로 쓰다가 표준을 안 지킨거죠. 지금에서야 표준문제를 많이 극복했지만 구버전 익스플로러들은 문제가 좀 있는데, 대다수의 사용자가 사용을 하고 있으니 국내 웹서비스에서는 고려를 안할 수가 없죠. 그래서 크로스브라우징이라는 용어가 등장했습니다.
모든 인터넷브라우저(익스프로러,사파리,오페라,파이어폭스,모자익) 에서 문제없이 화면이 동일하게 나오는 걸 크로스브라우징이라고 하는데요. 이건 좀 웃기는 이야기입니다. 표준을 지켜서 그대로 만들었다면 당연히 제대로 나와야 된다는거죠. 근데 그게 안되니 웃기는 이야기죠. 지금은 엄청나게 많이 차이를 줄이고, 수많은 디자이너와 퍼블리셔들이 노력한덕에 어느정도 화면을 맞출수 있는 팁과 노하우가 많이 축적된 상태입니다.
웹표준을 위해서는 희생해야할께 너무 많습니다. 대중화된 ie8을 지원안하는게 가장 좋은 방법이기도 하죠. 특히 구 브라우저들은 html5 자체를 지원안하기에 웹호환성에도 문제가 있습니다.
우선, 기본적인 HTML5 페이지를 살펴보시죠.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
일반적인 페이지와의 차이점은 하나밖에 없습니다. DOCTYPE선언 부가 다르다는거죠. DOCTYPE은 html 버전에 따라 선언하는 방식이 다르며, 그에 따른 CSS를 처리할 수 있는 부분이 다르니 잘 살펴보시기바랍니다.
웹표준과 크로스브라우징을 위해서 파이어폭스의 파이어버그나 구글크롬 개발자도구, IE Tester등의 툴은 꼭 필요합니다.
기본적인 태그설명은 그때그때 익히면 되는것이지만, 툴의 사용은 중요한 부분인것 같아서 따로 포스팅을 해야 할것 같습니다. 아무래도 가장 기초가되며 정말 중요한 부분이거든요.
퍼블리싱에 필요한 스킬은 포토샵으로 디자인된 파일을 잘자르는 기술이 필요할거구요. 그리고 CSS로 배치하는 능력이 필요한데, 메모리의 공간낭비를 줄이기 위해서 이미지 최적화및 CSS로 구현할 수 있는 단추는 이미지 생락하는 능력, 기능적으로 jQuery나 스크립터를 잘 활용해서 어떤 브라우저든 동일한 화면을 보여줄수 있는 스킬이 필요합니다.
장애인들을 위한 웹접근성도 고려를 해야될 부분입니다. 화면클릭 하나하나를 고려해야하며, 이미지 로딩이 느려질경우 대체이미지표시등등 퍼블리싱은 간단하게 생각할 부분이 아니더라구요.
자, 이제 필요한스킬을 나열해보겠습니다.
1. 포토샵 이미지 컷팅
2. HTML5 / CSS3 에 대한 이해
3. jQuery / JAVA Script
4. 웹제작도구의 능숙한 활용
최소한 위에 나열한 스킬중 1번과 2번은 능숙하셔야합니다.디자이너가 레이아웃을 잡은 PSD 파일을 알맞게 나누어서 이미지를 만들고 CSS를 통해서 다시 재배치를 해야하기 때문이죠.화면레이아웃을 구성할때 웹브라우저에 따라 조금씩 간격이라던지, 마우스 오버, 이벤트 등에서 원하는 동작이 다르게 발생하는 경우가 생기는 경우가 있습니다.
그럴때 jQuery나 JAVA Script 를 사용해서 미세하게 어긋난 부분이나 기능구현을 처리하기도 합니다.
다음 포스팅은 툴 사용법에 대해서 이야기해보겠습니다. 감사합니다!
'IT정보센터 > HTML & CSS' 카테고리의 다른 글
| CSS 이미지 전체화면 띄우기 (0) | 2019.06.02 |
|---|---|
| 아이콘 문자표 손쉽게 적용하기 (0) | 2017.06.30 |
| CSS 스타일 분석 파이어버그 사용하기 (0) | 2017.05.03 |
| HTML 색상표 손쉽게 찾아보기 (0) | 2015.07.28 |
| 모바일웹 개발시 전화번호 자동링크 삭제처리 (1) | 2015.07.08 |
| [CSS] 반응형웹페이지의 필수 - 미디어쿼리 활용 (0) | 2015.06.26 |
| [CSS] 반응형웹 개발시 기종별해상도 테스트 사이트 (0) | 2015.06.23 |
| 반응형 CSS 프레임워크 부트스트랩을 체험해보다 (0) | 2015.06.17 |
| 모바일작업시 전화번호 강제링크 생성될때 (0) | 2015.06.14 |