브라우저에서 웹사이트 디자인 프로세스에 접근하기

"여기 미친 사람, 부적응자, 반란군, 말썽꾸러기, 사각형 구멍에 있는 둥근 말뚝... 사물을 다르게 보는 사람 - 규칙을 좋아하지 않는 사람... 인용하거나 동의하지 않거나 미화하거나 그들을 비방하지만, 당신이 할 수 없는 유일한 것은 그들이 상황을 바꾸기 때문에 그들을 무시하는 것뿐입니다...” — Apple의 Think Different 캠페인, 스티브 잡스, 1997.

대부분의 경우 디자이너는 웹사이트 디자인 과정에서 여전히 전통적인 디자인 도구를 사용하여 화면의 정적인 모형을 만들고 있습니다. 그러나 일부 디자이너는 엄청난 도약을 하고 이를 우회하고 곧바로 코드를 작성하고 브라우저 내에서 디자인을 구축 및 조정하고 실시간으로 사람들에게 보이는 대로 디자인을 테스트합니다 . 그들이 미친 자들입니까, 부적응자입니까, 반군입니까?

일반적으로 기존 웹 사이트 개발 프로세스에는 계획, 콘텐츠 전략, 디자인, 와이어프레이밍, 프로토타이핑, 테스트, 개발, 게시 등 많은 단계가 포함됩니다. 그러나 디자인 단계에서 "픽셀 완벽한" 반응형 사이트 디자인을 생성하고 디자인 도구를 완전히 우회하는 다른 방법이 있을 수 있습니까?

반응형 디자인의 등장과 사용하는 장치(모바일, 태블릿, 랩톱, 데스크톱, 시계)의 다양성으로 인해 모든 것을 일관성 있게 유지하는 것이 훨씬 더 어려워지고 고려해야 할 움직이는 부분이 많아지면서 웹 사이트 및 인터페이스를 디자인하는 접근 방식 변화하고 있다.

디자이너가 전문 코더가 될 필요는 없지만 한 가지 솔루션은 디자이너가 웹사이트를 구동하는 코드로 직접 작업을 시작하는 것입니다. 약간의 HTML 및 CSS로 코드를 랭글링할 수 있는 디자이너는 자신이 모든 팀에 큰 자산임을 알게 될 것이며 전반적으로 엄청난 이점을 갖게 될 것입니다.

왜요? 모든 복잡성이 있는 반응형 웹 사이트 디자인 프로젝트에 참여할 때 디자이너는 일반적으로 10가지 다른 해상도와 뷰포트에 걸쳐 하나의 구성 요소(예: 머리글 또는 바닥글)의 정적 디자인을 만들 시간이 없습니다. 가장 인기 있는 기기만을 위해 디자인하더라도 가로 세로 비율, 화면 밀도 및 화면 크기가 다른 4-5개의 화면을 고려해야 합니다. 작은 작업은 말할 것도 없습니다.

펜과 종이로 웹사이트 디자인 문제 해결하기

다른 웹사이트 디자인 접근 방식과 계획 프로세스를 살펴보겠습니다.

첫 번째 단계는 비즈니스 관점에서 일반적인 프로젝트 목표, 대상 고객, 전환 전략, 다양한 성능 기대치 등에 대해 묻는 클라이언트 질문으로 시작됩니다. 이것은 실제 설계 단계가 시작되기 전에 수행되어 클라이언트의 요구와 프로젝트 전체를 더 잘 이해하고 더 효율적으로 진행됩니다.

다음 단계는 개요를 이해했는지 확인하기 위해 프로젝트 개요를 작성하는 것입니다. 이것은 경험이나 전문 지식이 많지 않은 틈새 시장에서 프로젝트를 수행할 때 유용합니다. 기능 사양이라고 하지만 덜 기술적인 사양입니다.

이는 용어, 키워드 및 프로세스를 정의하는 데 도움이 됩니다. 프로젝트의 복잡성에 따라 몇 가지 시나리오와 사용자 흐름을 수행하는 것이 좋습니다. 일반적으로 온보딩 흐름, 사이트 검색 및 탐색 또는 전자 상거래 사이트인 경우 "장바구니에 추가" 및 체크아웃 흐름입니다.

와이어프레임 및 프로토타이핑

