디자이너와 개발자가 함께 하는 반응형 웹 프로젝트

성공한 웹 프로젝트를 보면 좋은 디자인이든 개발이든 홀로 만들어낸 것이 아닙니다. 디자이너와 개발자 사이에 의사소통과 협업이 있었기에 가능했던 것이죠. 

숙련된 디자이너와 개발자들이 잘못된 의사소통과 그로 인해 서로 관계가 악화되어 프로젝트를 망치는 일을 자주 볼 수 있습니다. 이와 반대로 신입 디자이너-개발자팀이 엄청난 결과물을 가져오는 것도 종종 목격할 수 있습니다. 이 신입 팀을 보자면 이들은 조기에 근본적인 위험을 해결하고, 프로젝트를 정해진 시간에 마쳤으며, 빨리 반복했습니다. 

이러한 조직화는 단지 프로젝트에만 좋은 것이 아닙니다. 의사소통적이고 협업적인 팀이 더 행복한 팀이 될 수 있습니다. 만약 일이 계획데로 되지 않는다면 거기엔 몇 가지 오해와 적은 긴장감이 있어서일 겁니다. 

디자인-개발간 협업은 반응형 웹 디자인 프로젝트에서 아주 중요한 요인이 될 것입니다. 디자인-개발팀은 이제 광대한 종류의 기기들을 고려해야 합니다. 고정되고 “픽셀적으로 완벽한“ 디자인은 이제 흐르는 듯 비율과 비례가 자유롭게 변해야 합니다. 그리고 이미지 파일은 다양한 기기의 사이즈와 해상도에 맞게 최적화되어야 합니다.

결국 반응형 디자인은 가변적이고 적용가능성이 높아야 합니다. 하지만 그것으로 인하여 몇 가지 문제가 생기는데요, 그 문제점을 짚어보며 해결에 도움이 될 만한 것을 생각해보고자 합니다.

1. "최소/최대" 뷰포트 사이즈에 우선 집중하기

시작부터 반응형으로 만들어지는 디자인이 있긴 하지만, 아직도 대다수의 디자인이 정적인 것에서부터 시작합니다. 반응형으로 시작하는거라면 우선 뷰포트 가로와 높이를 정하고, 이에 맞춰 스케치하고 마크업을 진행해야 합니다. 

하지만 그 순간에 몇 가지 물음이 생깁니다: 얼마만큼의 크기로 잡을 것인가? 테크니컬한 제약 때문에 어떤 디바이스를 우선적으로 생각해야 하는가?

추천해드릴 수 있는 것은 바로 자신이 타겟으로 삼은 사용자 공통의 “최소와 최대” 디바이스 사이즈로 시작하는 겁니다.

 - 320px x 568px (아이폰5 수직모드)

 - 1600px X 1000px (와이드 모니터)

반응형 웹 디자인은 공통의 최소와 최대 디바이스 사이즈로 시작하세요. 

작은 뷰포트 사이즈는 그 크기의 제약 때문에 중요한 요소들을 어떻게 하면 최대한 선택하고 사용할 수 있을지가 문제라면, 큰 뷰포트는 완전 반대의 고민거리를 안겨줍니다: 얼마만큼의 컨텐츠가 많은건가?  문자열이 너무 길어지고 가독성이 떨어지는건 아닌가? 여분의 여백을 추가로 줘야 하는가? 만약 그렇다면 얼마만큼의 여백이 요소들간에 연결성을 유지하는 정도인가? 마지막으로는 인풋 방법으로서 작은 뷰포트는 주로 터치 기반에, 큰 뷰포트는 마우스와 키보드 기반이 될 것입니다. 

아마도 가장 중요한 점은 양극단에 있는 뷰포트를 동시에 고민하고 처리하는 겁니다. 하나의 뷰포트를 완벽하게 처리하고나서 다른 하나를 처리하는 방식은 디자이너와 개발자들간에 충돌을 야기하는 시발점이 될 수 있습니다. 

2. 구획점들 사이에서 컨텐츠 레이아웃을 논하기

반응형 웹 디자인은 본질적으로 유동적인 것이기에, 정적인 와이어프레임에 주의를 특히 들여야 합니다. 이 말은 즉 수많은 웹 사용자들은 정적인 것과 동적인 것 사이에 “끼인“ 디자인을 경험할 것이라는 겁니다. 그래서 모든 디자인은 각각의 뷰포트에 맞게 설계된 디자인 사이에서 변화하는 레이아웃의 조정을 고려해야 합니다. 예를 들어, 사이즈를 줄일 때, 텍스트 콘텐츠와 이미지는 1단으로 줄어드는 식이 되는거죠. 

어떠한 조정이 될 수 있을지 또는 되야만 하는지에 대해서는 개발팀과 같이 추측하는 것은 피하세요. 개발자들이 너무 깊이 몰두하는 것을 막기 위해 사전에 미리 만나는 것이 좋습니다. 특히 복잡한 레이아웃이 변해야 할 때에는, 다른 와이어프레임을 만들거나 스케치를 해서 설명하는 것이 좋은 방법일 겁니다. 특이도가 덜 중요한 경우에는, 간단한 논의를 가지거나 전환을 설명할 수 있는 이메일로 충분합니다.

3. 이미지 파일 전략 미리 가지기

