모듈 및 모듈식 프론트엔드 개발 시작하기

모두가 레고 브릭을 알고 사랑합니다. 어렸을 때 레고에 푹 빠졌고 지금도 좋아합니다. 한 번에 한 조각씩 다양한 방법으로 모든 종류의 레고로 장난감을 조립할 수 있습니다. 그런 다음 처음부터 다시 시작하여 같은 조각으로 다른 장난감을 만들 수 있습니다. 가능성은 무한합니다.

웹사이트의 모듈은 레고와 매우 유사합니다. 모듈을 웹사이트를 구축할 수 있는 레고 ​​조각으로 생각하십시오. 그것들을 올바른 방식으로 연결하면 웹 페이지가 형성됩니다. 레고와 같은 웹사이트를 구축하려면 웹사이트를 독립적인 모듈의 모음으로 생각해야 합니다. 이 기사는 프론트 엔드 개발 및 디자인에서 바로 이를 수행하는 데 도움이 될 것입니다.

모듈 콜라주

프로젝트의 디자인 단계에 들어갈 때 디자인 영감 콜라주와 모듈 콜라주를 조립하는 것으로 시작하는 경향이 있습니다. 이러한 콜라주를 사후 비교 시대를 위한 디자인 결과물이라고 부르는 Dan Mall과 매우 유사한 프로세스입니다. 영감 콜라주는 우리가 향하고 있는 시각적 방향에 대한 일반적인 아이디어를 얻기 위해 클라이언트에게 제시하는 스크린샷 모음입니다. 그들은 단순히 나와 클라이언트가 좋아하는 웹사이트의 스크린샷입니다.

스타일 면에서 같은 페이지에 있다는 확인을 받으면 그래픽 편집기(나는 Sketch를 선호함)로 이동하여 모듈 콜라주를 만들 수 있습니다. 이 콜라주는 버튼, 양식, 머리글, 단락, 목록, 그림 등 가장 일반적으로 사용되는 모듈의 모음입니다. 모듈 콜라주를 사용하면 웹사이트의 모양과 느낌을 빠르게 만들 수 있습니다.

다음은 프로젝트 시작 시 Sketch에서 디자인한 버튼의 예인 최근 모듈 콜라주의 일부입니다.

정적 구성 요소와 완벽한 픽셀 디자인을 클라이언트에 제공하는 작업이 언제 작동하는지 궁금할 것입니다. 그들은 하지 않습니다 — 저는 제 과정에서 그것들을 거의 완전히 건너뛰고 있습니다. 프로세스의 해당 부분을 건너뛰면 프로젝트 및 코드 프로토타입(곧 설명하겠습니다), 즉 브라우저에서 디자인하는 초기에 코드에 들어갈 수 있습니다. 다음은 브라우저에서 디자인할 때의 몇 가지 장점입니다.

• 브라우저는 웹 사이트의 자연스러운 환경이며 그래픽 편집기에서 만든 아이디어를 고수하면 역효과가 날 수 있습니다. 브라우저에서 테스트하고 디자인 결정을 내리는 것은 자연스러운 일입니다. 이전에 들어본 적이 있고 다시 듣게 될 것입니다. 모양이 아니라 작동 방식에 관한 것입니다.

• 정적 모의 객체와 코드로 변환되면 브라우저에 표시되는 것 사이에는 항상 디자인 불일치가 있습니다. 이러한 불일치를 피하려면 코드 편집기와 브라우저로 이동하여 실제 설계 문제를 해결하십시오.

• 정적 구성 요소는 올바른 메시지를 전달하지 못할 수 있습니다. 호버 상태, 전환 및 애니메이션과 같은 상호 작용 기능을 통합하면 모양과 느낌이 많이 달라집니다.

• 여러 해상도에 대해 여러 정적 모형을 디자인하는 데 몇 시간을 소비하는 대신 코드를 일찍 시작하여 많은 시간을 절약할 수 있습니다. CSS를 조정하면 스마트폰, 태블릿 등 다양한 장치에서 클라이언트에 대한 변경 사항과 응답 측면을 빠르게 시연할 수 있습니다.

따라서 시간을 절약하고 코드 편집기와 브라우저를 열어 가능한 한 빨리 UX 생성을 시작하십시오. 내 경험에 따르면 대부분의 고객은 코딩을 진행하기 전에 한두 페이지의 전체 모형을 요청할 것이며 완전히 괜찮습니다. 클라이언트가 미래 디자인에 대한 좋은 감각을 갖는 것이 중요합니다. 저는 보통 초기 모형, 변경 사항, 의견 등을 추적하는 훌륭한 도구인 InVision을 사용합니다. 그러나 고객이 Sketch와 InVision이 그다지 멀리 가지 못할 것이라는 점을 이해하는 것이 매우 중요합니다.