프로토타이핑은 웹사이트 디자인 프로세스의 다음 단계입니다. 페이지 레이아웃, 기능 및 사이트 페이지가 다른 장치에서 어떻게 보이는지에 대해 이야기하기 위해 빠른 와이어프레임을 작성하는 것이 좋은 시작입니다. 다양한 템플릿과 구성 요소로 구성된 수십 개의 와이어프레임을 구축하는 데 많은 시간이 걸리지 않습니다. 이들로부터 간단한 웹사이트 프로토타입을 생성할 수 있으며 프로젝트의 복잡성에 따라 InVision, Adobe XD, Balsamiq, Moqups 또는 Axure와 같은 프로토타이핑 도구를 사용할 수 있습니다.

무드 보드 및 인터페이스 인벤토리

다음 단계는 무드 보드를 만드는 것입니다. 디자이너, 클라이언트 및 기타 이해 관계자가 다른 웹사이트에서 좋아할 수 있는 레이아웃, 모양과 느낌, 색상 또는 글꼴, 아이콘, 이미지 등의 모음입니다. 이것은 사이트의 전반적인 모양과 느낌을 정의하는 데 도움이 됩니다. 클라이언트에게 브랜딩 스타일 가이드가 있는 경우 이를 고려하여 새 사이트 디자인에 통합해야 합니다.

와이어프레임, 프로토타입, 목업, 무드 보드 등 다양한 아티팩트가 승인되면 인터페이스 인벤토리를 수행하는 것이 좋습니다.

인터페이스 인벤토리는 인터페이스를 구성하는 부분의 포괄적인 모음입니다.

브래드 프로스트

반응형 웹 디자인을 처음부터 수행하는 경우 프로젝트를 구축할 모든 구성 요소와 요소를 작성하는 것으로 시작하십시오. 순서가 지정되지 않은 목록은 잘 작동하며 없는 것보다 확실히 낫습니다. 예를 들어 테이블, 버튼, 이미지, 타이포그래피, 미디어, 양식, 탐색, 구성 요소 등

브라우저에서 디자인하기

"브라우저에서 디자인하기" 는 반응형 웹 디자인이 부상하면서 대중화된 용어입니다. Sketch와 같은 디자인 프로그램에 소요되는 시간을 최소화하기 위해 디자이너는 디자인 단계를 브라우저로 이동하고 CSS를 레이아웃 및 스타일 지정에 활용해야 합니다. 이 웹사이트 디자인 접근 방식은 많은 단계를 생략하므로 더 효율적인 것으로 판명되었습니다.

HTML 목업에 초점을 맞추고 CSS로 "브라우저 내" 디자인 아이디어를 테스트하면 일반적으로 Sketch와 같은 다른 디자인 도구에서 페이지의 정적 목업을 만드는 데 소요되는 시간을 절약할 수 있습니다. 디자이너는 좋은 코드 편집기를 가지고 실시간으로 변경 사항을 볼 수 있도록 좋은 브라우저 새로 고침 방법을 찾는 것이 좋습니다. 예를 들어, Sublime Text와 Codekit은 훌륭한 조합입니다.

있는 그대로의 구조화된 HTML과 CSS는 패턴에 대해 생각하게 하고 계속 확인하도록 합니다. 동일한 구조를 유지하면서 쉽게 복사, 복제 및 동적 데이터로 채울 수 있는 HTML 구성 요소를 구축할 때 모듈성에 대해 생각하는 것이 더 쉽습니다. 특정 수정 사항을 생성하려면 해당 요소를 명시적으로 대상으로 지정하거나 다른 CSS 클래스를 추가해야 합니다.

제목 스타일을 지정할 때 재정의하지 않는 한 사이트 전체에서 일관성이 유지됩니다. 다른 요소도 마찬가지입니다. 이러한 유형의 사고는 표준화하고 공통 요소를 함께 그룹화하고 이미 스타일이 지정된 요소를 가능한 한 많이 재사용하고 가장 중요한 것은 모든 것을 모듈식으로 유지해야 합니다.

단일 CSS 선언으로 더 나은 터치 대상을 위해 버튼의 패딩을 변경하고 휴대폰, 태블릿 및 데스크톱에서 직접 테스트할 수 있습니다. Photoshop이나 Sketch에서는 다른 요소가 레이아웃에서 서로를 인식하지 못하고 크기를 조정할 때마다 개체를 재구성해야 하기 때문에 이 작업을 쉽게 수행할 수 없습니다.

