전자스컹크

앞서 <비전공자를 위한 이해할 수 있는 IT 지식>을 읽고 나서 이 책을 읽으니 좋았다. <비전공자를~>이 아주 쉽게 쓰인 대신 기초적인 내용만을 다루고 얕게 두루 파는 책이라면, 이 책은 개발 전반을 풀어서 아주 자세하게 쓴 책이다. 특히 저자가 금융권에서 소프트웨어 개발을 하신 분이라 그런지 그쪽 관련 이야기가 많이 나왔다. 업무 프로세스를 처음부터 끝까지 쭉 훑으면서 용어들도 알려주고, 개발하면서 알아야 할 것들도 알려준다. 아무것도 모르고 입사한 나에게 나이 좀 있고 친절한 선배님이 다가와 A부터 Z까지 가르쳐주는 느낌이다. 더불어 건강 관리나 스트레스 관리 같은 인생 팁까지. 한편으론 그래서 좀 지루한 면이 없지 않다. 줄줄줄 나오는 설명을 읽다 보면 '아아, 선배님, 그만요!'라고 외치고 싶다. 하지만 정말 중요하고 소중한 내용을 알려 주셔서 끝까지 다 읽었다.

개발자로 일할 수 있는 분야와 회사에는 어떤 것이 있는지, 분야별 특징은 무엇인지, 문과생이 유리한 점이 무엇인지 등등 저자가 개발자로 일하면서 보고 듣고 겪고 느끼고 생각한 모든 것을 총망라한 책이다. 적어도 내겐 그렇게 보였다. 책의 마지막 장을 읽을 때쯤에는 자신의 인생을 되감기 해서 글을 쓰는 작가의 모습이 상상될 정도였다. 개발자니까 당연히 컴퓨터에 익숙하고 그래서 컴퓨터로 쓰셨겠지 하는 생각이 들긴 하지마는 그래도 왠지 손으로 꾹꾹 눌러 쓴 글씨로 원고를 완성했을 것 같은 느낌이랄까. 아무튼 정성이 느껴지는 책이다.

이 책은 파트 1부터 6까지 여러 장으로 나뉘어 있고, 장마다 3에서 5 정도의 소단원이 있다. 이 중에서 내게 가장 도움이 된 내용은 'Part 2. 고객이 보는 화면과 직원이 보는 화면은 다르다'와 'Part 3. 업무 중심 개발자로 나아가야 한다', 그리고 'Part 5. 실제 현장에서 보는 프로그램 개발 과정'이었다. <비전공자를~>을 읽으며 알아본 프론트 엔드, 백 엔드 등의 용어 말고도 '채널단'과 '업무단'이라는 생소한 용어가 나왔는데, 각각의 개발을 위해 어떤 언어를 쓰는지, 최근 동향은 어떠한지도 자세히 나와 있었다.

특히 금융권에서 어떤 프로그램을 쓰는지, 무엇을 공부해야 하는지, 어떤 점이 금융권 개발에서 중요한지 등에 관한 설명이 있었는데 나는 금융권은 생각이 없어서 너무 아쉬웠다. 하지만 단순히 '소프트웨어 개발'이 아니라 어떤 분야의 개발을 하고 싶은지 다시 한번 생각하게 되어 좋다는 생각도 든다. 나는 금융권보다는 내게 익숙한 메신저나 할 일 관리 등 일상생활에 필요한 서비스를 만들고 싶다. 아니면 교육용 서비스도 좋다. 어떤 서비스든 개인의 발전에 도움이 되는 것이라면 더욱더 기쁜 마음으로 만들 수 있을 것 같다. 내가 쓰고 싶은 서비스를 만들면 좀 더 즐겁게 일할 수 있지 않을까?

나는 기획을 할지 개발을 할지 아직 갈피를 못 잡고 일단 시작이나 해보자는 심정으로 독학을 하는 문과 졸업생이다. 독학으로 공부하려니 프레임워크니 API니 하는 말부터 뭔지 모르겠어서 공부를 하면서도 제대로 이해했다는 생각이 안 들었다. 인터넷에 용어를 검색해도 나오는 설명조차 이해하지 못했다. 너무 답답했다. 그러다 서점에서 이 책의 표지를 봤는데 "API, 클라, 서버, 프레임워크... 도대체 뭐라는 거야?"라는 말이 적혀 있어서 바로 집어들었다. 이것은 바로 나를 위한 책이었다!

