유연한 구성 요소 구축을 위한 개발자 결정

현실 세계에서 콘텐츠는 종종 디자인에 표시되는 깔끔하고 완벽하게 맞는 콘텐츠와 크게 다릅니다. 이에 더해 최신 웹에서 사용자는 우리가 구축한 사이트에 액세스하는 방법에 대해 점점 더 다양한 옵션을 갖게 됩니다.

이 기사에서 우리는 텍스트 및 미디어 구성 요소에 대해 겉보기에 단순한 디자인을 취하고 사용자와 콘텐츠 작성자 모두의 요구를 염두에 두고 이를 코드로 가장 잘 변환하는 방법을 결정하는 프로세스를 안내할 것입니다. 우리는 그것을 코딩 하는 방법 에 대해 탐구하지 않을 것입니다. 오히려 우리의 개발 결정을 결정할 요소들입니다. 우리는 모든 단계에서 (자신과 다른 이해 관계자 모두에게) 물어야 할 질문을 고려할 것입니다.

개발 사고방식 바꾸기

우리는 더 이상 "최적의" 콘텐츠나 검색 조건만을 위해 디자인하고 개발할 수 없습니다. 대신 웹의 고유한 유연성과 예측 불가능성을 수용하고 탄력적인 구성 요소를 구축해야 합니다. 정적 모형은 모든 시나리오를 충족할 수 없으므로 많은 설계 결정은 빌드 시 개발자에게 넘어갑니다. 좋든 싫든, 당신이 UI 개발자라면 당신 은 디자이너입니다. 심지어 스스로를 디자이너로 여기지 않더라도!

WordPress 전문 웹 에이전시 Atomic Smash 에서 우리는 우리가 제공하는 구성 요소에서 최대한의 유연성을 필요로 하는 클라이언트를 위해 웹 사이트를 구축하는 동시에 어떤 콘텐츠를 던지더라도 사이트가 여전히 멋지게 보이도록 합니다. 때때로 디자인을 해석한다는 것은 디자이너에게 아이디어를 더 자세히 설명하도록 요청하는 것을 의미합니다. 다른 경우에는 즉석에서 설계 결정을 내리거나 우리의 지식과 경험을 기반으로 권장 사항을 만드는 것을 의미합니다. 이 사례 연구에서 이러한 접근 방식이 적절할 수 있는 몇 가지 경우를 살펴보겠습니다.

디자인

우리는 제품 랜딩 페이지에서 흔히 볼 수 있는 텍스트 및 미디어 구성요소를 위한 단순한 디자인으로 시작합니다. 왼쪽에는 이미지 또는 비디오, 오른쪽에는 제목, 텍스트 단락 및 클릭 유도문안 링크가 포함된 열로 구성됩니다. 이 디자인은 새로운 기술을 배우고자 하는 사람들이 튜터를 찾을 수 있도록 도와주는 (가상의) 스타트업을 위한 것입니다.

참고: 코드로 바로 이동하여 이 구성 요소에 대해 제안한 가능한 모든 솔루션을 보려면 이 Codepen 데모에서 찾을 수 있습니다.

레이아웃 및 순서

디자이너는 이미지가 오른쪽에 있고 텍스트 열이 왼쪽에 있도록 다른 모든 구성 요소의 레이아웃을 뒤집어야 한다고 규정했습니다.

그러나 모바일 레이아웃에서 이미지는 모든 경우에 텍스트 콘텐츠 위에 쌓입니다. Grid 또는 flexbox를 사용하여 이 레이아웃을 빌드한다고 가정하면 flex-direction 또는 order 속성을 사용하여 두 번째 구성 요소마다 레이아웃을 재정렬할 수 있습니다.

 .text-and-media:nth-child(even) { flex-direction: row-reverse; }

시각적으로 내용을 재정렬하지만 DOM 순서는 변경하지 않는다는 점을 염두에 두어야 합니다. 즉, 화면 판독기를 사용하여 사이트를 탐색하는 부분 시력 사용자에게는 콘텐츠의 순서가 왼쪽에서 오른쪽에서 오른쪽에서 왼쪽으로 점프하여 논리적으로 나타나지 않을 수 있습니다.

개인적으로 1열의 내용이 이미지뿐인 경우 order 속성을 사용하는 것이 어느 정도 괜찮다는 생각이 듭니다. 그러나 예를 들어 두 개의 텍스트 열이 있는 경우 CSS로 재정렬하면 혼란스러운 경험을 할 수 있습니다. 이러한 경우에는 다른 옵션을 사용할 수 있습니다. 우리는:

