웹 디자인에서 미리 생각하는 것이 중요한 이유

훌륭한 웹사이트를 구축하는 것과 평범한 웹사이트를 구축하는 것의 차이는 일반적으로 초기에 결정됩니다. 웹 디자이너가 프로젝트를 가상 "코너"에 그리는 것은 종종 문제입니다. 디자인이 유연하지 않고 다양한 사용 사례를 수용할 수 없는 경우입니다.

이것은 프로토타이핑 단계에서 발생하는 경향이 있습니다. 우리는 멋지게 보이는 아이디어에 많은 시간과 창의적인 에너지를 투자합니다. 우리 고객들도 우리만큼 그것을 좋아할 것입니다. 그러나 실제로 구축을 시작할 때만 결과를 완전히 이해하기 시작합니다.

디자인 모형은 웹 사이트 프로젝트의 나침반 역할을 합니다. 특정 요소에 필요한 것이 무엇인지 미리 생각하지 못한다면 좋지 않은 상황에 놓이게 될 수 있습니다. 최종 결과는 다른 장치와 브라우저에서 작동하기 위해 몇 가지 심각한 타협을 해야 하는 사이트입니다. 이는 접근성, 성능 및 모범 사례 준수에 부정적인 영향을 미칠 수 있습니다.

고맙게도 일부 계획은 지저분한 빌드 프로세스를 피하는 데 도움이 됩니다. 고객과 아이디어를 공유 하기 전에 고려해야 할 몇 가지 핵심 항목을 살펴보겠습니다.

요소가 다양한 화면에 적응하는 방법

웹 디자인에 대한 "모바일 우선" 접근 방식에 대해 많은 이야기가 나오는 데는 이유가 있습니다. 본질적으로 이것은 우리가 웹사이트의 기본적인 것부터 시작할 수 있게 해줍니다. 거기에서 뷰포트가 커지면 추가하고 향상시킬 수 있습니다.

그럼에도 불구하고 우리 각자는 프로토타입 제작에 대한 선호도가 다릅니다. 여전히 데스크톱 기반 접근 방식을 사용하는 사람들에게는 이러한 멋진 디자인 요소가 모두 휴대폰에서 어떻게 작동할지 생각하는 것이 중요합니다.

CSS Grid 또는 Flexbox를 구현할 계획이라면 사용 가능한 화면 공간을 최대한 활용하는 데 많은 도움이 될 것입니다. 그러나 다른 요소가 작동하려면 더 많은 노력이 필요할 수 있습니다.

예를 들어 큰 슬라이더는 작은 화면에서 사용하기가 매우 어려울 수 있습니다. 복잡한 이미지는 그다지 효과적이지 않을 수 있으며 텍스트는 경계를 넘을 수 있습니다. 성능도 지연될 수 있습니다.

이 경우 슬라이더가 모바일에 표시될 가치가 있는지 결정해야 할 수 있습니다. 또는 모든 상황에서 작업에 더 잘 적응하도록 리팩토링할 수 있습니다.

접근성 영향

디자인은 적절한 글꼴과 색상을 선택하는 것으로 시작됩니다. 둘 다 브랜딩 및 접근성과 깊은 관련이 있습니다.

글꼴은 선명하고 가독성을 높일 수 있는 크기여야 합니다. 멋진 스크립트와 장식 유형은 아름답게 보일 수 있지만 읽을 수 있을 만큼 커야 하고 제목에서 사용하는 것으로 제한되어야 합니다. 이러한 요구 사항을 합리적으로 충족할 수 없는 경우 프로젝트에서 해당 요구 사항을 완전히 삭제하는 것이 가장 좋습니다.

또한 색상 대비도 주요 관심사입니다. 배경색과 전경색은 접근 가능한 것으로 간주되기 위해 허용 가능한 명암비를 달성해야 합니다. 게다가 좋은 습관일 뿐입니다.

팔레트에 대해 확신이 없으면 온라인 도구를 사용하여 적합성을 결정하십시오. 때로는 약간의 조정만으로도 WCAG AA 표준을 통과하는 데 필요한 모든 것입니다.

