단일 프런트 엔드 엔지니어가 2인 팀을 대체하는 방법

두 마음으로 생각하기

웹 디자인 현장의 수요는 지난 몇 년 동안 바뀌었습니다. 프론트엔드 기술을 갖춘 디자이너와 디자인 기술을 갖춘 프론트엔드 개발자에 대한 수요가 점점 더 많아지고 있습니다. 예, 당신은 직업이 완전히 다르다고 주장할 수 있고 아마도 당신은 그들 중 하나를 좋아하지 않을 수도 있습니다. 그러나 사실은 프리랜서 웹 개발자로서 6년, 디자이너로서 12년 동안 저는 두 가지 역할을 모두 알고 있는 프론트엔드 엔지니어보다 웹 디자이너나 프론트엔드 개발자로서 성공하기가 훨씬 더 어렵다는 것을 배웠습니다.

두 모자를 모두 착용하면 많은 이점이 있습니다. 전문적인 관점에서만 볼 때 더 많은 것을 테이블에 가져오기 때문에 더 쉽게 일자리를 찾고 더 높은 요금을 청구할 수 있습니다.

그러나 하이브리드 프론트 엔드 엔지니어로 일하면 알아야 할 몇 가지 단점과 이를 해결하는 방법도 있습니다. 크리에이티브 디자이너는 시각적, 공간적, 지각적 정보, 즉 웹 디자인에서 아름다운 모든 것을 담당하는 반쪽인 "우뇌"를 사용하게 됩니다. 테크니컬 프론트엔드 개발자로서 당신은 오른쪽에 있는 미친 아티스트의 논리적이고 분석적인 파트너인 "좌뇌"를 사용할 것입니다.

그리고 당신은 한 사람이기 때문에 같은 두뇌로 동시에 완전히 다른 두 가지 일을 하고 있다는 것을 의미합니다. 그러면 두뇌가 완전히 혼란스러울 수 있습니다. 처리할 수 없으면 양질의 작업을 생성하거나 잠재력을 최대한 발휘할 수 없습니다. 또한 하이브리드 프론트엔드 엔지니어링 직무에 따라 생활하려는 프리랜서라면 아마도 두 팀(개발자와 디자이너)으로 구성된 팀과 경쟁하고 있을 것이므로 같은 기간 동안 작업해야 합니다. 품질 유지. (물론 2인 1조로 급여도 받을 수 있어요!)

뇌의 어느 부분을 언제 사용해야 하는지 아는 것은 프로세스를 간소화하고 마감 시간에 여유를 갖고 좌절하지 않고 최상의 결과를 생성하는 열쇠입니다. 왼쪽이든 오른쪽이든 어디에 부족하든 이 게시물은 필요한 기술과 이를 습득할 수 있는 방법을 이해하는 데 도움이 될 것입니다.

프로젝트와 원나잇 스탠드

알았어, 준비됐어? 엄청난! 맞춤형 VPS 솔루션을 제공하는 신생 스타트업인 miniCloud를 위한 사이트를 디자인하라는 요청을 받았다고 가정해 보겠습니다. 어디서 시작합니까?

프로젝트에 대한 "실제" 작업을 시작하기 전에 저는 그 프로젝트와 함께 잠자리에 드는 것을 좋아합니다. 이것은 고객의 제품, 서비스, 경쟁 등에 대해 철저한 조사를 하는 것을 의미합니다. 간단히 말해서, Google은 지옥입니다. 그 후, 하루 종일 프로젝트에 대해 생각하십시오. 작업을 마치면 어떻게 될까요? 저녁 식사에 가져가고 새롭고 섹시한 디자인을 염두에 두고 잠에 드십시오. 이 단계에서 아이디어가 떠오를 때마다 메모할 수 있도록 연필(또는 휴대폰)을 항상 준비해 두십시오. 이러한 종류의 마음 작업은 일반적으로 프로세스의 주요 측면을 정의하는 데 도움이 됩니다.

창의적인 주스 흐름: 디자인 프로세스

이제 구축할 몇 가지 아이디어가 있으므로 실제 설계 프로세스를 시작할 때입니다. 이것은 1) 스케치, 2) 와이어프레임, 3) 그래픽의 세 단계로 구성됩니다. 이것은 두뇌의 예술적인 절반이 그 일을 하도록 하고 연필, 종이 및 Photoshop으로 미쳐가는 부분입니다.