1. 접근성 문제를 제기하고 모바일 레이아웃의 경우 시각적 순서를 데스크톱 순서와 일치하도록 변경하도록 권장합니다.
2. Javascript를 사용하여 DOM의 요소를 재정렬합니다.

또한 :nth-child 선택기를 통해 순서를 적용할지 아니면 클라이언트가 순서를 제어하도록 허용할지(예: 구성 요소에 클래스를 추가하여) 고려해야 합니다. 각 옵션의 적합성은 프로젝트에 따라 달라질 수 있습니다.

다양한 콘텐츠 길이 다루기

디자인에서 이미지 대비 텍스트 콘텐츠의 비율이 상당히 만족스럽습니다. 이를 통해 이미지가 이상적인 종횡비를 유지할 수 있습니다. 그러나 텍스트가 제시된 것보다 길거나 짧으면 어떻게 됩니까? 전자를 먼저 처리합시다.

더 긴 콘텐츠

선택한 CMS의 텍스트 필드에 문자 제한을 설정할 수 있지만(그렇게 하려는 경우) 구성 요소에서 최소한 약간 의 변형을 허용해야 합니다. 더 긴 단락을 추가하면 반대 미디어 열이 여러 가지 방식 중 하나로 작동할 수 있습니다.

1. 이미지 또는 비디오는 맨 위에 유지되고 공간은 아래에 추가됩니다(그림 1).
2. 이미지 또는 비디오가 중앙에 배치되어 상단 또는 하단에 공간이 추가됩니다(그림 2).
3. 왜곡을 방지하고 이미지가 사용 가능한 공간을 채우도록 하기 위해 object-fit: cover 를 사용하여 이미지 또는 비디오의 비율이 높이에 맞게 조정됩니다. 이는 이미지의 일부가 잘릴 수 있음을 의미합니다(그림 3).

우리는 옵션 3이 시각적으로 가장 만족스럽고 대부분의 경우 콘텐츠 작성자가 소량의 클리핑이 허용되는 적절한 이미지를 소싱할 수 있다고 결정했습니다. 그러나 중요한 부분이 잘릴 수 있는 위험이 더 많은 비디오 콘텐츠에 더 많은 도전을 제시했습니다. 비디오가 원래 종횡비를 유지하고 페이지 가장자리에 정렬하는 대신 최대 너비 내에 포함되도록 디자인의 다른 변형을 만드는 또 다른 옵션에 착수했습니다.

콘텐츠 작성자는 필요에 더 적합할 때 이 옵션을 선택할 수 있습니다.

또한 이 선택을 비디오 대신 이미지가 사용된 경우로 확장하기로 결정했습니다. 디자인에 부정적인 영향을 주지 않으면서 클라이언트에게 보다 다양한 레이아웃 옵션을 제공합니다. 더 넓은 페이지 컨텍스트에서 볼 때 이러한 블록 중 여러 개를 페이지에서 사용할 때 더 흥미로운 페이지를 허용하는 개선으로 간주될 수도 있습니다.

더 짧은 콘텐츠

적은 양의 콘텐츠를 처리하는 것이 조금 더 간단하지만 여전히 몇 가지 문제가 있습니다. 텍스트 내용이 더 짧을 때 이미지는 어떻게 작동해야 합니까? 구성 요소의 전체 높이가 텍스트 내용에 의해 결정되도록 더 얕아져야 합니까(그림 4)? 아니면 이미지가 레터박스가 되지 않도록 최소 종횡비를 설정해야 합니까, 아니면 이미지가 자연스럽고 고유한 높이를 차지하도록 해야 합니까? 이 경우 텍스트를 중앙에 정렬할지 상단에 정렬할지 여부도 고려해야 합니다(그림 5 및 5a).

제목 길이

다른 길이의 제목도 테스트해야 한다는 사실을 잊지 마십시오. 디자인에서 제목은 짧고 날카로우며 두 번째 줄로 넘어가는 경우가 거의 없습니다. 하지만 제목이 여러 줄이거나 내용이 긴 단어를 많이 사용하여 텍스트 줄 바꿈이 다른 경우에는 어떻게 될까요? 이것은 특히 단어가 영어보다 훨씬 긴 경향이 있는 독일어와 같은 언어에서 문제가 될 수 있습니다. 이 레이아웃에서 사용할 때 디자인의 제목 글꼴 크기가 적절한 줄 길이를 허용합니까? 긴 단어는 줄 바꿈할 때 하이픈을 넣어야 합니까? Ahmad Shadeed의 이 기사는 콘텐츠 길이 문제를 다루고 CSS에서 이를 처리하는 방법에 대한 몇 가지 편리한 팁을 포함했습니다.