프론트엔드 개발을 위한 모듈 빌드

클라이언트가 내가 디자인한 모듈 콜라주와 모형에 만족하면 코딩을 시작하고 해당 요소의 실제 모양과 느낌을 정의할 수 있습니다.

모듈식 설계는 반복적인 프로세스에서 모듈식 개발과 얽혀 있습니다. 모듈을 코딩한 다음 브라우저에서 작동 방식을 확인하고 필요한 경우 반복합니다. 다시 말하지만, 이 프로세스는 레고를 만드는 것과 매우 유사합니다. 기본적으로 동시에 디자인 및 개발하고 마음에 들 때까지 다양한 변형을 시도합니다.

나는 종종 버튼과 같은 단순한 것을 만드는 것으로 모듈 개발을 시작합니다. 직접 구축하고 일반적으로 문의 양식에 사용되는 주황색 버튼을 코딩해야 한다고 상상해 보십시오. 다음은 생각해낼 수 있는 사항입니다.

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

충분히 간단하죠? .submit-button 클래스를 HTML에 적용하면 현재 문제가 해결됩니다. 이제 파란색 배경색을 가진 새 버튼을 생성해야 하는 경우에는 어떻게 될까요? 그 정확한 클래스를 복사한 다음 클래스 이름과 배경색을 변경할 수 있습니다. 빠르고 더럽습니다. 이제 동일한 버튼을 사용해야 하지만 주황색 배경이 필요하다고 상상해 보십시오. 이것이 어디로 가는지 알 수 있습니다. 많은 CSS가 반복되는 결과를 초래할 수 있습니다. 아주 작은 프로젝트에서는 이것이 실제 문제가 되지 않을 수 있지만 더 큰 프로젝트에서는 아마도 그럴 것입니다. 당신이 그것을 알기도 전에 CSS는 부풀려지고 유지 관리하기 어렵습니다.

중대형 프로젝트를 개발한 적이 있다면 의심할 여지 없이 상당한 골치거리를 경험했을 것입니다. 다음과 같은 이유로 인해 발생할 수 있습니다.

• 지저분하고 일관성이 없으며 스캔하고 이해하기 어려운 코드입니다.
• 중복이 많은 부풀려진 코드와 XXL CSS 파일.
• 유지 관리가 어려운 코드입니다.
• 구조와 피부의 분리 부족.

걱정하지 마세요, 당신은 혼자가 아닙니다. 나는 모든 프론트엔드 개발자들이 때때로 이러한 고통스러운 문제를 경험했을 것이며 아마도 더 많을 것입니다. 나는 과거에 이러한 모든 전형적인 문제에 직면한 많은 프로젝트를 수행했다고 자신 있게 말할 수 있습니다.

이러한 문제를 피하거나 최소화하는 한 가지 방법은 모듈 방식으로 구축하는 것입니다.

모듈식 버튼

해당 버튼을 모듈 방식으로 코딩하는 방법은 무엇입니까? 모듈식 접근 방식은 재사용할 수 있는 코드를 작성하는 것입니다. 다시 사용하고 재사용할 수 있는 레고를 기억하십시오.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

우리가 한 것은 스타일을 영리하게 분리한 것입니다. .button 클래스에는 프로젝트의 모든 버튼이 사용하는 스타일이 포함되어 있으므로 반복할 필요가 없습니다. .button-orange 클래스는 주황색 버튼과 관련된 스타일만 사용합니다. 다른 모든 버튼에 대해서도 동일한 작업을 수행하고 배경 및 텍스트 색상을 정의합니다.

버튼 모듈은 필요할 때마다 사용할 수 있는 여러 독립 버튼으로 구성될 수 있습니다.

더 복잡한 것은 어떻습니까?

필요할 수 있는 다른 모든 구성 요소에 대해 동일한 원칙을 따릅니다. 목표는 다른 모듈과 독립적인 독립형 요소인 모듈을 만드는 것입니다. 이러한 모듈을 결합하면 필요에 따라 모듈을 재사용하고 디자인을 완성하기 위해 작업하는 템플릿을 형성합니다.

