웹 퍼블리싱, 코딩 공부를 처음 할 때 준비하면 좋을 것들

 이번 글은 웹 퍼블리싱, 코딩 공부를 처음 할 때 미리 준비하면 좋은 것들에 대해 공유해보기로 했다.

 참고로 나는 국비지원으로 웹디자인, 퍼블리싱 교육을 듣고 웹 퍼블리셔로 취업을 한 1년도 안된 새내기 퍼블리셔이다. 따라서 이 글은 새내기 퍼블리셔의 지극히 주관적인 의견이다.

 

↓↓ 국비지원 웹 퍼블리셔 수료 후기가 궁금하신 분들은 아래 글을 참고해주세요! ↓↓

국비지원 UIUX 디자인, 퍼블리셔 수료 후기 (QnA)

 

 일을 시작한지 1년도 되지 않은 신입 퍼블리셔이지만 길지 않은 시간동안 터득한 웹 퍼블리싱, 코딩 공부를 처음 할 때 준비하면 좋다고 생각한 나만의 팁을 공유해볼까 한다. 기술적인 부분보다는 공부할 때 필요한 것이나 알고 있으면 도움이 되는 것들 중심으로 기록할 예정이며, 내가 직접 사용해보고 좋았던 것들 위주로 글을 쓰려고 한다. 혹시 처음 코딩 공부를 시작하는 분들이라면 이 글을 끝까지 보고 조금이나마 도움이 되었으면 좋겠다.

 

웹 퍼블리싱, 코딩 공부를 처음 할 때 준비하면 좋은 것들

1. 공부한 내용을 기록할 수 있는 노트 (★추천 : 노션) 

 어쩌면 당연한 이야기 일수도 있지만, 내 머릿속에 공부한 내용을 모두 저장할 수 없다면 필기를 하는 것을 무조건 추천한다. 펜으로 필기를 하는 아날로그 적인 방식보다는, 우린 이제부터 컴퓨터로 공부를 할테니 컴퓨터에 저장할 수 있는 디지털 노트를 사용하는 것이 나중에 내가 필요한 내용을 찾고, 추가하고, 수정하는데 더 용이할 것이다. 

 

 참고로 디지털 노트 중 내가 정말 추천하는 어플은 'Notion'이다. 노션을 처음 사용한다면 어렵게 느껴질 수도 있지만 사용법을 터득하고 나면 정말 편리하고, 실용적이다. 윈도우와 맥에서 모두 사용가능하고, 휴대폰, 태블릿용 어플도 있어서 언제 어디서든 사용하기 편리하다. (나는 메모하는 것을 좋아하고 관심이 많아 디지털 메모앱, 노트앱, 다이어리앱 등 많은 어플리케이션을 사용해봤는데 지금까지는 노션이 최고였다.) 앱은 간단히 설치 가능하고, 웹으로도 사용할 수 있으며 무료다!

 만약 Notion 같은 복잡한 어플은 싫고, 간단하게 기록만 하고 싶다면 한글이나 워드에 기록해두는 것도 괜찮다고 생각한다.

 중요한 것은 '찾기(ctrl + F)' 기능을 사용해 내가 원하는 정보를 빠르게 찾을 수 있는 노트여야만 한다. 그 기능을 위해 기록하는 이유도 있으니까. (참고로 노션은 Quick Find (ctrl + P) 를 사용해 모든 노트에서 내가 원하는 단어를 검색할 수 있다.)

 

 사실 공부하는 모든 내용을 전부다 기록할 필요는 없다. 기술은 계속해서 발전할 것이고, 사용하던 기능을 더이상 사용하지 않을 수도 있기 때문이다. 웹 퍼블리싱에 필요한 HTML, CSS, JavaScript, JQuery에 관련된 내용과 태그, 코드가 잘 정리된 사이트와 블로그 등은 많고, 기본적으로는 공식 웹사이트도 있기 때문이다. 그런 웹사이트를 찾아 저장을 해두면 필요할 때 검색해볼 수 있고, 필기를 하는 수고로움도 덜 수 있을 것이다.

 나는 원래 기록하는 것과 정리하는 것을 좋아해서 하나의 웹사이트나 블로그처럼 나만의 필기 노트를 만드는 중이지만, 그게 너무 번거롭다고 생각하는 사람도 분명 있을 것이다. 그런 분들은,

 1. 잘 정리된 웹사이트를 저장해두고 필요한 정보는 그곳에서 검색해 습득

 2. 공부를 하던 중에 있었던 시행착오와 해결법, 헷갈리는 태그, 이해가 안되는 코드 등을 메모 형식으로 기록.

 공부를 하다 다시 노트를 펼쳤을 때 과거의 내가 헷갈렸고, 이해가 되지 않는 부분이 지금은 완벽하게 이해가 된다면 그 필기는 말끔히 지워버려도 좋을 것이다. 초보자인 나는 정말 기초적인 부분에서 헤맬 수도 있지만, 조금만 시간이 지나면 이해 못했던 내가 바보같을 만큼 너무 당연하게 여겨지는 것들도 있기 때문이다. 그렇게 몰랐던 것을 하나하나 정리하며 풀이해 나가는 학창시절 오답노트처럼 관리하는 것이다.

 어차피 필기하는 것을 싫어하고, 코딩은 실습이지! 하는 분들은 기껏 필기해 놓은 부분도 잘 안보게 된다. 하지만 내가 몰랐거나, 헷갈리던 부분까지 무심하게 지나가지는 말자. 고민없이, 기록없이 간단한 검색으로 얻은 결과물은 시간이 지나면 또 잊어버린다. 몰랐던 것은 여전히 모르고, 헷갈리는 부분은 여전히 헷갈린다. 그런 부분들은 기록을 해두고, 완벽히 이해할 때 까지 습득하는 것이다. 

