1. 1년 동안 7만 원 번 문돌이, 개발 공부를 시작하다
리승환(이하 리): 자기소개를 해보세요.
김인권(이하 김): 비전공자 출신 개발자, 기획하는 개발자 김인권입니다. 최근에는 사이트 개발 외에도 강의, 그리고 워드프레스, HTML, CSS를 중심으로 한 책을 쓰고 있고요.
리: 님 문돌이임?
김: 네. 경영학과를 졸업하고 ‘가리고리’라는 사회적 기업을 시작했어요. 동영상 콘텐츠를 통해, 진로에 관해 고민을 가진 학생과 직장인을 매칭하는 서비스였죠. 그런데 망했어요. 만드는 중에 경쟁업체가 많이 생겼거든요.
우리는 영상 콘텐츠가 쌓여야 힘을 발휘하는 모델인데, 사람이 없으니 제가 직접 영상을 만들었어요. 영상 하나 나오는데 1주일씩 걸리는데 돈을 못 버니까 접을 수밖에 없더라고요. 사업 준비에만 1년 걸렸는데, 정작 운영은 1년도 못하고 접어버렸죠.
리: 돈은 전혀 못 벌었나요?
김: 아뇨. 1년 동안 7만 원 벌었어요. 유튜브 광고로…
리: ……
김: 그리고 매일 한강에서 소주를 깠죠. 아침부터 저녁까지 2~3병씩 마셨어요. 취한다 싶으면 맥주 마시고 자고… 1년 내내 준비하고 1년 내내 죽어라 몰입하며 운영했는데… 제대로 실패하다 보니 멘탈 회복이 안 되더라고요.
자존감이 지하실을 뚫어서 안주도 없이 술만 마셨어요. 이렇게 혼술하다 죽을 수도 있겠다 싶어서 사람을 좀 만나려고 노력했어요. 그래도 사람들과 같이 마시니 좀 낫더라고요(…)
리: 그렇게 지옥에서 돌아오고…
김: 그때 친구가 광고회사 한번 가볼 생각 있느냐 하며 교육 프로그램을 소개해 주더라고요. 대학 수료하고 연결된 회사 면접 봐서 운 좋게 들어갔어요. 그런데 정작 들어가니 광고회사 로망이 깨졌어요. 저는 칸 광고제 같은 걸 보고 환상을 가졌는데… 게임 배너 광고에 ‘더 이상 액션은 없다’ 이런 카피 쓰고 포토샵 하며 밤새우니 사람 사는 게 아니더라고요. 그러다 그냥 개발이 하고 싶어서 개발 공부를 시작했죠.
2. 워드 프레스의 장점, 약간의 단점
리: 시도 때도 없이 밤새우며 개발 공부가 되던가요?
김: 나름 열심히 했는데 2주 야근하면 까먹더라고요. 그래서 과감하게 광고 때려치우고 개발자로 가자 생각했어요. 아무것도 없는 상태에서 혼자 생활코딩, 유투브, 유데미 영상을 봤어요. 당시 친한 형님이 준비하고 있는 웹서비스에 기획자 겸 예비(?) 프론트-엔드 개발자로 합류하면서 HTML, CSS, JavaScript, jQuery 등 웹 언어를 중심으로 공부했습니다. 그러던 중 그 형님이 500만 원짜리 웹사이트 개발 외주를 수주해 와서 개발 공부한 지 2개월 만에 웹사이트 퍼블리싱 작업을 경험할 수 있었습니다.
리: 500만 원짜리 만드는 데 몇 달 걸렸습니까?
김: 5달 걸렸습니다.
리: ……
김: 키즈가오라는 회사 홈페이지였어요. 당시 참여했던 인력이 웹 기획, 웹디자인, 웹 개발이었어요. 그래서 웹사이트 기획, 디자인, 개발 경험이 없는 3명이 모여서 작업을 하다 보니 힘들어 죽겠더라고요. 보통 SI 업체 같으면 모르는 걸 사수가 알려주는데, 그럴 사람도 없었죠. 만들었다가 뒤엎고를 반복했어요. 그래도 그거 만들면서 개발 스킬을 좀 많이 쌓았죠.
리: 느낀 점이 있다면?
김: ‘인생은 실전이야, 존만아’ 랄까. 유명한 강의라는 강의는 다 들었는데 역시 온라인 강의는 부족하더라고요. 실전은 이론과 다르니까요. 강의 들은 것만으로는 홈페이지를 만들 수 없었어요. 그래서 생활코딩, 프론트엔드 개발자 그룹 등에 질문을 올리고 그 답변 내용을 통해서 배웠어요. 강의가 아니라 실제로 만들어 보고 누군가가 옆에서 거들어주니 학습곡선이 훨씬 빨라지더라고요.
김인권 개발자 강의 바로 가기(41% + 2강 무료 증정)
2차 얼리버드 번들 할인(최대 50%)
문재인 당선 기념 패키지 할인(41%, 선착순 20명)
▶강연 일정 바로 가기
리: 이후로도 계속 외주를 했나요?
김: 네. 주로 워드프레스 외주를 했어요. 지금까지 30개 정도? 한 달에 3개 이상 만든 적도 있어요. 물론 이렇게 많이 만들 때는 디자인적으로 좀 퀄리티가 떨어져요. 하지만 빠르게 만들어야 할 니즈를 가진 사람들도 있으니까요.
리: 어쩌다 워드프레스를 그렇게 많이 만들게 됐나요?
김: 보통 돈 있는 회사는 자체 개발하거나 SI 회사에 맡기잖아요. 하지만 저처럼 개인에게 맡기는 경우는 비용이 부족한 케이스가 많아요. 하드 코딩으로 할 때 500이라고 하면, 워드프레스는 300 이하로 들어가는 경우도 많으니까요. 그래서 제안이 들어오면 워드프레스로 유도하는 경우가 많아요.
리: 그밖에 워드프레스로 웹사이트를 만들 때 장점이 뭔가요?
김: 일단 빠르게 웹사이트를 만들 수 있다는 거죠. HTML과 더불어 약간의 CSS 스킬을 가지고 있다면 디자인과 레이아웃 커스터마이징이 아주 쉬워요. 좀 익숙해지면 내가 만들고자 하는 홈페이지를 높은 수준의 코딩 없이도 만들 수 있어요.
리: 제가 엄청 게으른데, 일단 만들어 두고 관리하기 편해서 좋더군요(…)
김: 그렇죠. 기존의 홈페이지에서 텍스트 문구 같은 거 수정하려면 개발자가 코딩 까서 수정해야 하는데, 워드프레스 편집기는 블로그 형태라서 훨씬 더 쉽게 수정할 수 있죠.
사실 더 좋은 건 레이아웃이에요. 홈페이지 작업의 절반은 레이아웃인데, 수치값 조절만으로 쉽게 모듈의 위치와 사이즈를 설정할 수 있어요. 좀 더 디테일하게 설명해 볼게요. 예를 들어 PC에서는 폰트 14픽셀, 모바일에서는 20픽셀로 설정하는 것도 CSS 지식 조금만 있으면 할 수 있어요.
리: 요즘 윅스도 뜨고 있던데?
김: 윅스로 홈페이지 만드는 친구들 이야기 들어보면, 모바일 버전이 좀 애매하게 나오더라고요. 그리고 커스터마이징이 매우 힘들어요. 반면 워드프레스는 HTML, CSS까지만 잘해도 웬만한 커스텀은 다 가능하고요.
리: 영업 방해 같긴 하지만(…) 워드프레스의 단점으로는 무엇이 있을까요?
김: 저야 강의비라도 받으니 괜찮습니다만, 대표님에게 더 영업방해 같은데요(…)
리: ……
김: 커스터마이징이 쉽다고 했는데 그건 사실 디자인 선상 이야기에 가깝고요. 플러그인을 심었을 때 종종 테마와 충돌이 발생해요. 심지어 플러그인들끼리 충돌이 발생하기도 하고요. 근데 이건 직접 심어봐야만 알 수 있어요. 각 테마와 플러그인이 다들 다르니까요.
리: 글쎄요, 다양한 기능의 확장 플러그인이야말로 워드프레스의 장점 아닌가요?
김: 뭐, 저도 장점이라고 생각해요. SEO나 구글 애널리틱스나 플러그인 설치 버튼 한 번 누르면 끝이니까요. 그래도 원하는 모든 기능을 구현하려면 PHP를 제대로 공부해야 해요. 결국 얼마나 깊게 공부하느냐의 문제일 수도 있죠. 제대로 하려면 워드프레스만의 규칙, 자체 함수도 공부해야 해요.
3. 디자이너와 개발자 입장에서의 워드프레스
리: ASP, JSP에 비하면 PHP는 쉬운 편 아닌가요?
김: PHP는 클라이언트 쪽이 아닌 서버 쪽 언어니까요. 서버 개념을 이해하지 못한 상태에서는 접근하기 힘든 부분이 있어요. 반면 비교적 난이도가 낮은 프론트엔드만 제대로 알아도 어지간한 수준의 홈페이지까지는 구축할 수 있다는 게 장점이겠죠.
리: 개발자보다 디자이너들이 더 좋아하겠군요.
김: 네. 빠르게 레이아웃이 가능하니까요. 복잡한 코딩을 몰라도 테마 설정만으로 원하는 위치에 오브젝트를 배치할 수 있어요. 반면 개발자 입장에서는 좀 애매해요. PHP는 다들 아니까 시작하자마자 만지는 건 쉬운데, 제대로 하려면 워드프레스 자체 함수도 익혀야 하거든요. 그리고 과거와 달리 Python, Node.js 등 PHP를 대체할 수 있는 좋은 언어와 프레임워크가 많아져서 사용 빈도는 많이 줄어들고 있는 것 같긴 해요.
리: 그럼에도 디자이너가 개발자의 도움을 받아야 할 경우가 있다면?
김: 두 가지 케이스가 있는데, 먼저 플러그인 충돌이 나거나 해서 손을 봐야 할 때예요. 사실 웬만한 경우는 같은 기능을 가진 여러 플러그인이 있어서 바꾸다 보면 해결돼요. 하지만 별도 기능을 추가할 때는 개발자의 손이 필요하죠.
또 하나로 디자이너들은 정말 디테일한 차이 하나하나를 보잖아요. 예로 텍스트 세 줄을 홈페이지 메인에 배치할 때, 첫 번째 줄과 두 번째 줄의 간격, 두 번째 줄과 세 번째 줄의 간격을 달리하고 싶을 때가 있어요. 이건 워드프레스에서 좀 힘들어요. 개빡세게 세팅하려면 하드 코딩의 도움을 받는 게 좋죠.
리: 그리고 일반인이 더 좋아한다!
김: 음… 솔직히 일반인은 제대로 다루려면 시간이 좀 걸려요. 디자이너의 경우에는 이미 웹사이트 만드는 작업에 여러 번 참여했으니 배우면 바로 적용이 가능해요. 반면 웹사이트 구축에 참여한 적이 없는 사람이면 이야기가 좀 달라요.
김인권 개발자 강의 바로 가기(41% + 2강 무료 증정)
2차 얼리버드 번들 할인(최대 50%)
문재인 당선 기념 패키지 할인(41%, 선착순 20명)
4. 초짜 개발자는 어떻게 공부하는 게 좋을까?
리: 그러면 그런 사람들은 어떻게 공부하는 게 좋을까요?
김: 저도 완전 초짜 개발자 상태로 외주를 시작하면서 이것저것 해봤는데, 무조건 웹사이트 카피캣 하는 게 가장 좋아요. 기존 코드를 그대로 써서 따라 해보는 거에요. 그러면서 웹사이트의 CSS 속성이 어떤 역할을 하는지 탐구하는 거죠. 그리고 한번 따라 했다고 끝내지 말고, 또 한번 만들어 보는 게 중요해요.
리: 같은 사이트를 두 번?
김: 네. 대신 두 번째로 만들 때는 내 머리로 구성해서 만들어 봐야 해요. 완성한 후에는 실제 코드와 내 머릿속으로 짠 코드가 어떻게 다른지 비교해 보고요. 그러다 보면 할 때마다 코드가 조금씩 바뀌어요. 제 경우에는 5번까지 해본 적도 있어요. 레이아웃을 만들 때 CSS 코드를 다양하게 쓸 수 있거든요.
리: 주로 어떤 사이트를 따라 하는 게 좋나요?
김: 저는 한국 사이트보다 해외 카피캣을 추천해요. 해외 사이트는 한국 사이트와 짜는 방식이 HTML부터 좀 달라요. 한국은 대부분의 사이트 코드가 비슷해요. 정답이 있는 거죠. 그런데 해외 사이트는 좀 제각각이고, 평균적으로는 한국 쪽이 더 짜임새가 있어요. 그래서 해외 사이트를 카피캣할 때 생각의 폭이 좀 더 넓어지는 것 같아요.
리: 어디서 그런 차이가 발생한다고 보세요?
김: 글쎄요, 해외는 정말 제각각이라. 굳이 차이를 따지자면 해외는 디자인 순서대로, 한국는 정보 기반으로 코딩 작업을 진행해요. 예를 들어 디자인상에서 로고가 웹사이트 가장 밑에 있다면, 해외는 디자인 순서에 맞춰 진행해요. 그런데 한국은 회사 로고를 웹사이트에서 가장 중요한 정보로 여겨요. 그래서 위치에 상관없이 코드 상에서는 대부분 상단에 배치하고 위치를 CSS로 수정하죠. 그래서 카피캣을 할 때 웹사이트 디자인 순서와 코드 순서가 맞지 않아 따라 하기 어려운 부분도 있어요.
이런 부분 때문에 외국 사이트 쪽이 더 쉬워요. 처음 보면 한국 사이트 코드가 좀 더 혼란스러울 거예요. 대신 교과서적이라 몇 번 따라 하면 금방 적응해요.
리 : 카피캣하며 많이 배울 수 있는 사이트는 어디서 발견할 수 있을까요?
김: 어워즈(AWWWARDS)라는 사이트가 있어요. 프리랜서나 웹 에이전시들이 결과물을 등록하고 매년 수상자를 투표로 뽑는 곳이에요. 단순히 디자인만 보는 게 아니라 기능과 접근성을 총체적으로 봐요. 여기서 수상작 중심으로 하나하나 따라 해보는 게 좋을 것 같아요. 이쁜 사이트만 찾다 보면 기능적으로 문제가 있는 경우가 많거든요.
5. 강의 이야기 : ‘나의 결과물’을 만들고픈 사람들에게
리: 본격 강의 이야기로 들어갑시다. 강의 방식에 특징이 있다면?
김: 위에서 이야기한 것처럼 직접 사이트를 카피캣하는 방식으로 이뤄져요. HTML, CSS 개념을 익힌 후에 워드프레스 개념을 잡아요. 그다음부터는 아바다 테마를 통해 제가 워드프레스로 작업했었던 웹사이트 중 가장 최근에 만든 사이트를 카피캣 하는 방식으로 진행할 예정이에요. 제 경험상 이론보다는 실전에서 얻을 수 있는 부분이 훨씬 더 많기 때문에….
리: 왜 굳이 그 사이트죠?
김: 워드프레스로 제작을 했지만 특정 페이지는 HTML, CSS를 더해서 제작한 페이지가 있어요. 그래서 워드프레스 뿐만 아니라 HTML, CSS의 주요 개념들 또한 함께 가져갈 수 있습니다. 그리고 이미 20차례 정도 강의를 진행하며 그동안의 학생들이 모르모트가 된 지라(…) 여러분이 뭘 힘들어하는지, 어떻게 빠르게 익혀나갈 수 있는지도 거의 다 알고 있습니다.
리: 사람들이 공통으로 겪는 어려움으로는 무엇이 있던가요?
김: 레이아웃이요. 정확히는 내가 원하는 위치에 오브젝트를 배치하는 거요. 이걸 해결하려면 CSS에서 조금 더 디테일하게 들어가서 position 개념을 잘 이해해야 해요. 강의를 하다가 이 부분만 따로 스터디를 봐주는 경우도 있을 정도로 어려워하는데, 이 산만 넘으면 어떻게든 사이트를 만들 수 있게 되는 것 같아요.
리: 아바다 테마를 사용한 이유는 뭐죠?
김: 지금까지 많은 테마를 사용했는데 아바다 테마가 확장성도 좋고 커스터마이징도 쉬웠어요. 사실 테마도 제대로 쓰려면 생각보다 더 적응 기간이 필요해요. 그래서 저처럼 워드프레스를 전문으로 하는 개발자도 그렇게 많은 테마를 사용하지는 않아요. 아바다는 크로스 브라우징 등 기초에도 충실해서 저도 절반 정도는 이걸로 개발하죠.
리: 저도 개발 배우다 포기했는데, 이런 분들을 위한 조언이 있다면?
김: 보통 포기하는 분들이 그래요. 재미없어서, 어려워서 관둔다고…. 저는 이게 결과물을 자기 눈으로 보지 못해서라고 생각해요. 워드프레스가 좋은 게 이 지점인데요, 아예 없는 상태에서 처음부터 결과물 만드는 게 아니라 테마만 깔아도 대충 홈페이지가 나오잖아요. 여기서 폰트 사이즈, 색깔, 오브젝트 위치 바꾸며 모티베이션이 좀 돼요. CSS를 만지면 계속 결과물이 바뀌니까.
리: 어떤 사람들이 듣기를 추천하나요?
김: 개발자로 갈 사람보다는, 아주 빡세지는 않아도 내 결과물을 만들고 싶은 사람에게 권해요. 몇 주만 공부하면 쉽게 사이트를 만들 수 있으니까요. 특히 기획자나 디자이너라면 정말 빠르게 습득이 가능할 거예요. 무엇보다 자기 의지만 있다면 누구나 한번 도전해볼 만한 일이라 생각해요. 일단 배워두면 많은 업무에서 이해도를 높일 수 있으니.
리: 나름 사람들 기대가 있을 텐데, 실력이 늘려면 얼마나 열심히 해야 하나요?
김: 사실 중간에 빠지지만 않아도 돼요. 그러면 사이트 못 만든다 해도 기획자로서 개발자, 디자이너와 이야기할 수 있는 단계까지는 가요. 보통 절반 정도는 중간에 빠지는데, 그 사람들끼리 서로 자기 결과물 이야기하면 더 큰 동기부여가 될 거에요. 과정을 마친 후에도 필요한 경우는 봐 드리니 많은 분이 와주셨으면 좋겠어요.
김인권 개발자 강의 바로 가기(41% + 2강 무료 증정)
2차 얼리버드 번들 할인(최대 50%)
문재인 당선 기념 패키지 할인(41%, 선착순 20명)
▶강연 일정 바로 가기
강연 일자 / 장소
- 5월 20일(토) ~ 7월 1일 (토) 13:30~15:30 / 비전티움 아카데미
강연내용 세 줄 요약.txt
- 코딩을 잘 몰라도 워드프레스를 활용해 홈페이지 만들기
- HTML, CSS에 테마와 플러그인을 얹어, 디자인과 개발 해결하기
- 처음부터 끝까지 홈페이지를 베껴 보며, 웹에 대한 개념 확립하기
누가 이 강연을 들어야 할까요?
- 개발과 디자인을 잘 모르지만, 디자인과 개발의 기초를 알고 기획 업무를 하고 싶은 분
- 디자인은 할 줄 알지만, 개발자적인 개념을 익히고 실무에 적용하고 싶은 분
- 웹과 모바일에 관해 좀 더 이해도를 높이고, 실제 IT로 진출하고자 하는 분
이 강의를 들으면 뭘 알 수 있지요?
- 워드프레스를 통해 코딩을 잘 몰라도 나 혼자서 홈페이지를 만들 수 있습니다. 테마를 통해 디자인을, 플러그인을 통해 개발 기능도 손쉽게 구할 수 있습니다. 또한 이 과정에서 습득한 지식을 통해, 기획자, 디자이너, 개발자와 자연스럽게 대화를 할 수 있게 됩니다. 어디에서나 적용 가능한 IT 실무 지식을 5주만에 익힐 수 있습니다.
※ 참조: 본 강의는 5월 20일(토)~7월 1일(토)까지 5강으로 구성되어 있습니다.