이 책은 기획자가 개발 공부를 하지 않고서도 개발자와 잘 소통할 수 있도록 하기 위해 만들어진 책이란다. 비전공자를 위한 책 답게 IT 용어를 쉽게 풀어 설명하고 있다. 기획자 말고도 나처럼 개발 공부를 시작한 비전공자들이 컴퓨터 언어를 배우기 전에 이 책을 먼저 읽으면 좋겠다. 나는 Javascript를 보다가 너무 답답해서 읽었는데 '좀 더 빨리 이 책을 알았다면 좋았을걸'하는 생각이 들었다. 컴퓨터 공학의 1도 모르는 내게는 선물 같은 책이다. 

기획자 : "혹시 저번에 말씀드린 아이콘 수정은 언제까지 될까요?"

개발자 : "아 그게 서버에서 이미지 URL을 보내줘야 하는데, API가 미완성인 것 같아요. JSON에 아이콘 URL만 빠져있네요... 클라는 URL이 안 오면 기본값이 뜨게 해놨어요. 근데 제가 임의로 만들어서 좀 이상하게 보일 겁니다."

저자는 첫 장에서 위의 예시를 들며 이 책을 다 읽으면 개발자의 말이 이해가 갈 거라고 했다. 정말로 그랬다. 책에는 개발자가 무슨 일을 하는 사람인지와 함께 개발자를 네트워크를 기준으로 어떻게 구분하는지, 구분된 개발자들 사이에서 주고받는 정보는 어떻게 이동하는지, 개발자들이 쓰는 도구는 무엇이며 디자이너와 개발자 사이에는 어떤 이슈가 있는지 등의 내용이 있다. 

간단히 말하면 개발자는 컴퓨터 언어(파이썬, html, 자바 등)로 컴퓨터에게 일을 시키는 사람이다. 개발자는 어떤 운영체제 위에 돌아가는 소프트웨어를 만드는지에 따라 안드로이드 개발자, iOS 개발자, 맥OS 개발자, 윈도우 개발자 등이 있다. 안드로이드를 예로 들어 보자. 내가 갤럭시로 카카오톡에 접속해서 친구에게 파일을 보냈다. 나와 친구의 핸드폰은 카카오톡의 컴퓨터에 파일을 보내라고 요청하고, 받아달라고 요청하는 '클라이언트(고객)'다. 위의 대화에서 개발자는 이를 '클라'라고 불렀다. 또 다른 말로는 '프론트 엔드'가 있다. 고객이 볼 수 있는 곳에 있으니 '앞'이라고 부른다. 한편, 파일을 주는 카카오톡의 컴퓨터는 '서버'다. 서버는 고객이 볼 수 없다. 그래서 '백 엔드'다. 이에 따라 안드로이드 개발자든, iOS 개발자든, 윈도우든 맥이든 이 개발자들은 다시 '프론트 엔드' 개발자와 '백 엔드' 개발자로 나눌 수 있다. 

그리고 클라와 서버의 사이에는 API가 있다. 클라가 요청을 보내면 서버가 그것을 어떻게 처리하고 응답할지를 정해둔 것이 API이다. API는 단순히 클라와 서버 사이뿐만이 아니라, 서로 다른 소프트웨어가 서로의 기능을 사용하기 위해 만들어지기도 한다. 우리가 구글 지도를 구글 앱 말고도 다른 앱에서도 볼 수 있는 이유는, 구글이 자신들의 API를 제공해주는 다른 소프트웨어인 'SDK'를 제공하기 때문이다. 개발자들은 구글의 지도 SDK를 설치해서 자신의 소프트웨어에 넣는다. 그러면 구글 SDK에서 제공해주는 API들이 구글 지도에 요청을 보낼 수 있고, 사용자는 그 앱에서 구글 지도를 사용할 수 있는 것이다.

자, 그럼 이제 개발자의 첫 번째 말이 이해가 된다. 서버 컴퓨터에서 아이콘의 이미지 주소를 클라이언트 컴퓨터로 보내야 하는데, API가 미완성이란다. 즉 서버와 클라 컴퓨터가 서로 소통하는데 필요한 의사소통 방법이 아직 만들어지지 않아서 아이콘을 서버에서 클라로 보낼 수가 없는 것이다. 뒷 문장도 JSON이 뭔지만 알면 바로 풀이할 수 있다. 앞서 클라가 서버에 요청을 하면 서버가 응답을 하며, 그것을 처리하는 게 API라고 했다. 클라의 요청에는 필요한 정보가 담겨서 서버로 보내진다. 만약 내 이름과 핸드폰 번호를 보낸다면 그 정보의 형식은 '스컹크 : 010-1234-5678'일 수도 있고, '스컹크 : 01012345678'일 수도 있다. 이 형식은 컴퓨터 언어처럼 여러 가지가 있다. 위의 개발자는 JSON 형식을 사용해서 정보를 주고받는다고 한다.