다른 헤더 색 구성표를 시도하고 싶으십니까? 몇 줄의 CSS 코드로 작업함으로써 모든 장치와 화면의 모든 HTML 템플릿에서 변경 사항을 즉시 볼 수 있습니다. 이러한 종류의 유연성은 20개의 정적 모형이 있는 경우 쉽게 모방할 수 없습니다. 물론 재사용 가능한 구성 요소에 대해 Sketch 또는 Adobe XD에서 "심볼"을 사용할 수 있지만 CSS만큼 다양하지는 않습니다.

이 단계에서 몇 가지 기술적 결정을 내려야 합니다. 답변이 필요한 질문은 다음과 같습니다.

• CSS 전처리기를 사용하시겠습니까? (권장)
• 레이아웃에 어떤 유형의 반응형 그리드를 사용하시겠습니까?
• 사용하려는 글꼴을 구매할 수 있습니까? 고객에게 프리미엄 웹 글꼴에 대한 예산이 있습니까? 아니면 사용 가능한 무료 웹 글꼴을 사용하도록 되돌릴 것입니까?
• 여러 색상 또는 단색 아이콘을 사용하시겠습니까? 사이트 전체에 걸쳐 크기가 다를까요? 다음은 사용자 지정 아이콘 또는 이미 존재하는 아이콘 팩에 의존하고 있습니까? 아이콘에 어떤 크기가 필요합니까?

글꼴과 반응형 웹 디자인의 문제점

반응형 웹 디자인 프로젝트의 글꼴을 선택하는 것은 어려울 수 있습니다. 많은 가능성과 많은 함정이 있습니다. 디자인이 브라우저에서 사용되기 때문에 이곳이 가장 좋은 곳입니다. 글꼴 가독성은 크기, 무게, 색상 및 렌더링에 따라 달라질 수 있으므로 디자이너는 브라우저에서 직접 글꼴을 사용해 보고 원하는 기대치를 충족하는지 확인할 수 있습니다.

글꼴을 선택 및 테스트하고 글꼴 조합을 시험해 볼 수 있는 온라인 도구가 많이 있습니다. Typetester 및 Typecast에서 다양한 서비스 및 파운드리의 다양한 글꼴을 찾고 테스트할 수 있습니다. Typekit 또는 Fonts.com과 같은 특정 글꼴 구독 서비스로 작업할 때 디자이너는 글꼴을 생성하고 페이지 템플릿에서 직접 테스트할 수 있습니다. 새 글꼴로 Typekit 패키지를 생성하는 것은 간단하고 빠르며 특정 글꼴이 웹 페이지의 성능에 어떤 영향을 미치는지 쉽게 확인할 수 있습니다.

브랜드 스타일에 맞는 아이콘

사용자 정의 아이콘을 그리는 경우 크기, 격자 및 스타일을 정의해야 합니다. 예를 들어 Illustrator에서 모든 대지는 하나의 아이콘을 나타냅니다. 아이콘은 Illustrator에서 SVG 또는 PNG로 쉽게 내보낼 수 있으며 나중에 Icomoon과 같은 서비스를 통해 아이콘 글꼴로 변환할 수 있습니다. 벡터는 해상도와 무관하므로 벡터 아이콘(SVG)을 사용하는 것이 좋습니다. 따라서 고화질(Retina) 화면에 표시되는 방식에 대해 걱정할 필요가 없습니다.

웹사이트 디자인 프로세스를 점검하는 스타일 가이드 및 CSS

브라우저에서 디자인하더라도 수십 개의 템플릿과 구성 요소가 있는 곳에서 어떤 방식으로 사용되는지 추적하지 못할 수 있습니다. 모든 구성 요소의 스타일 가이드를 중앙 저장소로 구축하는 것이 좋습니다. UI 구성 요소와 요소를 웹 페이지에 결합하여 이 스타일 가이드에서 특정 페이지 템플릿을 빌드합니다.

UI 구성 요소는 페이지 매김, 제품 목록, 이미지 갤러리, 모달 창, 양식 요소 등이 될 수 있으며 템플릿의 빌딩 블록으로 사용됩니다. 모든 것을 한 곳에 보관하면 특정 UI 구성 요소 빌드를 테스트할 때 정말 편리합니다.

