편의상 경어는 생략합니다.
그럼 시작하겠습니다.
intro
언제부턴가 퍼블리싱을 계속 가르쳐왔다.
신입으로 취업하기 전부터, position 속성으로 한달을 끙끙 거리면서도,
어쨋든 이해한 것들을 아직 모르는 이에게 전달하기 위해서 무던히 노력해왔다.
그러던 와중에 현업을 경험하며 다양한 종류의 프로젝트를 수행했다.
내 실력이 혐오스러워서 잠을 줄여가며 공부하고 일에만 몰두했던 시절이 있다.
처음에는 내 권한도 몰랐고, 무엇을 요청해야하는지도 몰랐기에, 어디까지나 열심히 했다.
무조건 열심히.
그것이 때로 과해서 상대방이 당황한 적도 있었으며, 때때로 주변인을 피곤하게도 했지만.
이내 성심성의를 다해 일하는 사람이라는 평판을 얻기도 하였다.
많이 상처받았으며, 많이 배웠으며, 많이 단단해지게 되는 소중한 시간이었다.
주변에 it쪽 지인이 한 명도 없기에, 비전공자이기에,
모르기에 책을 보고 또 보고, 들어도 모르겠기에 오만가지 강의를 사서 들었다.
머리를 쥐어짜고 비비며 들었던 기억도 선명하다.
당연하게도 혹은 다행스럽게도
내 실력이라고 하는 녀석은 점차 늘기 시작했었고,
그러던 와중에서도 나는 항상 누군가 가르쳐왔다.
전역한 군인 친구를 타자연습부터 가르쳤으며, 판교에 있는 대형 웹에이젼시에 취업시켰다.
사랑하는 아내의 UXUI 디자이너 취업준비를 도와 커리어를 열어주었다.
현업에 있는 퍼블리셔, php개발자, 웹디자이너 지인들을 가르쳤으며, 가르치고 있다.
최근에는 프론트엔드 개발자가 되기 위해서 무던히 노력중이다.
일천하고 미천하지만 계속 공부하고 또 공부하고 있다.
개발 블로그라는 미명하에 제가 이것도 공부는 해봤습니다. 따위의 족적을 남기던 와중에,
시간이 나는대로 결국 여기에 퍼블리싱 강좌를 적어보려고 한다.
의미가 있는 행위라고 생각되지만, 낮은 수준의 모조품 같은 지식의 복제물이 되버리는건 아닐까 우려스럽기도 하다.
그래서 그냥, 쉬운 글로 쓰고 있다. 내가 수준이 올라가면 어려운 글이 될지는 모르겠지만, 그렇다.
퍼블리싱 강좌는 내가 나름의 숙련된 경험치가 있는만큼 입문자를 대상으로 하여금, 도움이 될 수 있는
쉬운 글로 작성을 목표로 한다. 언제 다 쓸수 있을지는 모르겠다. 되는대로 적어내려가보겠다.
무엇을 준비해야하는가 전에...
무엇을 준비해야하는가를 논하기 위해서는 먼저 이것이 무엇인가부터 알아야한다.
퍼블리셔란 무엇일까 라는 이야기부터 해야겠다.
우리가 웹사이트를 접속하면, 어떤 화면이 보인다.
업계 용어로서는 ui(유저인터페이스)라고 한다.
퍼블리셔는 웹사이트 화면을 만드는 사람이다.
디자인을 하는 퍼블리셔도 존재하지만,
원칙적으로 내가 다루는 퍼블리셔는 디자인을 하는 롤은 명확히 아님을 미리 밝힌다.
퍼블리셔의 롤에 대해서는 각자의 정의에 관점이 다를 수 있으며 이견이 있을 수 있음이다.
우리가 웹사이트를 접속하면,
어떤 화면이 보인다.
몸이 불편하신 분들은 이 화면을 볼 수 없는 경우도 존재한다. (전맹, 약시, 색약 등)
몸이 불편하신 분들은 이 화면과의 조작이 매우 제한적인 경우도 존재한다.
따라서 어떤 보조장치의 지원이 필요한 경우가 있는데,
이 보조장치가 제대로 동작하기 위해서는 일종의 설계가 되어있어야 한다.
퍼블리셔는 이 보조장치가 동작하여 몸이 불편하신 분들도 정보에 접근하고, 조작할 수 있게끔하는 사람이다.
퍼블리셔는 웹 ui디자이너가 디자인한 결과물을 웹상에 코드로서 구현한다.
시간이 흐르며 디바이스의 크기가 only데스크탑 생태계가 아니게 되었다.
따라서 모바일이나 테블릿 기기로 사이트를 접속 했을때, 해당 디바이스 사이즈에 적절한 화면구성이 필요하다.
이에 대응하는 화면을 적절히 구성하는 사람이 퍼블리셔다.
무엇을 준비해야하는가
웹사이트는 html css javascript 외 이미지 등의 리소스 등으로 이루어져있다.
여기서 퍼블리셔가 다루어야 하는 요소는
html, css라고 꼽겠다. javascript도 중요하지만, 우선순위는 다음이다.
javascript도 매우 중요하지만, html css 기본기가 없는 상태에서는 퍼블리셔 취업에는 의미가 작을 수 있다.
(이는 의견이 다양하게 갈릴 수 있으므로 다양한 견해를 접해보는 것을 추천한다.)
따라서 이 강좌의 키워드는 아래와 같을 것이다. 이것은 큼지막한 커리큘럼이라고 할 수 있다.
요즘엔 git도 주요하게 떠오르는듯 하지만, 여기서는 다루지 않겠다.
html
1. 시멘틱 마크업
2. 레이아웃 구조
3. form요소 다루기
4. 네이밍
5. 웹 접근성
css
1. scss로 시작하는 css
2. css 기본 문법 class, id
3. block 요소와 inline요소
4. inline-block 요소
5. inline-block 요소로 레이아웃 잡기
6. float
7. float으로 레이아웃 잡기, 주의사항
8. position
9. flex
10.flex로 레이아웃 잡기, 주의사항
댓글