앜스토리 | 호기심 많은 개발자의 보물창고

모든 일에는 순위가 있다 맞물려서 함께 돌아가는 구조이기는 하지만, 먼저 기획이 나오고 디자인이 나오는 것이 보통이다. 이 경우에는 기획자가 디자이너 앞에 있는 구조이다. 이 때 염두에 두어야 할 것에는 세 가지가 있다. " 기획 의도와 컨셉은 명확하게 " 교육 프로그램, 행사, 브랜딩 등등 기획에는 반드시 그 전체 기획안을 관통하는 컨셉과 기획 의도가 있기 마련이다. 만약! 이게 없다면 기획자를 의금부로 보내자. 디자이너는 기획자가 만든 기획 의도를 정확하게 파악해야 한다. 기획서에 적힌 목적과 목표만으로는 부족하다. 대화를 통해 중심을 잡아야 할 부분을 확실하게 파악하자. " 제작물 리스트 " 기획은 한 번 만들면 영원불멸한 것이 아니다. 끊임없이 수정되고 바뀌면서 최종 파일 500개를 만들어 내는데..

회사는 만들었고, 직원도 뽑았고 이제 사업하면서 매출 고민에 밤잠 설치는 시간을 맞이했는데, 돈 나갈 일이 수두룩할 거다. 손가락 사이로 머릿카락 잡고 끙끙 해봐야... 고정 지출을 줄이기가 만만치 않은게 사업이라지? 세금, 인건비, 임대료, 보험료, 제조비, 물품구매비 등등... 당연히 나가야 하는 비용 말고도 건건이 발생하는 지출까지도 합치면, 남는 건 모래사장에서 놀다가 신발 뒤집어 털면 나오는 모래 수준이랄까... " 아니 왜 중요하다면서 쪼들리면 디자인부터 줄여요? " 아주 합리적으로 생각해 보면, 지출을 줄일 때는 '당장 불필요한 것'부터 줄이는 것이 수순이다. 그렇다면 무엇이 불필요한 것일까? 물 티슈를 그냥 휴지로 바꾼다거나 TWG 티세트를 맥심 모카골드로 바꾼다거나, A4 용지를 아끼고,..

" ADOBE AUDITION SOUND EFFECTS 영상편집은 이걸로 하세요 " 분위기 1 (1.3GB) 지금 다운로드> 분위기 2 (1.16GB) 지금 다운로드> 동물 (95 MB) 지금 다운로드> 만화 (83 MB) 지금 다운로드> 충돌 (80 MB) 지금 다운로드> 드론 (1.3 GB) 지금 다운로드> 응급 효과 (180 MB) 지금 다운로드> 화재 및 폭발 (490 MB) 지금 다운로드> 폴리 (121 MB) 지금 다운로드> 폴리 발자취 (128 MB) 지금 다운로드> 공포 (108 MB) 지금 다운로드> 가계 (311 MB) 지금 다운로드> 인간 요소 (203 MB) 지금 다운로드> 이미징 요소 (273 MB) 지금 다운로드> 영향 (727MB) 지금 다운로드> 산업 (94 MB) 지금 다운..