2. <하드코딩하는사람들> 카페 가입

 <하드코딩하는사람들>은 이전 글에서 추천했던 웹 기술자의 대표적인 커뮤니티 네이버 카페이다. 

 공부를 처음 시작할 때 내가 궁금한 부분들은 어차피 너무나 기초적인 부분들일 것이다. 그런 질문들은 구글이나 네이버 검색을 통해 쉽게 해결될 가능성이 높다. 찾아보는 노력도 없이 카페에 너무나 간단한 기술적 질문을 올리면 댓글의 차가운 반응들(검색해보고 질문하라는)로 기분이 상할 수 있으니 이 부분은 주의해야 하겠다.

 내가 추천하는 카페 이용 방법은 그냥 주기적으로 들어가보는 것이다. 최근 사람들의 관심사가 무엇인지, 무엇을 질문하는지, 어떤 소식이 오가는지 등을 보며 업계를 파악하는 것이다. 동향을 살피는 것만으로도 내가 전혀 모르던, 새로운 업계로 들어가려는 마음의 준비가 어느 정도는 될 것이다. 그러다 궁금한 점이나 고민이 생기면 사람들에게 해답과 조언도 구할 수 있을 것이다.

3. 검색은 구글 기반?

 선배 퍼블리셔들은 검색은 구글로 하라는 말을 자주 한다. 몇주 전에도 내가 네이버에 무언가를 검색하려 했더니, 구글로 검색하라며, 그게 훨씬 내가 원하는 결과물을 잘 찾을 수 있을거라는 말을 들었다. 물론 이 의견에는 동의한다. 하지만 그들과 나의 검색 스킬이 너무나도 차이나는걸..? 그들이 찾으면 해답이 나오고, 내가 찾으면 나오지 않는 이유는 도대체 무엇...?

 

 여튼 기술적 검색은 구글으로 하라고는 하지만 공부를 막 시작하던 초창기 나의 질문은 네이버든, 구글이든 비슷한 대답을 내놓는다. 대신 구글은 영어로 된 정보도 많이 내어주지만, 퍼블리싱을 처음 배울 때 필요한 정보들은 네이버에 검색하는 것도 충분하다. 그러니 네이버를 배제할 필요는 없다.

 지금은 나도 구글에서 검색을 많이 하는 편이지만, 작년 처음 공부를 할 때 즈음에는 네이버에서 검색을 많이 했었다. 네이버에도 내가 찾으려는 정보가 홍수처러 쏟아져 나왔고, 쉽게 해답을 구할 수 있었기 때문이다.

 다만 JavaScript 또는 jQuery의 기능에 대한 코드나 해답을 찾는다면 네이버 보다는 구글에 훨씬 많은 정보가 있는 것은 사실이다. 또한 구글에서 검색을 하다 보면 웹퍼블리셔나 프론트엔드 개발자가 운영하는 티스토리 기반 기술 블로그도 볼 수 있다는 장점도 있다. (물론 네이버에도 기술 블로그가 있지만, 네이버 블로그보다는 티스토리 블로그가 기술 블로그로써 더 많이 활용되는 것 같고, 네이버에는 티스토리 블로그가 대부분 노출이 되지 않으니 그 부분이 정말 아쉽다.)

 그래서 결론은 용어나 태그에 관한 기초적 질문은 네이버에서도 해답을 구할 수 있으니, 네이버를 너무 배제하지는 말자는 것이다.

 또, 참고로 유튜브에 검색하는 방법도 있다. 영상으로 확인할 수 있으니 글보다는 훨씬 더 빠르게 이해할 수 있을 것이다.