다시 개발자의 말을 풀기 전에 저 개발자가 어떤 개발자인지 먼저 생각해보자. 클라를 기본값이 뜨게 해놨다고 하니까 클라이언트, 즉 프론트 엔드 개발자일 것이다. 서버 개발자가 API를 만들고, 프론트 엔드 개발자는 그 API를 이용해서 개발을 한다. 데이터는 JSON 형식으로 주고받기로 했나 보다. 그런데 서버에 요청을 보내고 응답을 받으니 아이콘 URL 데이터가 없었다고 한다. 그래서 일단 자기가 아이콘을 임의로 만들어서 기본값이 뜨게 해놨다고 했다. 그럼 이제 이 기획자는 뭐라고 하면 될까?

기획자 : "아 그럼 클라는 거의 끝났네요. 서버 개발자분이랑 얘기해볼게요. 더불어 디자이너분이랑 얘기해서 기본 아이콘을 하나 정해드릴게요. 바꾸고 나면 바로 심사 신청 해주세요."

책에는 이외에도 애플리케이션과 웹의 특징, 데이터베이스와 이미지 처리, 프레임워크와 라이브러리, 협업 방법 등에 관한 내용이 나와 있다. 앞으로 내가 무엇을 공부하고 무엇을 생각하며 공부해야 할지를 좀더 명확하게 알게 된 것 같아 기쁘다. 책상 위에 두고 심심할 때마다 읽어서 단어가 익숙해질 때까지 봐야겠다. 

• 내 블로그 사이트맵 주소 알기

• 네이버에 사이트맵 등록하기

• 구글에 사이트맵 등록하기

여러분은 검색할 때 검색 페이지의 몇 번까지 읽어보시나요? 다음이나 네이버, 구글에서 키워드를 입력하고 검색 버튼을 누른 뒤, 대부분 광고 바로 아래에 있는 첫 번째 링크를 누를 겁니다. 첫 번째 링크의 제목이 마음에 들지 않는다면 그 아래쪽을 잠깐 훑어보겠죠. 검색 결과가 너무 없는 경우가 아니라면 두 번째 페이지까지 가는 일은 별로 없을 겁니다. 

자기만족을 위해 블로그를 쓰는 경우가 아니라면 대부분 블로그에 많은 사람들이 찾아오고, 그에 따라 광고도 붙여서 조금이라도 수익이 나면 좋겠다고 생각하시겠죠? 그러면 많은 사람들이 찾아오도록 하기 위해서 내 글이 검색엔진의 첫 페이지에 뜨도록 해야겠네요. 돈을 주고 광고를 내는 게 아니라면 검색엔진이 내 페이지를 잘 읽어가도록 해야 첫 페이지에 올라갈 가능성이 높아질 겁니다. 이를 위한 방법이 여러 가지 있는데요, 그중에 가장 쉬운 사이트맵 제출부터 해볼게요!

1. 내 블로그 사이트맵 주소 알기

티스토리는 올해 4월 말부터 사이트맵을 자동으로 생성해줬습니다. 덕분에 다른 외부 사이트에서 사이트맵을 만드는 번거로움이 줄었어요. 자동 생성된 사이트맵에는 블로그 홈과 공개 상태인 카테고리나 페이지, 공지와 글, 태그 모음, 방명록이 포함되어 있습니다. 사이트맵은 내 블로그 주소 뒤에 sitemap.xml 만 붙이면 됩니다.

https://블로그 주소/sitemap.xml 이라고 치면 되죠!

사이트 맵 주소는 블로그 관리 페이지에서 주소 설정을 보면 도메인 아래에도 있어요. 저 주소로 들어가 보면 내 블로그의 어떤 요소와 글이 공개되는지 확인할 수 있습니다.

2. 네이버에 사이트맵 등록하기

자, 그럼 사이트맵 주소도 알았으니 이제 사이트맵을 등록하러 가볼까요?

네이버 서치어드바이저에 들어가서 네이버 아이디로 로그인 한 뒤에 오른쪽 위에 있는 [웹마스터 도구]를 눌러주세요. 

누르면 이렇게 사이트 관리 페이지가 뜹니다. 여기에 먼저 내 블로그 주소를 넣고 엔터를 누르면 

이 사이트가 정녕 네 것이더냐? 하고 산신령이 묻습니다. 맞다고 하니까 근거를 대래요. 아래의 HTML 태그를 누르고 <meta name="뭐시기뭐시기"/>라고 적힌 부분을 복사해서 블로그 스킨 편집-HTML 편집에 들어가서 <head>라고 적힌 곳 아래에 붙여 넣기 하면 됩니다.