반응형 이미지에는 여러 파일을 필요로 합니다. 위의 이미지는 각기 다른 뷰포트 사이즈와 해상도에 따라 6가지의 각기 다른 크기의 이미지를 불러 사용하고 있습니다.

이미지 포맷 및 크기는 종종 디자이너와 개발자 사이에서 걸림돌이 되기도 합니다. 작은 요소와 아이콘에 PNG, JPG, 아이콘 폰트, SVG를 사용할 수 있습니다만, 어느 것을 사용해야한다는 것은 없습니다. 모든게 다 콘텐츠와 자원에 따라 달라지죠. 그러나 하나의 형식에 동의하고 그것을 고수하는 것이 중요합니다. 또한 웹 프로젝트가 진행됨에 따라 일반적인 이미지 사이즈로 패턴화해서 발전시킬 수도 있습니다.

현재 반응형 디자인은 아직 시작 단계 입니다. 디자이너는 최소한 2개의 래스터 포맷(JPG)이 필요할 겁니다. 바로  일반 디스플레이용과 고해상도용이죠. 고급 반응형 이미지 기술은 서로 다른 뷰포트 사이즈를 위한 더 많은 파일을 요구합니다.

프로젝트의 마지막 단계에서 반응형 이미지 포맷을 결정하지 마세요. 최소한 디스플레이 밀도에 대한 전략을 가지고 있어야 합니다. srcset이나 Picturefill과 같은 '폴리필polyfill'을 최대한 활용해서 좋은 크로스 브라우저를 지원해주어야 합니다. 만약 너무 부담이 된다면, 작게 시작하세요. 그냥 srcset 속성을 가지고 이미지를 변경하는 겁니다. 프로세스가 어떻게 가는지 보면서 점점 키워보세요. 

4. 작게 생각하기 - 모듈형 디자인

이것은 '브래드 프로스트Brad Frost'의 ’작은 웹 디자인Atomic Web Design’과 '조나선 스눅Jonathan Snook'의 ’SMACSS’ 에서 영향을 받은 반응형 웹 디자인 워크플로우 입니다. 이 둘은 작고, 재사용 가능한 구성요소에 의존하는 프레임워크로, 강력한 웹 아키텍처의 기반이 되고 있습니다. 

그래서 개발자들과 원활한 진행을 위해, 작고 재사용이 가능한 구성요소에 우선적으로 집중합니다. 왜냐하면 서로 다른 디바이스를 넘나들면서도 동일한 UX와 비주얼을 제공하기 때문입니다. 이러한 일관성은 개발팀에게 부담을 주지도 않습니다. 또한 작은 구성요소들은 페이지 사이에서 더 재사용되는 경향이 있습니다. 이렇게 효과적으로 디자인을 한다면, 나중에 그것을 다시 적용하는 데에도 훨씬 쉬울 것입니다.

작은 구성요소들은 일반적으로 다른 디바이스를 넘나들면서도 동일한 UX와 비주얼을 제공합니다. 이러한 일관성은 개발팀에게 부담을 주지도 않습니다.

만약 지금 제목, 대형 그래픽, 양식이 있는 가입 페이지를 디자인 한다고 상상해 봅시다. 디바이스에 따라 이들 요소들은 이동하거나 사이즈가 변경될 겁니다. 초기에 개발팀과 가입양식의 세부적인 것에 초점을 맞춘다면 그 페이지는 과연 어땠을까요? 어떤 종류의 검증이 필요할까요? 터치 인풋과 마우스/키보드 사이에서 폼을 어떻게 바꿔야 할까요?

5. 비주얼과 UX 피드백을 위해 개발자를 참여시키기

일부 디자이너는 제품 회의나 사용성 세션 및 피드백을 얻을 수 있는 기회로부터 개발자를 떨어트려 놓습니다. 그러나 그건 실수를 저지르는 겁니다. 숙련된 개발자라면 적용할 수 있는 지식이 무궁무진하게 많음을 기억하세요. 잠시동안이라도 작업을 함께 한 경우라면 그들은 제품에 대한 지식을 가지고 있을 수 있습니다. 

프런트-엔드 개발자와 디자이너의 기술은 자주 중복됩니다. 점점 더 많은 디자이너들이 자신의 코드를 작성합니다. 개발자는 신속한 프로토타입, 와이어프레임, 미적인 디자인에 파고들고 있습니다. 별도의 부여된 역할과 책임에도 가치가 있겠지만, 각각의 작은 단계에 개발자를 포함시킨다면 최종적으로 제품을 더 좋게 개선할 수 있습니다. 사용성 테스트나 회의, 디자인 브레인스토밍에 개발자들을 초대해보세요. 

협업 문제

이러한 모든 테크닉은 계획을 필요로 하고 비용이 듭니다. 제품을 런칭하거나 마감일을 맞추는데에만 너무 몰입한다면 힘들수도 있습니다. 그러나 좋은 디자이너-개발자의 관계는 어떠한 웹 프로젝트라도 좋은 반응을 가져올 수 있습니다. 특히 반응형이라면 말이죠. 작은 투자로 시작한 것이 나중에 엄청난 보상으로 팀에 돌아올 수 있다는 것을 잊지마세요.

원문: 5 ways to bridge the designer-developer gap on responsive projects

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.