CSS를 사용하면 구성 요소 스타일을 별도의 파일로 분리하는 것이 가장 좋습니다. 예를 들어, 페이지 매김 스타일은 _pagination.scss , 양식 요소 _form.scss , 이러한 모든 파일은 다른 파일(변수, 믹스인 등)과 함께 단일 SCSS 파일에 포함됩니다.

style.scss 는 수십 개의 "작은 파일"로 구성될 수 있지만 여러 사람이 동일한 프로젝트에서 작업할 때 모든 것이 더 작은 덩어리로 분리되면 변경 사항(소스 제어 사용 여부에 관계없이)을 추적하는 것이 더 쉽습니다. 팀이 모든 사이트 구성 요소를 추적해야 하므로 웹 사이트 디자인 프로젝트가 제작된 후에도 스타일 가이드를 계속 유지하는 것이 중요합니다.

스타일시트 사용 – 모듈식 CSS

개발 관점에서 모듈식 CSS를 작성하는 방법에는 여러 가지가 있습니다. 가장 잘 알려진 것은 SMACSS(Scalable and Modular Architecture for CSS), BEM(Block, Element, Modifier) ​​및 OOCSS(Object Oriented CSS)입니다. 자신의 접근 방식을 개발하게 되더라도 배울 것이 상당히 많습니다. 이 시점에서 UI 구성 요소와 웹 페이지의 멋진 컬렉션이 있어야 새 웹 페이지를 쉽게 구축할 수 있습니다. 스타일 가이드에서 요소를 복사하여 붙여넣고 필요에 따라 재정렬할 수 있습니다.

모든 것이 모듈식이므로 디자인과 코드 일관성에 대해 걱정할 필요가 없습니다. 그러나 UI 구성 요소를 시스템 전체에서 조정하는 경우 변경 사항으로 스타일 가이드를 업데이트(또는 새 구성 요소 추가)해야 한다는 점을 잊지 마십시오. 모든 것을 체계적으로 유지하려면 Gulp 또는 Grunt와 같은 웹 페이지 작업에 일종의 템플릿/자동화 접근 방식을 사용하는 것이 가장 좋습니다.

무엇 향후 계획? 브라우저에서 디자인하기

이제 UI 구성 요소, 문서화된 모든 요소 및 해당 구성 요소로 구축된 웹 페이지의 중앙 저장소가 있습니다. 이 시점부터 대부분의 "디자인"이 코드에서 직접 수행되고 브라우저에서 미리 보기 때문에 디자이너는 더 이상 좋아하는 디자인 도구를 열 필요가 없습니다.

특정 변경 사항이 디자인에 어떤 영향을 미칠지 확실하지 않습니까? 이제 다른 장치와 브라우저에서 동시에 디자인을 미리 보고 제목에서 글꼴이 어떻게 변경되었는지 확인하거나 버튼의 크기와 색상을 변경하면 디자인에 영향을 미칠 수 있습니다.

사용자 정의 웹 글꼴을 사용할 때 더 많은 글꼴 두께를 추가하면 페이지 로드 성능에 어떤 영향을 줍니까? WebPageTest와 같은 서비스를 사용하여 진행 중인 웹 페이지 성능을 테스트하고 실제 결과에 대한 정보에 입각한 결정을 내릴 수 있습니다. Photoshop이나 Sketch에서는 확실히 할 수 없습니다.

HTML 및 CSS로 작업하고 브라우저에서 작업하는 것은 웹사이트 디자인 과정에서 모든 디자이너에게 적합하지 않을 수 있습니다. 그러나 디자이너가 다양한 장치와 화면 크기에서 작업이 어떻게 보이는지 정말 중요하게 생각한다면 매번 완벽한지 확인해야 합니다. 정적인 디자인 목업으로 멋지게 보이는 것이 모바일 장치의 웹 브라우저에서 볼 때 바람직하지 않게 보일 수 있습니다. 모든 사람이 브라우저에서 볼 수 있는 환경에서 웹 디자인을 구축하고 테스트하는 것은 정통한 디자이너의 의무입니다.

Toptal Design 블로그에 대한 추가 정보:

• 반응형 디자인 – 모범 사례 및 고려 사항
• 효과적인 방문 페이지를 디자인하는 방법
• 전자 상거래 웹 사이트 디자인에 대한 궁극적인 가이드
• 웹사이트 재설계의 기초 – 사례 연구
• 디자인의 원동력 – 웹사이트 재설계 사례 연구