4. 손목보호대

 나는 웹퍼블리셔로 일을 하기 전에는 식사 시간을 제외하고는 하루종일 서서 근무를 하는 서비스업에서 일을 했었다. 스물 한 살, 어릴 때부터 일을 시작해 사무직으로 근무해본 경험은 전무했다. 그런 내가 적게는 하루 여덟시간 앉아서 공부를 하고, 하루종일 앉아서 일을 해야하기 시작했을 때 안락함과 편함을 느끼는 동시에 몸의 뻐근함도 피할 수 없었다.

 다 먹고 살자고 하는 일인데 아프면 서러우니 건강도 함께 챙겨야 한다. 건강을 챙기기 위한 작은 노력 두 가지도 공유해볼까 한다. 지금 언급하는 손목보호대와 다음 차례로 이야기할 13분 스트레칭이다.

 

 이전에는 그런 적이 없었는데, 컴퓨터를 오랜시간 사용하기 시작하면서 나는 손목의 뻐근함과 통증을 느끼기 시작했다. 손목에서부터 시작해 새끼손가락이 아파서 이렇게 두면 안되겠다는 생각이 들어 우연히 집에 있던 손목보호대를 착용하고 공부를 하기 시작했는데, 손목의 통증을 훨씬 줄여주는 것 같은 느낌을 받았다. 그 후 손목보호대는 나의 필수품이 되었다. 집이나 카페에서 노트북을 사용하거나, 회사에서 일을 할 때 손목보호대가 없으면 안될 지경에 이르렀다. 그래서 집에 하나, 회사에 하나 구비해두고 사용중이다.

 안그래도 손목은 일상 생활에서도 많이 사용하는 부위인데, 컴퓨터와 마우스를 사용하며 손목에 무리나 불편이 온다면 주저하지 않고 손목보호대를 사용해보는 것을 추천한다. 

다이소에서 구입한 손목보호대

 

 참고로, 나는 ↑ 이렇게 생긴 손목보호대가 가장 편했다. 손목이 얇은 편인데 짱짱해서 잘 맞았고, 재질도 부드러워 피부에 부담이 없고, 긴 옷을 입는 계절에는 옷 안에도 잘 들어가서 편했다. 몇 달 전, 집근처 다이소에서 구매했는데 어제 가보니 이 제품이 없더라는... 다른 매장에서 발견하면 좀 쟁여놔야지...

 

 