이 디자인 단계에서는 HTML, CSS 및 jQuery를 사용하여 빠르게 다시 만드는 것이 거의 불가능한 웹 사이트의 일부 측면에 미쳐버리지 않도록 "개발자" 측에서 계속 확인하도록 하는 것이 중요합니다. 브라우저를 재발명하려고 하면 프론트엔드 개발자가 브라우저를 싫어할 것입니다. 그리고 당신의 프론트엔드 개발자는 당신 입니다 – 기억하십니까?

따라서 웹 디자인의 모범 사례(및 일부 상식)를 따르십시오. 친구의 웨딩 드레스 웹사이트를 재설계하여 새로운 영역을 개척할 가능성은 거의 없기 때문입니다. 이것은 환상적이고 인상적인 디자인을 만드는 것을 목표로 해서는 안 된다는 말은 아닙니다. 그러나 오히려, 실현 가능하다고 알고 있는 것을 생각해 내십시오. 웹을 재발명하는 프로젝트는 일반적으로 기한 없이 여가 시간에 완료됩니다.

1. 스케치 : 정사각형 종이 노트와 연필 몇 개로 시작합니다. 정사각형 용지는 그리드 기반 디자인에 사용할 수 있기 때문에 특히 좋습니다. 나중에 스케치를 와이어프레임으로 변환하고 맨 마지막에 그리드 기반 웹사이트로 변환할 때 문제가 없습니다. miniCloud의 경우 스케치는 다음과 같을 수 있습니다.

눈, 새, 구름과 같은 스케치에 대한 추가 세부 사항은 제 미루는 산물이며 디자인 프로세스의 어떤 부분에서도 필수 사항은 아니지만 멋지게 보입니다.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. 와이어프레임 : 이제 사이트가 어떻게 보일지에 대한 기본 아이디어가 생겼으므로 클라이언트에게 보여줄 수 있는 와이어프레임을 만들 차례입니다. 이 작업을 수행하는 방법에는 여러 가지가 있습니다. 어떤 경우에는 필요하지 않다고 생각되면 단계를 완전히 건너뛸 수 있습니다. 개인적으로 Photoshop은 가장 친숙한 도구이기 때문에 아이디어를 와이어프레임으로 사용합니다. .EPS 또는 .PSD에는 몇 초 만에 시작할 수 있는 무료 와이어프레임 키트가 많이 있으므로 처음부터 모든 요소를 ​​만들고 그릴 필요가 없습니다. Photoshop을 피하고 싶다면 몇 가지 온라인 솔루션도 있지만 저는 오프라인에 더 가깝습니다. 어쨌든 스케치를 확장하면 다음과 같이 웹 사이트를 와이어프레임할 수 있습니다.

1. 그래픽 : 이것은 내가 가장 좋아하는 부분입니다. 와이어프레임을 아름다운 웹사이트로 바꾸는 것입니다. 그러나 모든 사람이 내가 아닙니다. 귀하가 주로 개발자이고 디자인, 색상, 타이포그래피 등에 대한 재능이 거의 없거나 전혀 없는 경우 디자인 영감을 위해 다른 웹사이트에서 시작하는 것이 좋습니다. 많은 것들이 있고 훌륭한 아이디어로 가득 차 있습니다. 당신 안에 방금 나오기를 기다리고 있는 디자이너가 있을지 누가 ​​압니까? 특히 잘생겼거나 디자인이 좋은 웹사이트의 북마크 폴더를 유지하는 것이 도움이 됩니다. 피카소(?)는 "훌륭한 예술가는 베끼지만 위대한 예술가는 훔친다"고 말했는데, 이는 다른 사람의 디자인을 가져와 스티커를 붙인다는 의미가 아닙니다. 대신 다른 사람의 작업에서 영감을 얻고 자신의 스핀과 접근 방식을 추가하십시오.

저는 모든 디자인을 포토샵으로 합니다. 이상적으로는 클라이언트가 자리 표시자 대신 사용할 수 있는 사진 및 복사 텍스트와 같이 작업할 원자재를 제공합니다. 수정본으로 보낼 때 훨씬 좋아 보입니다.

 So, for step three, we take our wireframe and bring it to life: 