전자 스컹크 블로그의 html 편집 화면을 보면 초록색 네모 상자 안에 네이버에서 긁어온 태그가 있지요? 붙여 넣기 할 위치는 <head> 태그와 </head> 태그 사이라면 어디라도 상관없습니다. 다만 다른 태그가 깨지지 않도록 조심해주세요! 태그를 넣었다면 적용을 누르고 스킨을 저장합니다. 그리고 다시 네이버 서치어드바이저 화면으로 돌아가서 [소유확인] 버튼을 눌러주세요. 이제 사이트 목록에서 내 블로그 주소를 누르고 요청-사이트맵 제출을 누릅니다.

누르면 사이트맵 주소를 입력하는 화면이 나옵니다. 아까 주소가 뭐라 그랬죠? 내 블로그 주소 뒤에 sitemap.xml 만 붙이면 된다고 했지요? sitemap.xml 을 치고 확인을 누르면 끝-!

3. 구글에 사이트맵 등록하기

구글도 어려울 거 없습니다. 구글 서치콘솔에 들어가서 구글 계정으로 로그인하세요. 등록된 사이트가 없다면 사이트를 등록하라고 뜰 겁니다.

오른쪽의 URL 접두어를 누르고 블로그 주소를 입력합니다. [계속]을 누르면 네이버처럼 소유권 인증을 하라는 창이 나오는데요. 똑같이 html 메타 태그를 복사해서 스킨 편집-html 편집에서 <head> 아래에 붙여 넣기 하시면 됩니다!

위 사진처럼 이제 구글과 네이버 둘 다 등록되었네요! 이 태그는 나중에 지우시면 안됩니다! 그대로 두셔요- 이렇게 소유권 인증을 하면 아래 사진처럼 사이트가 등록되는데요.

다른 블로그를 더 추가하시려면 +속성 추가 버튼을 눌러서 더 등록하시면 됩니다. 사이트맵 추가는 검은 상자 모양 안에 Sitemaps가 보이시죠? 그 버튼을 눌러서 내 블로그 주소 뒤에 sitemap.xml 를 쓴 뒤 제출을 누르면 됩니다. 만약 블로그에 글이 하나도 없다면 

이렇게 사이트맵의 상태가 '가져올 수 없음'이라고 뜰 텐데요. 공개 글을 올리면 '성공'으로 바뀝니다. 

사이트맵 등록하기 끝-!

혹시 티스토리를 막 시작하려는 분이나 스킨 커스터마이징을 하려는 분이신가요? 반응형 스킨이 마음에 들어 poster 스킨을 골랐더니 html 편집기에 빨갛게 오류가 떠 있어서 왠지 찝찝하셨나요? 이 글을 읽으면 빨간 오류 없이 깔끔한 poster 스킨을 사용할 수 있습니다!

먼저 블로그에 아직 글이 없는 분이라면 테스트용 글을 4개 정도 만들어주세요. 스킨이 잘 나오는지 확인하기 위해서입니다. 저는 아직 글이 없어서 요렇게 4개 만들었어요.

다 만들었으면 블로그 설정에서 꾸미기-스킨 편집-html 편집을 눌러 편집 화면으로 들어가 주세요. 

69번 라인으로 가보면 커버 슬라이더 부분이 빨갛게 되어 있습니다. 태그가 짬뽕이라 아래까지 오류가 떴네요. 신기하게도 이렇게 오류가 난 상태인데 그대로 써도 문제는 없더라고요. 그래도 찝찝하니까 바꿔 봅시다. 아래 코드를 복사해서 69번 라인을 지우고 붙여 넣습니다.

그러면 요렇게 오류 부분이 사라졌지요? 

이제 199번 라인으로 갑시다. 

여기는 <h> 코드가 위에 없는데 이걸 닫는 코드가 </h 라고 적혀있어서 오류가 났네요. </h 만 지우면 됩니다.

참~ 쉽죠오?

요렇게 두 줄만 바꿔도 오류가 전부 사라집니다. 맨 아래로 내려서 이렇게 오류가 있던 부분도 확인해줍시다.

위에서 고친 두 개의 코드 때문에 맨 아래 코드들도 오류가 있었는데요, 잘 고쳤다면 여기도 이렇게 바뀌었을 겁니다.

고친 코드가 슬라이더 관련 코드였는데 잘 나오는지 확인하기 위해서 홈 설정을 커버로 바꾸고 슬라이더를 넣어주세요.

자, 이제 왼쪽 미리 보기 창을 새로고침 해봅시다. 스킨을 편집했으면 항상 잘 나오는지 확인을 해야겠죠?

잘 나오네요. 

오류 수정 끝-!

다음엔 html과 css 코드를 조금 바꿔서 글꼴을 바꾸거나 색상을 바꿔보아요!