클로저는 자바스크립트의 강력한 기능이지만, 너무 남발하여 사용하면 안 된다. 여기서는 클로저에서 사용자가 쉽게 간과할 수 있는 사항을 정리했다. 클로저의 프로퍼티값이 쓰기 가능하므로 그 값이 여러 번 호출로 항상 변할 수 있음에 유의해야 한다. function outerFunc(argNum){ var num = argNum; return function(x) { num += x; console.log('num: ' + num); } } var exam = outerFunc(40); exam(5); exam(-10); 위 코드에서 보는 바와 같이 exam 값을 호출할 때마다, 자유 변수 num의 값은 계속해서 변화하니 주의해야 한다. function func() { var x = 1; return { fu..

다음과 같은 함수를 작성한다고 가정해보자. "I am XXX. I live in XXX. I'am XX years old"라는 문장을 출력하는데, XX 부분은 사용자에게 인자로 입력 받아 값을 출력하는 함수 가장 먼저 생각할 수 있는 것은 앞 문장 템플릿을 전역 변수에 저장하고, 사용자의 입력을 받은 후, 이 전역 변수에 접근하여 완성된 문장을 출력하는 방식으로 함수를 작성하는 것이다. 이 방식으로 구현하면 코드는 다음과 같다. var buffAr = [ 'I am ', '', '. I live in ', '', '. I\am ', '', ' years old.', ]; function getcompletedStr(name, city, age) { buffAr[1] = name; buffAr[3] = c..

스코프 체인은 다음과 같다. innerFunc()의 [[scope]]은 outerFunc 변수 객체와 전역 객체를 가진다. 그런데 여기서 잠깐 혼란 스러운 부분이 있다. 위 코드에서 innerFunc()은 outerFunc()의 실행이 끝난 후 실행된다. 그렇다면 outerFunc 실행 컨텍스트 사라진 이후에 innerFunc 실행 컨텍스트가 생성되는 것인데, innerFunc()의 스코프 체인은 outerFunc 변수 객체를 여전히 참조할 수 있을까? 위 코드의 결과를 보면 짐작할 수 있지만, outerFunc 실행 컨텍스트는 사라졌지만, outerFunc 변수 객체는 여전히 남아있고, innerFunc의 스코프 체인으로 참조되고 있다. 이것이 바로 자바스크립트에서 구현한 클로저라는 개념이다.

화면 정의서를 클라이언트와 공유하고 협의했다면, 이제 웹 사이트를 구현해야 할 단계이다. 물론 구현 단계는 웹 디자이너, 웹 퍼블리셔, 웹 개발자의 역할이 중요하다. 하지만 웹 사이트 제작을 진행하는 웹 기획자의 입장에서도 반드시 해야 할 일이 있다. 1. 진행하기 웹 디자이너, 웹 퍼블리셔, 웹 개발자의 결과물을 검토하고, 승인하는 것도 웹 기획자의 업무이다. 각 담당자의 실수나 결과물에도 책임을 져야 한다. 또한 전체 제작 과정을 고려해서 일정표에 맞게 진행되고 있는지 점검하고, 디자인, 퍼블리싱, 개발 단계에서 발생하는 문제를 해결하는 역할도 해야 한다. 예를 들어, 웹 개발자가 개발 도중 화면 정의서의 오류를 발견했거나, 클라이언트가 새로운 기능을 요구했다면, 그에 대한 대책을 빠르게 마련해야 한..

화면 정의서 작성하기 화면 정의서의 화면은 크게 '스케치(sketch)'영역과 '디스크립션(description)' 영역으로 나뉜다. 스케치 영역에는 실제 웹 사이트 화면을 그리고, 디스크립션 영역에는 스케치를 설명하는 내용이나, 작업자에게 요청할 사항 등을 작성한다. 화면 정의서의 분량은 적게는 수십 쪽, 많게는 수백 쪽에 이른다. 따라서 화면을 하나씩 구체적으로 작성하기 전에 전체 흐름과 틀을 먼저 세우는 것이 전체 작업 시간을 줄이는 데 효과적이다. 또한, 화면 정의서 작업 도중에 화면 정의서의 일부를 웹 디자이너, 웹 퍼블리셔, 웹 개발자와 공유하는 것이 좋다. 협업하면서 발생할 수 있는 오해의 소지를 미리 줄일 수 있고, 각 담당자도 업무 범위를 예상하여 사전 작업을 준비할 수 있기 때문이다. ..

디자인 콘셉트 정하기 웹 사이트의 목적에 맞게 디자인 콘셉트를 결정한다. 여기서 콘셉트란, 원하는 핵심을 한마디로 정의하는 것이라 할 수 있다. 디자인 콘셉트는 그래픽 커뮤니케이션이라고 할 만큼 이용자가 이해하기 쉽도록 효과적으로 전달하는 것이 중요하다. 웹 사이트의 콘셉트가 처음부터 정해지고, 이어서 디자인 콘셉트를 만드는 게 바람직하지만, 콘셉트는 중간에 조정되거나 바뀔 수 있다. 그러나 디자인 콘셉트는 화면 정의서를 작성하기 전에 확정해야 한다. '디자인 콘셉트는 웹 디자이너가 결정해야 하는 것 아닐까?' 라고 생각할 수도 있다. 디자인 콘셉트를 결정할 때 웹 디자이너에게 도움을 받을 수는 있지만, 이를 확정하는 사람은 웹 기획자이다. 웹 기획자는 클라이언트의 요구 사항을 가장 잘 알고 있고, 웹 ..

사이트 구조 설계하기 사이트 구조 설계(site archirecture)란, 웹 사이트를 이용자가 웹 사이트에서 실제로 이용할 수 있는 메뉴의 합으로 구성하는 것을 말한다. 웹 사이트에 필요한 메뉴는 기능 정의서에 정의한 기능을 토대로 결정한다. 비슷한 기능은 묶고, 상위 개념과 하위 개념으로 구분하여 메뉴화하고, 층위를 고려하여 경로를 설정한다. 이 때는 메뉴명을 이용자가 이해하기 쉬운 이름으로 정하고, 경로 또한 원하는 기능을 쉽게 찾을 수 있도록 간결하게 만드는 것이 좋다. 이러한 작업이 끝나면 웹 사이트의 구조를 한눈에 파악할 수 있는 사이트 맵이 완성된다. 사이트 구조 설계는 기능 정의서를 토대로 시작하지만, 이 두 가지 업무는 매우 밀접하게 연관되어 있기 때문에 숙련된 웹 기획자는 기능 정의서..