그건 그렇고: 결국 Photoshop을 사용하게 된다면 플러그인 및 스타일과 같이 프로세스를 훨씬 더 빠르게 만들어줄 멋진 리소스가 많이 있습니다. 나는 그들에 대한 전체 게시물을 혼자 쓸 수 있으므로 자주 사용하는 몇 가지만 지적하겠습니다.

1. CSS3P : 레이어를 CSS3로 변환하는 무료 클라우드 기반 Photoshop 플러그인입니다.
2. Divine Elemente : PSD에서 직접 WordPress 테마를 만듭니다. WordPress 프로젝트를 빠르게 시작하는 데 좋습니다. "HTML 기술이 필요하지 않음"이라고 표시되어 있지만 멋진 결과를 얻으려면 실제로 몇 가지가 필요합니다.
3. 미묘한 패턴 : 일반적으로 배경으로 디자인에 사용할 무료 패턴 모음입니다. 이와 같은 세부 사항은 디자인을 훌륭하게 만들려고 할 때 모든 차이를 만듭니다.

"슬라이스 업": 프론트 엔드 프로세스

디자인 단계를 마치고 만족스러운 클라이언트로부터 승인을 받은 후에는 정적 이미지를 라이브 웹사이트로 전환할 준비가 되었습니다. 이 시점에서 우리의 디자인은 여전히 ​​디자인이라는 것을 기억하십시오. 웹용으로 준비되기 전에 가야 할 길이 있습니다.

이 단계에서 두뇌의 왼쪽, 더 분석적인 절반을 사용할 때입니다.

웹 디자인 세계에서는 이 프로세스를 "슬라이싱"이라고 합니다. 이 용어는 얼마 전에 더 정확했지만 CSS가 웹의 주요 시각적 구성 요소가 되기 전에 PSD 또는 PNG의 모든 작은 조각을 잘라내어 두려운 작은 테이블에 넣어야 했습니다.

당신이 웹 디자이너이고 아직 '프론트엔드' 방법을 모른다면 운이 좋은 것입니다. 왜냐하면 코딩을 배울 수 있기 때문입니다(디자인에 타고난 소질이 있는 것과는 다름). Lynda.com과 같은 온라인 비디오 자습서에 투자하고 프런트 엔드 개발 기본 사항을 살펴보는 것이 좋습니다. (자세한 리소스 목록은 여기에서 찾을 수 있습니다.) 몇 시간 만에 코드를 읽지 않아도 됩니다. 그리고 며칠 안에 당신이 직접 작성하게 될 것입니다. 그리고 몇 달 안에 HTML과 CSS의 마스터가 될 것입니다. 그러면 프론트 엔드 엔지니어링 작업에 관해서는 당신을 막을 수 없습니다.

이제 익숙한 그리드에 따라 훌륭한 와이어프레임(이전 단계에서)을 생성했다면 사이트를 코딩하는 방법을 정확히 알 수 있을 것입니다. 가장 빠른 방법은 Bootstrap과 같은 일종의 프론트엔드 프레임워크를 사용하는 것입니다.

그리드 기반 디자인에 익숙해지면 웹사이트의 모든 부분이 일련의 행과 열로 표시되기 시작할 것입니다. 실제 콘텐츠나 CSS를 추가하기 전에 HTML 구조를 설정할 때 가장 먼저 하는 일은 행, 열, 탐색과 같은 기본 항목, 텍스트 및 이미지 자리 표시자 순으로 작성하는 것입니다. 이를 통해 기본 구조를 먼저 다운로드하고 거기에서 빌드할 수 있습니다. 이 와이어프레임을 보면 6개의 행을 볼 수 있습니다.

1. 로고/내비게이션
2. 이미지 슬라이더
3. 소개 텍스트
4. 카테고리 이미지
5. 최신 뉴스 / 제안
6. 보행인

그것들을 Bootstrap의 HTML 구조에 맞추면 다음과 같이 됩니다.

많은 기본 웹사이트가 동일한(또는 유사한) 코드를 사용하며, 점점 더 많은 프로젝트에서 작업함에 따라 웹사이트 개발은 대체로 반복적인 프로세스이며 각 반복에서 동일한 코드를 작성하는 것은 의미가 없음을 알 수 있습니다. . 이것이 프레임워크가 유용한 이유입니다! 직접 만들거나 Bootstrap 또는 Foundation을 사용하기로 결정했는지 여부는 중요하지 않습니다. 중요한 것은 나중에 유지 관리하고 필요한 경우 확장할 수 있다는 것입니다.

