Cards you may also be interested in
[인정받는 디자이너가 되기위한 발걸음 그리드]
안녕하십니까 IT 아웃소싱 플랫폼 프리모아입니다. 디자인분야에서 레이아웃을 잡는 것은 기본적이면서 퀄리티 높은 결과물을 만드는데 중요합니다. 물론 웹디자이너분들도 웹사이트를 디자인하면서 배치나 여백, 정렬 등 신경을 많이 쓰고 있을겁니다. 앱디자이너들도 카테고리나 주요기능을 이용자에게 가독성을 좋게하려고 고민하고 계실 것 같습니다. 디자인에서 중요한 레이아웃을 빛나게 도와주는 도구이자 수단인 '그리드(grid)' 를 알아보겠습니다. § 그리드란? 레이아웃의 요소들을 조화롭게 시각화시키기 위하여 사용하는 수평 , 수직의 안내선입니다. 레이아웃을 잡게 도와주는 요소이지 꼭 그리드에 신경쓰다보면 획일화되고 융통성 없는  레이아웃 디자인으로 나올 수 있으므로 틀에 얾메일 필요는 없습니다.  § 그리드의 장점 첫째. 정보의 조직, 명료, 집중화 둘째. 창조성과 객관성의 증대 셋째. 디자인 요소의 통합과 공간의 체계적 통계 넷째. 제작 과정의 합리화를 통한 시간과 비용의 단축 § 그리드의 구성요소 (1) 칼럼 : 글자나 이미지를 배열하기 위해 나눈 세로형태의 공간 (2) 모듈 : 모듈은 가로, 세로가 일정한 간격으로 분할된 한 면으로, 공간을 나누는 기본 단위이다. (3) 마진 : 그리드 외곽의 빈 공간, 화면에 균형과 긴장을 부여, 내용과 이미지를 제외한 나머지 부분 (4) 플로우 라인 : 공간을 수평으로 분할하는 가상의 기준선 (5) 존 : 몇개의 모듈이 모인 별도의 틀 (6) 마커 : 표제와 페이지번호와 함께 사용되어 반드시 동일한 위치에 반복되어야 합니다. (7) 칼럼 마진 : 칼럼과 칼럼 사이의 공간을 말합니다. § 그리드 종류 1. 블록그리드 그리드의 기본으로써 하나의 블록만을 사용하는 디자인으로 1단그리드라고도 불립니다.  글을 많이 적는 서적이나 논문, 리포트에 주로 쓰이는데 반복될 경우 지루한 느낌을 줄 수 있습니다. 2. 단그리드 두개이상의 단으로 나누어 사용한 그리드로써 단의 수의 따라 2단 3단으로 불리는 그리드 디자인 다양한 형태의 단으로 구성될 수 있어 신문이나 잡지에서 많이 쓰이며 '칼럼그리드'라고도 불립니다. 3. 모듈그리드 모듈그리드는 단그리드보다 복잡한 디자인 형태일때 사용하는 그리드형태입니다. 모듈이라는 사각형의 방을 만들어 그룹화하는데 이 잉역을 바탕으로 레이아웃을 정합니다. 모듈을 제대로 사용하지 않을 경우 시각적 혼란을 주기 떄문에 안정된 느낌으로 디자인해야합니다. 4. 계층그리드 직관적인 배치를 사용하여 어떠한 범주에도 들어가지 않고 규칙적이고 반복적으로 쓰이는  다른 그리드와 달리 디자이너의 공간연출 역량이 중요합니다. 주로 포스터나 북디자인, 웹페이지에서 접근하는 방법입니다. § 그리드디자인 하는데 도움되는 사이트 Grid guide <http://grid.guide/>그리드를 생성하는데 수치를 도움받을 수 있는 좋은 리소스사이트입니다. 전체 폭과 열의 수를 입력하면 자동으로 거터 너비 별로 그리드의 수치를 계산해서 알려줍니다, <http://guideguide.me/>를 들어가면 설정을 통해 포토샵에서 그리드를 쉽게 생성할 수 있도록 제공받을 수 있습니다.  웹디자인을 하기전에 그리드를 세팅해 놓고 레이아웃을 잡는다면 이용자들에게  깔끔하고 가독성있는 웹사이트를 설계하실 수 있을 것 같습니다.  또한 그리드를 잘 이용할 수록 숙련도 높은 디자이너로 성장하실 수 있습니다.  디자이너를 꿈꾸는 분들에게 많은 도움이 되셨으면 좋겠습니다.  감사합니다.
[ 웹사이트 개발까지의 추천 10단계 ]
웹사이트 개발까지의 추천 10단계 (참조 : 10 steps for developing a website ) 다른 여느 기술적인 프로젝트와 같이, 웹사이트 개발도 쉬운 일은 아니다. 주의해야 할 점이 너무도 많기에, 웹사이트 개발 시에는 반드시 꼼꼼하게 적절한 단계를 따라야 한다. 이 기사에서 웹사이트 프로젝트를 정의하는 순간부터 웹사이트의 개발과 홍보에 이르기까지의 단계를 일목요연하게 소개하고자 한다. 1. 웹사이트의 목적을 정의하라 이는 웹사이트의 개발 단계에 있어서 당연히 가장 먼저 시행되어야 한다. 너무 포괄적으로 들릴지도 모르지만, 여기서 말하는 목적이란 사업 계획을 의미한다. 웹사이트를 통해 달성하고 싶은 목표는 무엇인가? e커머스인가 아니면 서비스 웹사이트인가? 목적을 세우는 것은 웹사이트 내의 컨텐츠를 정의하고 회사를 위해 어떠한 형태의 웹사이트를 만들어야 하는지 이해하는 데 도움을 준다. 예를 들어 더 많은 잠재 고객들을 유치하고 그들과 더 많은 관계를 맺는 것이 목적이라면, 자신이 제공하는 제품이나 서비스를 더욱 매력적인 방법으로 보여주고 고객들이 그 회사에 수월하게 접근할 수 있도록 해주어야 할 것이다. 하지만 인터넷 매출을 올리고자 한다면 결제 단계를 간편화시키는 데 집중하는 편이 좋다. 이를 달성하기 위해 웹사이트 개발 혹은 웹사이트 디자인 전문가가 반드시 필요한 것은 아니다. 그러나 이러한 프로젝트에 대한 접근법을 이해하기 위해서는 비즈니스 컨설턴트를 가까이 하는 것이 현명할 것이다. 2. 웹사이트의 컨텐츠를 정의하라 웹사이트에 어떤 것을 올릴지를 항상 염두에 두고 있어야 한다. SEO에 신경을 많이 쓴다면 웹사이트의 컨텐츠는 검색 엔진에서의 순위에 직접적인 영향을 미칠 것이며, 사용자들이 웹사이트를 방문하게 만드는 주요 요인이 될 것이다. 첫번째 단계에서 용어 혹은 단어뿐 아니라, 어떠한 내용을 쓸 것인지 정의하는 것은 필수적이다. 좋은 결과를 내기 위해 전문가를 활용하는 것은 어떠한 상황에서도 가장 중요하므로, 유능한 SEO 카피라이터와 커뮤니케이터를 고용하는 것이 원하는 결과를 얻는 데 있어 핵심일 것이다. 3. 웹사이트 모형과 와이어프레임을 만들어라 (이미지 출저 : 슬로우워크 블로그 - http://slowalk.tistory.com/2140) 종이를 하나 꺼내 구상하고 있는 내용을 그려보아라. 모형은 단지 웹사이트의 섹션과 일반적인 구조를 담은 스케치 혹은 대략적인 초안이면 충분하다. 이렇게 함으로써 웹사이트의 주요 섹션과 이 섹션들 사이를 어떻게 네비게이트(navigate)할 것인지 정의할 수 있다. 그러나 아직 아이디어와 컨셉을 정하는 단계이므로 이 섹션들에 담겨질 텍스트에 대한 세부사항을 결정할 필요는 없다. 다음은 초안을 개선하여 상호작용을 제공하는 디지털 모델로 만들어내는 단계이며, 이는 웹사이트 디자이너의 몫이거나, 와이어프레임 툴에 대해 잘 알고 있다면 본인이 직접 할 수도 있을 것이다. 4. 웹사이트 디자인 상호작용을 어떻게 하고 싶은지 결정했다면, 이제 좋은 웹사이트 디자인을 위해 노력해야 한다. 흔히 우리는 웹사이트 디자인에 적극적으로 참여하고 싶어하지만, 웹 디자이너의 업무에 지나치게 관여하는 것도 바람직하지 않다. 웹사이트는 항상 사용자 친화적이어야 하며 웹사이트의 디자인이 효과적일 수 있는 방식으로 비율이 구성되어야 한다. 예를 들어 빨강은 아름다운 색이지만 웹사이트 디자인에서 너무 많이 사용되면 안된다. 항상 디자이너의 말에 귀 기울여 회사의 색과 사용자에게 편안한 색 사이의 균형을 찾아야 할 것이다. 가끔 우리는 사이트를 디자인하기 위해서 프로그래머 지인 혹은 친구에게 도와달라는 요청을 한다. 하지만 이때 주의할 것! 프로그래머는 디자이너가 아니다. 목적을 이루게 만들어 줄 전문적인 디자이너를 찾는 것이 핵심이다. 웹사이트의 디자인을 아웃소싱(은 프리모아) 을 고려하는 것도 가끔은 좋은 선택이 될 수 있다. 5. 웹사이트 개발: 코드 자 이제 가장 복잡한 단계에 대한 준비가 되었는가? 이제까지 고심해오던 프로젝트를 본격적으로 개발할 때가 왔다. 프로젝트의 난이도에 따라 한 명, 혹은 두 명의 개발자, 또는 아예 팀 하나가 전체로 필요할 수도 있다. 프로젝트를 얼마나 빨리 마무리하고 싶은지에 따라서도 이에 상당한 영향을 줄 수 있다. 급하면 급할수록, 프로젝트를 담당하는 팀의 크기와 개발시간이 늘어나게 될 것이다. 프로젝트 초기에 얼마나 많은 것들을 완성시켜두었는지에 따라 이 개발 과정이 비교적으로 간단할 수도 있다는 점을 기억해라. 개발자를 만나기 전 컨텐츠와 디자인 작업을 모두 마무리해두는 것이 좋다. 6. 모바일 친화적 사이트 비록 따로 서술하고 있지만, 사실 이 단계는 웹사이트 디자인 및 개발과 밀접한 연관이 있다. 이 단계를 구분해 설명하는 이유는 모바일 사용자 유치 및 검색 엔진 순위에 있어 이 부분이 상당히 중요해졌기 때문이다. 모든 SEO 전문가들이 모바일 디자인을 먼저 시작한 뒤 웹사이트 디자인을 진행하라고 조언할 것이다. 그들은 이를 ‘모바일 우선’ 디자인이라고 부른다. 하지만 그들의 조언을 따를 필요 없이, 어떠한 모바일 디바이스에도 완벽히 적응가능한 ‘반응형(responsive)’ 웹사이트를 고려하면 된다. 7. 끊임없는 테스트 웹사이트 개발 과정이 종료된 후 뿐 아니라 각 개발 단계가 마무리될 때마다 매번 테스트를 거쳐야 한다. 테스팅은 제품의 개발과 디자인에 관여하지 않았던 사람들에 의해 진행되는 것이 필수적이다. 디자인과 사용자 친화도에 있어 어떤 것을 개선해야 하는지 더욱 잘 이해할 수 있게 도와주기 때문이다. 또한 발생할 수 있는 잠재적인 이슈와 웹사이트 런칭 전에 수정되어야 하는 점들을 발견할 수 있게 해 준다. 8. 웹사이트 런칭 상기 언급되었던 모든 부분에 대해 검토하였다면, 이제 웹사이트의 런칭만이 남았다. 그러나 그 이전, 훌륭한 런칭이 되기 위해서는 몇 가지 더 마무리 지어야 할 것이 있다. · 공식 발표 준비. 자신의 정체성과 다른 동종사업 경쟁자들과 비교하였을 때 제품이 어떠한 참신함을 가지고 있는지 설명해야 한다. · 브랜드 관련 정보 및 이미지 준비. 이미지와 로고, 팀 사진 등을 준비한다 · 사이트의 홍보를 위한 인맥 넓히기. 웹사이트 런칭 전, 동종업계에 종사하는 협업자 혹은 영향력 있는 사람들과 연관된 계획을 세우기를 권장한다. 9. 마케팅 전략 이제 웹사이트 개발을 넘어서 온라인 마케팅에 대한 섹션으로 넘어가보자. 웹사이트 개발이 성공적이길 바란다면 자신이 가진 전략을 마음에 새겨야 한다. SEO를 위한 컨텐츠 최적화에 대한 우리의 추천사항을 따랐다면, 이 시점부터는 디지털 마케팅 전략을 다시 펼쳐야 할 것이다. 첫 몇 달 내에 성장하기 위해서는 웹사이트 포지셔닝 전략을 취하는 것이 좋다. 10. 결과 분석 및 개선 초기 목적을 달성하였는지 어떻게 알 수 있을까? 웹사이트 개발의 첫번째 단계를 기억하는가? 바로 목적을 정의하는 것이었다. 분석은 초기에 세운 목적 및 목표를 달성하였는지 확인할 수 있도록 돕는다. 이에 성공했다면 이제 새로운 도전을 해보자! 그러나 목적을 달성하는 데 성공하지 못했다면 왜 못했는지, 어디에 문제가 있었는지 알아낸 후 이를 달성하기 위해 새로운 변화를 준비해야 할 것이다. 이는 모든 회사들이 온라인의 세계에서 도약하기 위해 거쳐야 하는 과정이다. 각 단계마다 그에 걸맞는 전문가를 찾는 것이 어려울 때도 많다. 이런 이유에서, 프리모아는 모든 개발 단계에 맞는 완벽한 전문가를 찾아줄 준비가 되어있다. 당신이 어떤 단계에 있던 프리모아가 도움이 될 것이라 확신한다
웹서핑 꿀팁! 유용한 크롬 확장 프로그램 Top7
크로미엄 기반 웹브라우저인 '크롬', '웨일', '스윙' 등에서 사용 가능 대부분의 유저들이 PC나 노트북 등을 사용하는 가장 큰 목적은 '인터넷'일 것이다. 심지어 인터넷을 사용하지 않을 것이면 굳이 PC를 사용할 이유도 없다고 말하기도 한다. 물론 문서 작성이나 다운로드 한 동영상 감상 등 인터넷 연결이 필요 없는 작업을 하는 경우도 있겠지만, 요즘에는 다양한 웹기반 서비스들이 나오면서 문서 작성이나 동영상 감상 등도 인터넷으로 실시간 연결된 상태로 이용한다. 그리고 이런 대부분의 작업들은 웹브라우저를 통해서 이뤄진다. 현재 웹브라우저 확장프로그램 생태계 구축이 가장 잘 갖춰진 것은 구글 '크롬'이 첫 손에 꼽힌다. 이전에는 마이크로소프트(MS)의 웹브라우저인 인터넷 익스플로러가 국내외 웹브라우저 시장을 독점했지만, 오픈소스 소프트웨어(SW)인 크로미엄(Chromium) 기반 웹브라우저가 본격적으로 나오면서 밀러난 상태다. MS도 윈도10 출시와 함께 차세대 웹브라우저인 '엣지'를 출시하며 크롬과 유사한 확장 웹스토어를 공개한바 있지만, 현재 등록된 확장 프로그램이 별로 없는 관계로 구글 크롬을 중심으로 유용한 확장 프로그램을 공개한다. 1. AdBlock, Adguard AdBlocker, uBlock Origin 먼저 추천하는 확장 프로그램은 광고 차단기 3종 세트다. 다양한 형태의 광고들이 웹서핑을 방해하는 경험 많이 했을 것이다. 이럴때 유용한 확장 프로그램이 바로 광고차단 프로그램이다. 기존에는 PC의 Host(호스트) 파일을 직접 수정하거나 외부 프로그램을 사용해서 광고를 차단했지만, 크로미엄 기반 웹브라우저를 사용한다면 간단히 확장 프로그램 설정으로 모든게 해결된다. AdBlock은 가장 사용자가 많은 광고 차단 확장 프로그램으로 별다른 설정없이 그냥 설치하고 웹서핑을 즐기면 된다는 큰 장점이 있다. Adguard AdBlocker는 최근 급상승하고 있는 광고 차단기로 영상 광고(유튜브 영상 광고 등)도 차단이 가능하다. 직관적인 UI(유저 인터페이스)를 보여주는 만큼 초보자들도 쉽게 사용할 수 있다. 앞서 AdBlock나 Adguard AdBlocker가 초중급 사용자를 위한 것이라면 uBlock Origin는 고급 사용자를 위한 광고 차단기다. 현재 페이지에 연결된 모든 트래픽 경로를 보여주고 특정 트래픽만 막을 수 있다. 예컨대 특정 사이트에서 전송되는 신호만을 따로 차단하는 것도 가능하고 반대로 항상 허용하는 것도 가능하다. 2. LastPass, Xmarks 비밀번호 유출로 인한 개인 보안 이슈가 늘어나면서 대부분 웹사이트들은 로그인 시 비밀번호 생성 규칙을 강화하고 주기적으로 바꾸도록 요구하고 있다. 문제는 로그인 시 필요한 비밀번호의 자리가 길어지고 특수문자나 알파벳 대소문자 등 다양한 필수 규칙이 생기면서 막상 설정한 비밀번호를 기억하지 못하는 경우가 빈번히 보고되고 있다. 이럴때 필요한 것이 바로 웹사이트 로그인 관리자 애플리케이션이다. LastPass나 Xmarks 모두 이 부분에서 유명한 SW로 크로미엄뿐만 아니라 인터넷 익스플로러나 사파리, 파이어폭스 등 대부분 브라우저를 지원한다. 또한 스마트폰 등 모바일 디바이스도 지원하는 만큼 유용하다. 모든 암호는 암호화된 상태로 관리된다. 3. 구글 Keep, Evernote Web Clipper 웹서핑을 하다 메모가 필요하다면? 특정 웹페이지를 보관하고 싶다면? 바로 구글 킵과 에버노트가 있다. 구글 킵은 구글이 만든 메모장 서비스로 구글 킵 확장 프로그램을 이용하면 웹서핑 도중 여타 도구 필요없이 메모를 할 수도 있고, 웹페이지를 그대로 저장 가능하다. 구글 킵에 저장된 메모는 크롬이 아니더라도 구글 로그인만 한다면 어디서든 바로 확인이 가능하다. 스마트폰에도 애플리케이션이 있는 만큼 쉽게 메모를 하고 확인 가능하다. 모든 디바이스 동기화 기능은 덤이다. 에버노트 웹 클리퍼는 문서작성 관리 애플리케이션인 에버노트를 웹브라우저에서도 사용 가능하도록 도와주는 확장 프로그램이다. 스마트폰의 필수 애플리케이션으로 꼽히는 에버노트를 웹브라우저에서도 사용 가능하고, 웹서핑 도중 발견한 정보를 곧바로 에버노트에 올릴 수 있는 만큼 에버노트 사용자들의 필수 확장 프로그램이다. 4. crxMouse Chrome Gestures, Pig Toolbox 웹서핑을 하는데 키보드 필요없이 마우스만 있으면 모든게 가능하다. 앞으로 가기, 새로고침, 새페이지 생성, 특정 페이지 이동 등 키보드를 결합한 다양한 작업이 마우스 제스처만으로 할 수 있다. 이 부분 대표적인 확장 프로그램인 Pig Toolbox라고 할 수 있는데, 업데이트가 멈춘지 오래되고 크로미엄 버전에 따라 동작하지 않는 경우도 발생하는 만큼 현재 사용하기에는 불편하다. crxMouse는 Pig Toolbox를 대체하려는 사용자들이 많이 선택한 확장 프로그램으로 마우스 제스처 기능만 본다면 Pig Toolbox의 대부분 기능을 crxMouse에서도 동일하게 사용 가능하다. 사용자에 따라 마우스 제스처를 부분적으로 커스텀마이징도 할 수 있는만큼 적응만 된다면 편한 웹서핑을 즐길 수 있다. 5. 구글 번역, TransOver 웹서핑을 국내 사이트에서만 할 수만은 없다. 글로벌 각지의 소식을 빠르게 확인하기 위해서는 영어나 스페인어, 독일어, 일본어, 중국어 등 다양한 언어를 해야만 한다. 하지만 우리에겐 구글 번역기가 있다. 구글 번역 확장 프로그램을 사용하면 원하는 웹페이지를 원하는 언어로 순식간에 번역할 수 있다. 물론 아직 100% 정확하게 번역할 수는 없지만, 최근 인공신경망 번역 기술이 접목되면서 번역 품질이 한층 높아진 만큼 빠르게 번역하기에는 이만한 도구는 없다. TransOver은 특정 단어에 마우스를 가져다 대는 것만으로도 번역해 준다. 구글 번역과 함께 사용한다면 외국 웹사이트도 더이상 두럽지 않다. 6. 드롭박스, 구글 드라이브 개인 파일을 USB 등에 따로 가지고 다닐 필요 없이 언제 어디서나 사용하기 위해서는 드롭박스나 구글 드라이브, 원드라이브 등에 저장하면 된다. 해당 서비스를 이용하기 위해서는 직접 웹브라우저에서 접속 후 이용하거나 외부 프로그램을 설치해야만 했지만, 확장 프로그램을 사용한다면 클릭 한번에 특정 파일을 업로드 시키고 공유하는 것도 가능하다. 드롭박스, 구글 드라이브, 마이크로소프트(MS) 원드라이브 등 대부분 개인 웹하드 서비스들이 확장 프로그램 형태로 지원하는 만큼 해당 서비스를 이용하는 유저라면 필수 프로그램이다. 7. 데이터 세이버 직접 인터넷 연결해서 사용하는 PC나 노트북에서는 필요 없을 수 있지만, 외부에서 급하게 스마트폰을 이용한 테더링 기능을 활용한다면 데이터 걱정이 들 수 있다. 이때 필요한 것이 데이터 사용량을 줄여주는 '데이터 세이버 ' 확장 프로그램이다. 구글이 직접 만든 확장 프로그램으로 구글 서버를 통해 웹페이지를 읽어오는 방식으로 속도가 느려지지 않으면서도 웹서핑에 따른 데이터 사용량은 줄어든다. 구글 서버를 경유하는 방식으로 가상 사설망(VPN) 기능이 일부 적용된다는 장점이 있다. 이밖에도 유튜브 동영상이나 페이스북 동영상을 다운로드 할 수 있는 'Chrono Download Manager', 'Social Video Downloader' 등 다양한 확장프로그램이 있다. 또한 요즘 유행인 모바일 서비스인 인스타그램을 PC에서 손쉽게 사용하게 도와주는 'Websta for Instagram', 웹페이지 캡쳐를 할 수 있는 'Awesome Screenshot', 국내 쇼핑몰 가격 비교를 자동으로 해주는 '마트모어' 등 다양한 확장 프로그램을 통해 보다 편리한 웹서핑을 즐길 수 있길 바란다. 단, 확장 프로그램을 추가해 사용하기 이전에 반드시 믿을만한 개발자나 개발사가 만든 확장 프로그램인지 확인하는 과정이 필요하다. 최근 멀웨어가 삽입된 확장 프로그램도 보고되는 만큼 주의해야 한다.