한빛 스토리

프로그래밍 면접 이렇게 준비한다(3판)

존 몽건, 에릭 기게리, 노아 수요야넨 킨들러 지음 | 서환수 역

프로그래밍 면접 이렇게 준비한다 - 나를 위한 새로운 관점

preview

급하게 총평부터 이야기하자면 기대했던 내용 반, 기대하지 않았던 내용 반이었다.

제목에서 느껴지는 예상된 내용과 더불어, 그 내용을 아우르는 보다 넓은 관점의 이론과 기타 준비 사항에 대한 이야기들은 호기심을 불러 일으키기에 충분했다.

첫장부터 등장하는 입사지원 절차는 내가 벌써 이직을 생각하는 것처럼 느껴지게 만드는 묘한 장이었다.

하지만 필요한 부분을 현실적이고 냉정하게 지적한 점이 꽤 매력적으로 느껴지기도 한 부분이었다.

책을 읽으며 온라인 프로파일을 정리하면서 나 스스로에 대해 냉철하게 생각해볼 수 있었던 시간이었다. 

프로그래밍 문제 접근법

이 책에 등장하는 많은 내용과 목차들이 중요하고 도움이 되는 것은 명백하다.

다만 가장 중요한(소중한) 목차를 하나 선정하라고 한다면 나는 "chapter03. 프로그래밍 문제 접근법"을 고르고 

싶다. 문제를 접하고 직접 풀어보는 과정에서 직면할 수 있는 상황에 대한 설명, 그리고 그 상황에서의 대처법과 생각 논리에 대해 비교적 간결하면서도 명확하게 설명하고 있다. 물론 등장하는 내용은 기본기가 충실한 사람들에게는 너무나 당현한 말일수도 있겠지만 사실 알면서도 놓치기 쉬운 부분이 문제 해결 능력이란 것이다.

그리고 프로그래밍이란 이름을 지우고 나서 보면 이는 다양한 분야에서의 문제를 해결하는 데 있어 필요한 

"문제 접근법"으로 봐도 무방하리라 생각된다.

연결리스트, 트리와 그래프

학부시절 자료구조와 알고리즘을 통해 자주 학습하던 부분이다. 명확하게 기억하고 있지 않다는 것은 그만큼

기본기에 대한 부족을 나타내는 것이라 생각한다. 내가 면접관이어도 이 항목이 문제를 내고 역량을 살펴보기에 가장 적합하리라 생각한다. 실제로 많이 쓰이지만, 의외로 정확하게 원리를 이해하기 힘든 항목이라 생각한다. 특히나 연결리스트 부분은 예제 코드가 많아서 직접 구현해보기에도 좋은 형태이다.

재귀호출, 정렬

이 부분은 살펴보는 내내 퀴즈를 풀어보는 느낌이었다. 정확히는 프로그래밍 올림피아드 마이너 버전의 느낌..

정렬이 다양한 정렬에 대한 소개와 간단한 구현법을 다루었다면, 재귀호출 부분에서 면접문제로 제시된 

'전화 단어' 문제는 말 그대로 논리적인 생각의 연결을 필요로 하는 문제였다.

동시성

thread가 무엇인가요? 사실 이 질문에 제대로 대답할 수 있는 개발자가 몇 명이나 될까? 이미 자신도 

모르게 사용하고 있지만 정확한 개념을 알기 힘든 것이 동시성이다. 세마포어, 생산자/소비자 문제는 운영체제 

교재가 생각하게 하는 부분이었다.

카운팅, 측정 및 순서 관련 퍼즐

구글에서는 어떤 면접 문제가 나오나요? 에 대한 해답이 될수 있을 법한 부분이다. 단순히 프로그래밍을 

잘 하느냐 못하느냐의 문제를 넘어선 개개인의 논리적인 구성능력과 상황 대처 능력을 살펴보기에 좋은

항목이라 생각한다. 사실 이 부분은 자주 자주 살펴보면서 스스로의 고정관념을 깨고 건강한 형태의 논리적

확장이 이루어져야 할 부분이다.

overview

프로그래밍 면접 준비에 대한 제목으로 시작했지만, 막상 알고 보면 다양한 분야의 면접 준비에 쓰일 만한 

책이라 생각한다. 기본기를 쌓으면서 동시에 문제해결 능력을 기르기에는 교과서로 쓰일 수 있을 법한 구성이며, 무엇보다 독자가 스스로 방법을 생각하게끔 유도하기에 오래 두고 살펴볼만한 책이라 생각한다.

만들면서 배우는 모던 웹사이트 디자인

야무(지훈) 지음

포토샵 패널은 어느정도 알지만, 전문적으로 사용하지는 못하는 분들이거나,

혹은 html 코딩을 하고 있지만, 협업을 위한 가이드를 제작해본 경험이 없는 디자이너분들은,

이 책을 읽고 나면 똑똑한 사수를 만난 것 같은 기분이 드실 것 같습니다.