모듈식 프론트 엔드 개발에 대한 추가 정보를 보려면 크든 작든 모든 프로젝트에서 사용하는 경향이 있는 아키텍처인 SMACSS를 강력히 추천합니다.

모듈식 프로세스는 모두 빌드, 테스트 및 반복에 관한 것임을 기억하십시오. 모듈은 먼저 편집기에서 생성된 다음 브라우저에서 테스트한 다음 필요한 경우 반복됩니다. 필요할 때마다 해당 주기를 반복합니다.

클라이언트 참여

고객의 요구 사항을 잊지 마세요. 고객은 계속해서 정보를 얻고 싶어하며 돈 가치가 있다는 확인을 받기를 원합니다. 이 개발 프로세스의 장점은 클라이언트가 팀의 적극적인 구성원이 될 수 있다는 것입니다. 당신은 그들에게 모듈을 안전하게 보여줄 수 있고 그들은 개발 과정을 간과하고 제품을 더 좋게 만들기 위해 항상 피치를 할 수 있습니다. 그들은 실제 진행 상황을 보기 전에 정적 구성 요소가 완료되거나 이정표에 도달할 때까지 기다릴 필요가 없습니다. 모듈이 작동하는 방식을 클라이언트에게 설명하는 데 시간을 할애하면 설계 프로세스와 모듈을 구축하는 데 소요된 시간에 대해 더 잘 이해하고 감사하게 될 것입니다.

내가 일반적으로 클라이언트에게 모듈을 제시하는 방식은 Bootstrap이 하는 것과 매우 유사합니다. 코드와 함께 격리된 모듈을 설정하는 것은 모든 디자이너, 개발자 및 클라이언트를 프로세스에 참여시키는 좋은 방법입니다.

페이지의 빌딩 블록으로 구축한 모듈을 사용합니다. 인덱스 페이지의 경우 탐색 모듈을 맨 위에 놓고 영웅 모듈을 다음으로, 일부 콘텐츠 모듈을 다음으로, 바닥글을 맨 아래에 배치할 수 있습니다. 당신이 그것을 알기도 전에, 당신은 이미 HTML 프로토타입을 위한 페이지를 가지고 있습니다. 그러나 프로토타입이란 정확히 무엇입니까? 나는 항상 Leah Buley의 훌륭한 책인 User Experience Team of One에서 프로토타입에 대한 정의를 좋아했습니다.

구현된 설계가 어떻게 작동하고 작동해야 하는지에 대한 기능 또는 반기능 예.

프로토타입을 구축함으로써 프로젝트의 초기 단계에서 바로 반 기능 웹사이트를 얻을 수 있습니다. 정적 모형과 InVision이 부족한 경우 HTML 프로토타입이 탁월합니다. 프로토타입은 고객에게 완벽한 반응형 결과물 역할을 합니다. 클라이언트가 프로토타입의 모양과 느낌에 만족하면 원하는 방식으로 작동할 때까지 다듬기만 하면 됩니다. 빌드, 테스트, 반복

빌딩 블록 재사용

모듈과 프로토타입을 사용하면 현재 프로젝트뿐 아니라 향후 프로젝트에서도 코드를 재사용할 수 있습니다. 마지막 프로젝트에서 모듈을 조정하면 많은 시간을 절약할 수 있습니다. 각 프로젝트에 필요한 모듈은 종종 비슷합니다. 탭, 탐색 메뉴, 버튼, 이동 경로, 양식, 테이블, 페이지 매김, 목록 등 자주 재사용하는 큰 모듈 라이브러리가 있습니다. 이러한 모듈의 코드가 모든 프로젝트에서 정확히 동일하지는 않지만 그 중 좋은 덩어리가 있습니다. 재사용할 수 있어 개발 시간을 많이 절약할 수 있습니다. 당신을 위한 나의 조언은 당신 자신을 위한 재사용 가능한 모듈을 만드는 것입니다. 영감을 얻으려면 BASSCSS, Pure 및 Refills를 확인하십시오.

모듈식 설계 및 개발로 전환하는 데 시간이 걸리더라도 낙담하지 마십시오. 당연히 모듈식 원칙이 처음인 경우 설계 및 개발 프로세스를 조정해야 하지만 변경은 가치가 있는 것으로 판명될 수 있습니다.

이 기사에서 다룬 모듈식 방법과 기술은 단지 표면을 긁는 것입니다. 그럼에도 불구하고 이 기사가 유용하고 모듈식 설계 및 개발에 대해 관심을 갖게 되었기를 진심으로 바랍니다.