콘텐츠 작성자가 자신에게 적합한 경우 제목을 모두 생략할 수 있습니까? 그것은 우리를 다음 고려 사항으로 이끕니다.

내용 생략

이 구성 요소를 가능한 한 유연하게 구축한다는 것은 콘텐츠 작성자가 특정 필드를 생략하고 디자인 모양과 기능이 제대로 유지되도록 할 수 있음을 의미합니다. 클라이언트가 이 구성 요소를 야생에서 사용할 때 본문, 링크 또는 제목을 생략할 수도 있습니다. 구성 요소가 스트레스를 받아 파손되지 않을 것이라고 확신할 수 있도록 가능한 모든 콘텐츠 조합으로 테스트하는 데 주의를 기울여야 합니다. 필드 콘텐츠가 없을 때 빈 HTML 태그를 렌더링하지 않도록 하는 것이 좋습니다. 이것은 예상치 못한 레이아웃 버그를 피하는 데 도움이 됩니다.

CMS에서 "필수" 필드를 사용하여 콘텐츠 작성자를 제한 할 수 있지만 클라이언트가 이미지를 생략 하거나 반대로 텍스트 콘텐츠가 없는 시나리오를 고려할 수도 있습니다. 이러한 옵션을 제공하는 것이 도움이 될 수 있습니다. 다음은 이러한 경우에 구성 요소를 렌더링하도록 선택하는 방법의 예입니다.

텍스트를 조금 더 들여쓰기하고 본문 텍스트의 너비를 늘리면 이미지가 없을 때도 균형을 유지할 수 있습니다.

다중 링크

콘텐츠를 생략하는 것은 하나의 시나리오입니다. 그러나 Atomic Smash에서 우리는 클라이언트가 구성 요소에 하나 이상의 링크를 추가하는 옵션을 원하는 경우가 더 많다는 것을 발견했습니다. 그것은 우리에게 또 다른 선택을 제시합니다. 여러 링크를 배치하는 방법은 무엇입니까? 나란히 배치합니까(그림 8), 수직으로 쌓습니까(그림 8a)?

엄청나게 다른 길이의 링크 제목을 어떻게 처리합니까? 좋은 트릭은 두 링크의 너비를 가장 긴 링크의 최대 너비로 설정하는 것입니다(그림 9). (이 기사에서는 그 내용을 다룹니다.) 수직으로 쌓인 버튼에는 잘 작동하지만 수평으로 배치하면 더 많은 선택이 가능합니다(그림 9a).

구별하기 위해 보조 링크 스타일이 필요합니까? 이것들은 모두 고려해야 할 질문입니다.

또한 링크의 클릭 가능한 영역이 전체 구성 요소를 포함해야 하는지(단일 링크의 경우) 고려해야 할 수도 있습니다. 그러면 사용자가 링크를 클릭하여 링크를 활성화할 수 있습니다. 그 선택은 아마도 더 넓은 맥락에 따라 달라질 수 있습니다. 카드 기반 UI에서는 확실히 일반적입니다.

동영상

구성 요소가 정적 이미지가 아닌 비디오에 사용되는 경우 디자인에 일부 주요 정보가 누락되었음을 알 수 있습니다. 비디오 재생은 어떻게 제어됩니까? 호버에? 스크롤시 자동재생되나요? 사용자가 볼 수 있는 컨트롤이 있어야 합니까?

비디오가 호버에서 재생되는 경우 호버 기능이 없는 장치 사용자가 비디오 콘텐츠에 액세스하는 방법을 고려해야 합니다. 또는 동영상이 자동 재생되는 경우 움직임 감소를 선호하는 사용자, 전정 장애로 고통받을 수 있는(또는 단순히 애니메이션이 거슬리는 것을 피하려는 경우) 이를 방지하는 것을 고려해야 합니다. 또한 모든 사용자가 원할 때 비디오를 중지할 수 있는 방법을 제공해야 합니다.

컨텍스트에 적용하기