9장의 내용 중 단 한 장의 내용만 알아도 뭔가, 전문가 같다는 느낌이 드실 만한 내용들이 담겨 있습니다.

각 장의 내용 중에서 도움이 많이 되었던 내용들을 중심으로 소개하고자 합니다.

[1장. 웹 디자인을 위한 준비]

저는 포토샵과 html을 주로 사용하는 웹 디자이너입니다.

집에서는 주로 탭북 z-160을 사용하는데,

얼마 전부터 스크래치 공간이 부족해서 저장이 안된다는 메시지가 생겼습니다.

스크래치가 뭔지 제가 어찌 알았겠어요. ㅠ.ㅠ

영문을 몰라, 불필요한 프로그램들만 정리를 했는데, 한참 디스크를 지워야 겨우 저장이 되더라구요.

(아까운 제 미드를 다 지워야했...다는)

무슨 이유 때문인지 몰랐는데, 스크래치 공간을 환경설정에서 다시 설정할 수 있었던 걸 이제야 알게 되었어요.

스크래치 디스크를 새로 설정하고, 불필요한 프리셋, 블러시 등을 삭제해서

이제는 포토샵 처음 설치했던 때처럼 쌩쌩~~ 자~~알 돌아갑니다.

​

[2장. 웹 타이포 그래피]

웹디자인에서 타이포 그래피가 얼마나 중요한 것인지는 아마 다들 아시리라 생각이 들어요.

이미지가 아무리 예뻐도, 어울리지 않는, 흐릿한 글씨 투성이라면,

사용자는 1초도 사이트에 머무르지 않을지도~!

가이드 문서는 웹 사이트 전체에서 동일한 폼을 유지하도록 하는 데 중요한 기준이 될 수 있습니다.

2장에서는 스타일 가이드 만드는 법이,

3장에서는 2장에서 만든 그리드를 쉽게 만들 수 있도록 플러그 인을 사용하는 법을 소개하고 있습니다.

[3장. 웹 그리드 시스템]

플러그 인이 생소한 분도 계시겠지만, 플로그인 사용은 폰트 설치처럼 간단합니다. 파일은 다운 받고, 더블 클릭만 하면 설치 완료.

책에서 소개된 guideguide.me 에서 그리드 파일을 받아서 설치해봤는데요, 신세계를 경험했습니다. ㅋㅋ

구도 잡기가 한결 쉬워지겠어요.

설치가 완료되면

문자 설정 채널처럼 가이드 채널이 생깁니다. 원하는 수치를 넣고 GG 버튼을 누르면 끝.

설정한 간격만큼 다큐먼틍 가이드 라인이 자동으로 생깁니다.

다만 한가지 함정은,

책에서 제시한 수치를 그대로 사용하시는 편이 여백의 수치를 소수점 없이 조정하기에 가장 간편하다는 것이죠.

(고로... 이전에 작업했던 사이즈는 width 값이 달라서 .... ㅎㅎ ;;

지금 하던 대로 할 수밖에 없을 것 같아요. ㅠ.ㅠ

진작에 알았으면 좋았을 걸, 다음 작업에는 꼭 적용해 보겠습니다. :) )

[4장. 차이를 줄이는 웹 컬러 매니지먼트]

또 한 가지 중요한 정보를 바로 캘리브레이션 사용법이 제시되어 있다는 것이었습니다.

모니터마다 기본 색상에 조금씩 차이가 있습니다.

하얀색에 노랑이나 파랑이 더 느껴지는 경우나, 화이트가 그레이처럼 느껴지는 경우 등

모니터 색상 차이를 한번씩은 느껴보셨을 거에요.

컬러 샘플링 같은 경우는, 쿨러도 있고, 사실 순간순간 어울리는 색상을 찾아서 쓰는 경우도 많은데요,

하지만 모니터 자체의 색상이 다르다면 아무리 샘플링을 잘 하고,

쿨러에 많은 샘플을 보관하고 있더라도 소용이 없겠죠.

캘리브레이션은 모니터의 색상은 실제와 비슷하도록 조정해주는 기구입니다.

저는 비싼 모니터를 쓰고 있지는 못해서(언젠간 꼭 애플 모니터를 마련하고 싶지만요.)

캘리브레이션을 꼭 사용해 보고 싶었어요.

정확한 사용법을 구글이나 지식인도 잘 가르쳐주지 않더라고요. ㅠ.ㅠ

(너무 어려운 설명으로 어지러울 뿐 ;;;)

좌절하고 캘리브레이션을 포기했었는데

이렇게 책에서 다뤄주니, 깜짝 선물을 만난 것처럼 기뻤습니다.

책에서 소개한 캘리브레이션 도구는 국내 사이트는 33~42만원 선에서 판매되더군요.

데탑, 왠만한 모니터의 가격을 생각하면 결코 싼 가격이 아니죠.