이 두 가지 항목 외에도 아이콘과 같은 요소를 표시하는 방법에 대한 계획을 세우는 것도 좋습니다. 그들은 직관적입니까? 텍스트가 함께 제공됩니까?

이전 버전과의 호환성

모든 웹사이트가 Internet Explorer 9와 완전히 호환되어야 하는 것은 아닙니다. 그리고 레거시 브라우저가 최신 CSS 또는 JavaScript를 사용하는 데 방해가 되어서는 안 됩니다. 그러나 이전 버전과의 호환성에 대해 몇 가지 생각을 해야 합니다.

특히 우려되는 것은 웹사이트를 이전 소프트웨어에서 완전히 사용할 수 없게 만드는 디자인 요소입니다. 특정 브라우저가 사이트 방문자의 작은 비율을 차지하더라도 여전히 테이블에 잠재적인 전환이 남아 있습니다.

디자인 결정이 이러한 사용자에게 어떤 영향을 미칠지 고려해 볼 가치가 있습니다. 주어진 기술에 대해 사용 가능한 폴백은 기능을 적절하고 사용 가능하게 유지하는 데 충분할 수 있습니다. 훨씬 더 나은 것은 구현이 상당히 간단할 수 있다는 것입니다.

디자이너는 요소가 모든 브라우저에서 정확히 동일하게 보이고 기능하도록 보장해야 했습니다. 그것은 요즘 너무 많은 질문일 수 있습니다. 사용자가 좀 더 오래된 소프트웨어에서 콘텐츠를 탐색하고 사용할 수만 있다면 그것으로 충분할 것입니다.

아직 일어나지 않은 시나리오

가장 작은 웹사이트라도 시간이 지남에 따라 발전해야 합니다. 새로운 유형의 콘텐츠가 추가되면 디자인에서 이를 고려해야 합니다. 준비되지 않은 경우 이러한 항목을 구현하면 이미 있는 것과 충돌할 수 있습니다.

예를 들어 일련의 비디오를 추가하는 것을 생각해 보십시오. 해당 콘텐츠를 추가하는 과정은 충분히 쉬울 수 있지만 이미 설정한 모양에 어떻게 맞을까요? 기본 브라우저 UI를 사용하거나 브랜딩과 일치하는 무언가를 만드시겠습니까?

항상 미래를 예측할 수는 없지만 모든 종류의 가능성에 대해 계획할 수 있습니다. 이것은 디자인 시스템을 통해 달성할 수 있는 것의 일부입니다. 처음부터 몇 가지 기본 지침을 설정하면 향후 추가 사항을 보다 쉽게 ​​처리할 수 있습니다.

현실은 오늘날 우리가 디자인하는 것이 미래에 바뀔 가능성이 있다는 것입니다. 따라서 만일의 사태에 대비해야 합니다.

처음부터 제대로 구축하기

첫 번째 목업을 만드는 것은 단순히 사물을 보기 좋게 만드는 것 이상의 의미가 있습니다. 그것은 심지어 고객에게 감동을 주는 것 이상입니다. 사실, 그것은 우리가 프로젝트를 전체적으로 보도록 강요하는 연습입니다.

미학은 눈을 즐겁게 해야 합니다. 그러나 디자인은 접근 가능해야 하고 다양한 화면에 적응할 수 있어야 합니다. 또한 상황이 발전함에 따라 다양한 유형의 콘텐츠를 수용해야 할 수도 있습니다.

그것이 압도적으로 들린다면 – 심호흡을 하십시오. 여기에서 귀하의 경험과 전문 지식이 도움이 될 수 있습니다. 올바른 도구도 사용할 수 있습니다.

과거 프로젝트에서 효과가 있었던 것(및 그렇지 않은 것)에 대해 생각해 보십시오. 탄력적인 기능을 구현하는 방법을 찾으십시오. 그렇게 하면 성공적인 프로젝트를 진행하게 될 것입니다!