프로젝트에 필요한 거의 모든 것이 이전에 만들어졌고 몇 번이고 다시 만들어졌습니다. 따라서 주요 작업의 경우 벽을 뚫고 먼저 들어가기 전에 주변을 검색하고 제안 사항이 있는지 다른 사람들에게 물어보십시오. 대부분의 대형 프레임워크에는 작업을 더 쉽게 하기 위해 추가 코드와 플러그인을 만드는 매우 활동적인 커뮤니티가 있습니다. 따라서 열심히 일하지 말고 현명하게 일하고 매일 배우십시오. 그리고 이전에 아무도 구축하지 않은 것이 필요하다면 새로운 영역을 개척하고 있는 것입니다! 그것에 대해 쓰고 커뮤니티와 공유하세요. 디자이너와 개발자로 성장하는 데 도움이 될 것입니다.

CMS 선택

일부 프론트 엔드 엔지니어링 프로젝트의 경우 디자인이 라이브 웹 페이지에 존재하는 즉시 완료됩니다. 이들은 일반적으로 소규모 사이트입니다(예: 중소기업, 변호사, 치과의사 등). 그러나 종종 귀하 또는 귀하의 고객은 웹사이트의 콘텐츠를 제어하기를 원할 것입니다. 이 경우 콘텐츠 관리 시스템(CMS)이 필요합니다. CMS의 목표는 모든 새로운 세부 사항을 손으로 코딩하거나 아예 코딩하지 않고도 콘텐츠를 편집하고 웹 페이지에 게시할 수 있도록 하는 것입니다.

모든 대형 CMS 중에서 저는 스스로를 WordPress Evangelist라고 부를 것입니다. 다용성, 사용 용이성, 개발을 위한 포괄적인 문서, 대규모 커뮤니티, 많은 수의 무료 플러그인, 등등 등등...

누군가가 Joomla! 특히 소규모 프로젝트의 경우 더 좋습니다. 그러면 그들은 자신이 무슨 말을 하는지 모릅니다. 어쨌든 내 말을 그대로 받아들이지 마세요. WordPress와 Joomla를 다운로드하세요! 시작 테마를 선택하고 각 폴더를 살펴본 다음 새로운 프론트 엔드 역할에서 어떤 것을 탐색하고 싶습니까?

이 주제에 대해 쓰려면 전체 기사가 필요하지만 선크림에 대해 Baz Luhrmann을 신뢰하는 것처럼 이 기사에서도 저를 신뢰하십시오.

프로젝트가 특히 작고 코딩 기술 없이 구현할 수 있는 간단한 CMS만 필요한 경우 CouchCMS를 사용하는 것이 좋습니다. XHTML 태그 몇 개만 있으면 몇 분 안에 시작하고 실행할 수 있으며 할머니도 사용법을 알 것입니다.

웹사이트 유지 관리

웹 사이트를 제공하고 만족스러운 또 다른 고객을 확보한 후에는 사이트를 유지 관리하기만 하면 됩니다. 새로운 콘텐츠가 없을 간단한 HTML 사이트를 구축했다면 거의 다 된 것입니다.

CMS를 사용한 적이 있다면 보안 침해를 피하기 위해 기술이 항상 최신 상태인지 확인해야 합니다. 여기에는 CMS 자체와 사용한 모든 플러그인이 포함됩니다. 내 조언을 받아들이고 WordPress를 사용한 경우 사용 가능한 모든 업데이트에 대해 이메일을 통해 알림을 받게 됩니다.

이것은 내 프로세스의 야구장입니다. 물론 모든 사람에게 적용되는 것은 아니며 모든 프로젝트에 적용되는 것도 아닙니다. 하지만 이것이 디자이너가 훌륭한 프론트엔드 엔지니어가 되는 데 필요한 기술을 얻는 데 도움이 되길 바라며, 그 반대의 경우도 마찬가지입니다.

문만 보여드릴 수 있어요. 당신은 그것을 통해 걸어야 하는 사람입니다. - 모페우스, 매트릭스

추신: 내 드리블 포트폴리오에서 위 템플릿의 PSD와 기타 멋진 디자인을 찾을 수 있습니다.