하지만 내 작업의 퀄리티가 올라간다는데, 충분히 투자의 가치는 있을 것 같습니다.

(아마존에서 주문하시면 180$ 선에서 구매하실 수 있습니다. ^^)

하반기에는 캘리브레이션을 하나 구매해야겠어요. ^^

[5장. 업무 생선성을 높이는 이미지 슬라이싱]

그동안 슬라이싱 선을 하나하나 그렸던 것이 얼마나 ㅠ.ㅠ 불필요한 일이었던 것인지!!

가이드 라인을 슬라이싱 선으로 쓸 수 있는 걸, 혹시 아셨나요? (저만 몰랐을 수도... ㅠ.ㅠ)

또 슬라이싱 선을 병합할 수도 있고요,

그리고, 그룹별로 웹용 파일 저장을 자동으로 해주는 plug-in도 있더군요.

이건 정말 작업시간을 1/3은 줄여줄 수 있는 소중한 기능인 것 같습니다.

또 그룹명에 파일로 사용할 레이블을 적어두면, 슬라이싱 할 때마다 파일명을 고칠 필요도 없어집니다.

아쉽게도 cs4 이상 사용자에게만 가능한 플러그인이지만, cs4 이상 사용자가 아니라면 액션을 등록해서 사용해도 간단히 슬라이싱 하실 수 있으니,

슬라이싱에 드는 작업시간을 줄이고 싶으셨던 분들은 꼭~~ 꼬~~~~~옥 읽어 보시기를 추천합니다

[6~7장. 웹 프로토타이핑, 프로토타이핑을 기반으로 한 웹 그래픽 디자인]

프로토타이핑이란 용어가 낯설었는데요,

html 시안을 간단히 만들어 보는 것 정도로 생각할 수 있을 듯 하네요.

이미지 디자인을 완성하고, html 로 컨펌을 받자면 시간이 많이 걸리죠.

그럴 때 moqups를 사용하면메인 페이지와 서브 페이지의 프레임을 짧은 시간에 만들어 보여줄 수 있는 장점이 있습니다.

그런데, 이 경우는 전체적인 웹 사이트 구도가 머리에 잡혀 있고 최소 2~3명의 서브 디자이너가 있는 경력있는 웹 디자이너에게 유용할 것 같네요.

저같은 신입의 경우에는 디자인을 하면서 홈페이지 목적에 맞게 변경하는 경우가 많아서 프로토 타이핑을 만드는 것이 오히려 더 작업시간을 더 길게 만들 수도 있다는 생각입니다.

그러나 프리랜서로의 전향을 꿈꾸고 있는 디자이너라면 moqups로 간단히 고객 컨펌을 얻을 프로토타이핑을 마칠 수 있으니 많은 도움이 되실 수 있으리라 생각이 듭니다.

[8장. 반응형 웹 디자인]

반응형 웹 RWD, 요즘 많이 듣게 되는 용어이시죠?

PC, 태블릿, 모바일 각각의 플랫폼 width값에 맞춰 일정 수준 이하의 크기로 떨어질 때 그에 맞춘 웹을 보여주는 것이 바로 RWD입니다.

요즘은 삼성그룹의 홈페이지가 RWD로는 가장 샘플링 해볼 만 하지 않나 싶습니다~

(rwd를 처음 들어보시는 분은 삼성그룹 홈을 여시고, 브라우저 창의 사이즈를 늘렸다 줄였다 반복해 보세요~~)

저는 아직 한번도 RWD를 제작해 보지는 않았지만 올해 안에 꼭 배워보고 싶은 기술 중에 하나였죠.

디자인 하는 법은 이제 배웠으니, 코딩을 배우면 되겠어요. ^^

짧게 8장을 요약하자면 '실 사이즈', 1000px, 760px, 480px, 320px 총 5개의 이미지를 제작하는 것이

반응형 웹사이트를 디자인하는 방법이라는 것입니다.

디자인 페이지가 총 100페이지 짜리 볼륨이라면 총 500장의 페이지가 ;;;

이 어머어마한 작업을 어떻게 하면 빠르게 할 수 있을지가 바로 8장의 내용이랍니다.

야근없이 반응형 웹을 제작하시려면 꼭 보셔야겠죠? ^^:

[9장. 차세대 웹 벡터 그래픽 시대 개막]

포토샵 작업물을 그대로 벡터 파일로 만들고 싶다는 생각을 해보신 분들이 있으실 거 같아요.

9장에서는 포토샵의 패스 작업을 그대로 AI에서도 할 수 있도록 해주는 방법이 소개 되어 있습니다.

벡터이미지, 웹타이포 그래피까지 조절이 되면

어떤 모니터에서도 선명하게 잘 보이는 작업 결과물을 확인하실 수 있겠네요.

프로페셔널 웹디자이너를 향해서~~ 즐거운 독서 되시길~!