웹 디자인과 관련하여 구성 요소에 매우 밀접하게 초점을 맞추는 한 가지 문제는 때때로 우리가 구축한 구성 요소가 전체 웹 페이지의 컨텍스트에서 어떻게 나타날지 고려하는 것을 잊는 것입니다. 동일한 유형의 구성 요소 사이와 다른 구성 요소가 산재되어 있는 페이지 레이아웃 모두에서 간격을 고려해야 합니다.

이러한 텍스트 및 미디어 구성 요소는 드물게 사용하도록 설계되어 시선을 사로잡는 색상의 스플래시와 선형 레이아웃에서 벗어나도록 합니다. 그러나 WordPress를 사용하면 콘텐츠 작성자는 이러한 구성 요소로만 구성된 전체 페이지를 쉽게 구축할 수 있습니다. 그것은 오히려 둔하게 보일 수 있으며 우리가 기대했던 효과가 전혀 아닙니다!

빌드 과정에서 배경색을 생략하는 옵션을 추가하기로 결정했습니다. 이를 통해 페이지를 분할하고 더 흥미롭게 만들 수 있습니다.

:nth-child 를 사용하여 패턴을 적용하거나 CMS에 필드를 추가하여 클라이언트에게 보다 창의적인 제어를 제공할 수 있습니다.

이것은 원래 디자인의 일부는 아니었지만 디자이너와 개발자 간의 열린 커뮤니케이션 라인이 보다 유연하고 강력한 디자인 측면에서 더 나은 결과를 만드는 데 도움이 될 수 있음을 보여줍니다.

WYSIWYG 텍스트 스타일

콘텐츠를 고려할 때 텍스트의 길이뿐만 아니라 본문 텍스트 필드에 허용될 수 있는 실제 HTML 요소도 고려해야 합니다. 콘텐츠 작성자는 본문 사본에 여러 단락, 앵커 링크, 목록 등을 추가할 수 있습니다. Atomic Smash에서는 WYSIWYG(What You See Is What You Get) 또는 이러한 영역에 대해 다양한 요소를 허용할 수 있는 서식 있는 텍스트 필드를 제공하고자 합니다. 사용된 모든 배경색에서 충분한 색상 대비 테스트를 포함하여 다양한 유형의 콘텐츠와 스타일을 적절하게 테스트하는 것이 중요합니다.

마무리

우리는 이 겉보기에 단순해 보이는 구성 요소를 구축하는 것과 관련된 다양한 결정에 대해 언급했습니다. 여기에서 다루지 않은 다른 몇 가지를 생각할 수도 있습니다! 디자인의 모든 측면과 컨텍스트에서 사용할 수 있는 방법을 고려하여 훨씬 더 다재다능한 것으로 끝냈으며, 결과적으로 더 행복한 고객이 되길 바랍니다!

때로는 디자인에서 생략할수록 더 많은 시간과 개발자의 관심이 필요합니다. 구성 요소를 구축할 때 유용할 수 있는 테스트 및 질문에 대한 체크리스트를 아래에 작성했습니다. 다른 구성 요소에도 적용할 수 있습니다.

겉보기 단순함을 지나쳐 구성 요소를 구성 요소로 분해하고, 주요 질문을 하고(개발이 시작되기 전에도), 미래의 사용을 고려할 수 있는 능력은 웹 사이트를 구축할 때 모든 개발자에게 잘 도움이 될 모든 기술입니다. 필요할 때 훨씬 더 정확한 견적을 제공하는 데 도움이 됩니다. 좋은 팀 커뮤니케이션과 강력한 협업 프로세스는 탄력적인 사이트를 구축하는 데 매우 중요하지만 최종 결과는 이러한 문화를 육성하는 데 투자할 가치가 있습니다. 설계 및 구축 프로세스에 유연성을 적용해 보겠습니다.

체크리스트

테스트할 사항:

1. 레이아웃의 접근성(모바일 및 데스크톱).
2. 서로 다른 고유 종횡비의 이미지가 적절하게 잘렸습니까?
3. 더 길고 더 짧은 본문 텍스트(여러 단락 포함).
4. 더 길고 더 짧은 제목(다양한 단어 길이 포함).
5. 제목, 본문, 링크 및 이미지를 (다양한) 생략합니다.
6. 여러 링크(다양한 길이의 링크 텍스트 포함).
7. 비디오 콘텐츠의 접근성.
8. WYSIWYG 텍스트 콘텐츠(본문 텍스트에 링크, 목록 등 포함).
9. 컨텍스트 내 테스트 - 여러 구성 요소(다양한 콘텐츠 옵션 포함)와 페이지 레이아웃에 혼합된 기타 구성 요소를 포함합니다.