참고로 하나 더, 

사진의 좌측 손목보호대는 예뻐서(?) 추천받아 구매했었는데, 생각보다 불편해서 사용하지 않게 되어 중고거래로 팔아버렸다. 

사진의 우측 손목보호대는 다이소에서 샀는데, 정말 비추다. 손목이 보호되는 짱짱한 느낌도 전혀 없고, 거칠어서 내 피부가 싫어하더라. 한번 착용만 해보고 이것도 중고거래도 같이 팔아버렸다.

 

 

 

 

5. 13분 스트레칭

 손목보호대에 이어서 내 몸을 지키기 위한 스트레칭. 운동을 규칙적으로 하는 분들은 이 부분은 패스하셔도 될 것 같다.

 나는 이전에 운동도, 스트레칭도 전혀 하지 않아 이 뻐근함을 어떻게 해소해야할지 몰랐었다. 어떤 스트레칭을 해야 효과가 있고, 꾸준히 할 수 있을지 고민하다가 찾게 된 유튜브 영상이다. 나처럼 운동에 익숙하지 않거나 무슨 영상을 봐야할지 모르겠다는 분들에게 추천하는 스트레칭 영상이다. 

 하루종일 컴퓨터를 보며 앉아서 공부하고, 일을 하며 몸이 너무 뻐근하고, 건강에도 정말 안좋을 것이라는 생각을 많이 했었다. 아래 스트레칭 영상은 13분 영상이라 매일 하기에 전혀 부담이 없다. 이 스트레칭을 하니 몸의 뻐근함도 덜하고, 몸에게 미안했던 내 마음의 죄책감도 덜 수가 있었던, 내 홈트 시작을 알린 영상! (준비시간까지 합쳐) 15분 투자로 조금이나마 건강을 챙겨봅시다..!

 

13분 매일하는 스트레칭

TMI, 이 스트레칭 영상으로 입문해 홈트의 재미를 느낀 나... 홈트를 시작한지 1년이 넘었는데 꾸준히 운동하는 내자신이 너무 뿌듯하다. 주로 유튜브의 스트레칭이나 요가 영상을 보며 따라하는데, 엄청 힘들고 숨이 많이 차는 운동은 아니지만 짧은 시간의 스트레칭과 요가 동작 만으로도 몸이 건강해지는 느낌이고, 실제로 이전보다 훨씬 유연해졌다! ♥

 

6. HTML, CSS 공부하기 좋은 웹사이트 추천

 마지막으로 내가 처음 공부를 시작할 때 참고를 했던 웹사이트를 공유할까 한다. (가볍게 훑어보는 용도로 보면 좋을 것 같다.)

코딩교육 티씨피스쿨

 TCPSchool은 코딩교육을 하는 웹사이트로 HTML, CSS 뿐만 아니라 다른 프로그래밍 언어들에 대한 강의도 많이 있다. 나는 여기서 HTML, CSS, JavaScript, JQuery를 봤는데, 깊게 들어간다기 보다는 기본적인 개념과 필요한 부분만 잘 설명되어 있어 기초적인 부분으로 참고하면 좋을 것 같다. 

(아니 근데 언제부터 TCPSchool에 구글 애드센스 광고가 달렸지? 내가 한창 볼때는 광고같은거 없었는데...)

 

---

 이렇게 처음 코딩 공부를 할 때 준비하면 좋을 것들에 대한 이야기를 해 보았다. 주관적인 의견이지만 내가 실제로 활용하고, 사용했던 방법들이고, 나는 이러한 방법들로 많은 도움을 받았다고 생각한다.

 다음번에는 코딩 공부를 하기 좋은 다른 사이트들도 소개하고, 비전공자의 웹퍼블리셔 취업 등 또다른 이야기들도 해볼까 한다.

 누군가에게는 도움이 되는 글이기를 바란다.