코딩을 공부하는 나의 방법
2012년 즈음에 학원을 다니며 웹표준 코딩을 배우고 수료해서 취업을 한 케이스인데, 모든 웹디자이너들이 공감하겠지만... 자꾸 코딩이 변화된다. 변화라고 해야하나 진화라고 해야하나... 아무튼 한번 배워놓고 땡~이 아니라 환경이 계속 바뀌어서 공부를 꾸준히 해야한다는 소리...
내가 배울때까지만해도 반응형웹을 요즘처럼 이렇게 많이 사용하지는 않았다. 물론 반응형 코딩도 배우기는 했지만, 데스크탑과 모바일웹 따로따로 구축하는게 위주였고, 반응형웹을 부가적으로 배우는 정도? 슬프게도 학원 수료 후 취업하고 입사한 회사에서도 반응형웹을 다루지는 않았던터라 그렇게 반응형 코딩을 배웠던 나의 지식은 내 머릿속에서 점점 사라져갔다...
그런데 이제... 반응형 코딩을 모르면 안되는 때로 온거같다ㅜㅜㅋㅋㅋㅋㅋㅋㅋㅋㅋ
어쨌든 그러해서 이번 포스팅은 내가 코딩을 공부하는 방법에 대해 정리해보려고 한다. 제목은 반응형 코딩 공부지만, 일반 데스크탑이나 모바일 마크업 공부에도 다 적용가능한 방법임.
Step 1. 벤치마킹 사이트 찾기
공부할 마음을 먹었다면, 똑같이 만들어볼 사이트 하나를 고르는게 첫번째 스텝. 똑같이 따라 만들 사이트를 찾는다. 되도록 너무 복잡하지 않은 사이트를 찾는게 좋은거 같다. 어렵고 복잡한 사이트로 만들어보는것도 좋지만, 너무 어려우면 나같은 경우는 에라 모르겠다 하면서 손놓게된다;;
※ 벤치마킹 사이트를 찾을때는 개인적으로, RWDB, 디비컷, 지디웹 같은 사이트들도 좋지만 포트폴리오가 잘 정리된 웹에이전시 사이트를 보는게 더 도움이 되더라.
Step 2. 벤치마킹 사이트 이미지 캡처 후 내 시안 만들기
벤치마킹할 사이트를 정했다면, 메인페이지를 캡처한 후 레이아웃은 그대로, 안의 디자인, 색감을 변경해서 내 시안을 만든다. 어차피 연습용이고 판매하는게 아니니 벤치마킹한 이미지 그대로 하면 되지 않냐고 물어볼 수 있는데, 나중에 사이트 완성 후의 묘한 뿌듯함? 성취감이 다르다ㅋㅋㅋ 물론 레이아웃 똑같이 따라한거긴 하지만서도...
시안은 데스크탑, 타블렛, 모바일 따로 만드는게 좋겠지만, 나는 그냥 데스크탑 버전만 만들고, 나머지는 그냥 코딩하면서 필요한 이미지들만 그때그때 만들어서 쓴다.
※ 그리고 한가지 주의할 점은 괜히 나만의 시안 만든다고 이 사이트에서 이부분, 저 사이트에서 이부분, 이렇게 섞지 말것! 어디까지나 코딩 공부하기 위한 연습용이니 나중에 섞어놓으면 코딩 엉키고 내가 왜 그랬지 후회하게됨...ㅋㅋㅋ 공부할때는 그냥 한 사이트만 콕 집어 그대로 만드는것을 추천.
Step 3. F12 개발자도구를 활용한 벤치마킹 사이트의 html, css, js 다운로드
이제 본격적으로 코딩 연습할 준비!
벤치마킹한 사이트에 가서 마우스 오른쪽 클릭 - 속성보기를 해서 메인페이지 html 소스를 내 컴퓨터에 저장하자. 나머지 css와 js파일은 개발자도구를 통해 볼 수 있음.
벤치마킹 사이트에서 F12버튼을 누르면 개발자도구가 켜지고 상단 탭메뉴에서 '네트워크'메뉴를 누르면 사이트에 쓰여진 각종 css, js 경로가 나오는데, 인터넷 주소창에 해당 사이트 url주소 뒤에 다운로드 원하는 css, js 경로를 적어주면 다운로드가 된다.
예를 들면 인터넷 주소창에 http://www.아무개.co.kr/css/네트워크에 나온 css명.css
이 형태로 적어주면 다운로드 됨.
참고로 html 소스보기로 긁어왔을때는 분명 적혀있지 않은 코드인데, 개발자도구로 보았을때 보이는 코드들은 대부분 제이쿼리 스크립트가 들어간 부분일 수 있다. 당황하지 않고, 벤치마킹 사이트의 코딩대로 소스를 다운받아서 잘 적용시키면 내가 만든 연습사이트도 똑같이 반영이 될 수 있다.
간혹 위에처럼 다 잘 적용시켰는데도 똑같이 구현이 안될 경우에는 소스를 숨겨놓았을 수 있는데... 그건 어쩔 수 없다ㅠㅠ
어쨌든 위 단계까지 모두 되었으면, 이제 내 시안을 가지고 만들면서 공부하기만 하면 끝.
Step 4. 오래 바라보며 구조 파악하기
다운받아 놓은 html 소스를 오랫동안 바라보며 구조를 파악한 다음, 부분별로 복사 붙여넣기를 해서 그 부분을 주석처리를 해놓고, 똑같이 직접 타이핑 해보는게 중요한거 같다. 당장 그때그때 필요한 부분만 우선적으로 타이핑한다.
데스크탑 버전을 코딩하고 있다면, 데스크탑 버전에 해당하는 부분만 일단 복사 붙여넣기하며 공부하라는 뜻. 소스에 나와있는 순서대로 데스크탑 부분 코딩 하다가, 바로 아래 모바일 부분 있어서 다시 모바일 소스 부분 코딩하고... 이러면 오히려 내 경우에는 헤깔리더라. 데스크탑부터 쭈욱 코딩해놓고, 나중에 미디어쿼리 쓰면서 변화되어갈때 필요한 부분을 그때그때 적어주며 공부하는게 더 좋았다.
Step 5. 반복 연습
정말 공부는 꾸준히 하는게 중요한거 같다. 위 방법대로 사이트 하나를 완성했다면... 같은 방법으로 두개, 세개의 사이트를 반복적으로 만들면서 연습할 일만 남은것... 정말 많이 만들어보는게 도움이 되는거 같다. 물론 실천이 어렵지만. 그래서 나는 지금도... 참 어렵다.
공부하고 있는 모든 분들 다들 화이팅 하시기를!
