웹디자이너가 개발자에게 꼭 물어봐야 할 질문 4가지

 

 

 

 

 

 

 

이번 포스트에서는 웹 디자인 프로젝트를 시작하기 전에 개발자들에게 물어봐야 할 4가지 질문에 대해 다루려고 합니다.

 

 

 

 

 

질문 1. 결과물을 어떤 형태로 드리면 될까요?

출처 입력

저는 개발자가 디자인 결과물을 주고받는 방식에 대해서 얼마나 익숙한지 항상 물어보는 편입니다. 어떤 레이아웃 그래픽 툴을 사용할지 잘 결정할 수 있도록 하기 때문이죠. 많은 디자이너들이 최종 결과물을 어떤 포맷으로 만들어야 할지 자의적으로 가정하는 것을 많이 보았습니다. 하지만 이는 디자인을 마치고 개발을 시작하려고 할 때, 다시 돌아가, 파일을 다시 저장하거나 다른 형식으로 다시 디자인하여 수정하는 상황을 겪을 수 있습니다.

 

 

다음은 디자인 설계에 앞서 개발팀과 함께 논의해야 할 질문과 상황들입니다.

 

디자인 리소스는 어떤 식으로 준비하면 좋을까요?

 

● 정리된 폴더에 디자인 리소스를 다 조각내어 저장하는 것을 원하는가?

● 개발자가 스스로 리소스를 추출할 수 있는, 디자인 리소스가 뭉쳐진 소스 파일을 원하는가?

● 이 경우 PSD, AI, EPS, Sketch, PDF 등 원하는 통합 파일의 유형은 무엇인가?

● 디자이너와 동일한 버전의 소프트웨어가 있는가? (즉, 열 수 있는가?)

● 알아보기 쉽게 통합 파일의 그룹핑과 레이어 네이밍이 정돈되어 있는가?

● 드림위버 또는 위지윅 에디터에서 출력된 HTML을 원하는가?

 

그래픽 인터페이스 프로그램에서 생성된 코드를 피하세요

 

그래픽 인터페이스 프로그램에서 생성된 코드가 개발자들에게 작업하기에 최적인지 물어보십시오. 아마도 10명 중 9명은 이 방법을 선호하지 않을 것입니다. GUI로 만들어진 코드는 일반적으로 지저분하고, 정리되지 않고, 사용하기 힘든 성질을 가지고 있습니다. 이 방법은 디자이너와 개발자 모두의 워크플로우를 느리게 하므로, 그래픽 인터페이스 프로그램에서 만들어진 코드는 피하시길 바랍니다. 옵션으로 생각할 경우에는 가장 먼저 개발자와 충분한 논의를 하고 진행하는 것이 좋습니다.

 

디자인 리소스들을 별도의 문서로 정리할까요?

 

목업에서 분명하지 않은 디자인 요소를 어떻게 문서화할 계획입니까? 컬러 코드, 높이/너비의 값, 폰트, 폰트 사이즈, 알파 값, 마우스 오버 효과, 애니메이션 등등, 개발자가 추측하거나 자의적으로 결정을 내리지 못하도록 정의하고 기록하여야 합니다.

 

문서화 작업에 유용한 어플리케이션

● 옴니그라플(Omnigraffle) : 화살표 그리기, 기호 추가, 등 각종 심볼들을 쉽게 그릴 수 있어 디자인의 특징을 쉽게 설명할 수 있도록 합니다.

● 어보코드(Avocode) : Photoshop 또는 Sketch에서 색상, 이미지 리소스, 폰트, 텍스트, CSS, 위치값 등을 추출할 수 있게 해줍니다.

● 인스펙트(Inspect from InVision : 인스펙트는 위의 제품들의 기능들을 수행함과 동시에, InVision을 사용하는 경우에 아주 유용합니다.

 

 

 

질문 2. 웹사이트가 프론트엔드 프레임워크를 통해 제작될 예정인가요?

 

현재에는 디자인 및 개발 사이드에서 지루한 작업을 덜도록 도와주는 다양한 프레임워크들이 많이 있습니다. 어떤 것이 사용되고 있는지 미리 아는 것은 디자인을 문서화하는 데에 있어서 아주 중요합니다.

 

부트스트랩이나 960 Grid와 같은 인기 있는 프레임워크는 12열 시스템을 차용합니다. 왜 열이 12개냐고요? 12는 작은 숫자 중에서 가장 쉽게 나눌 수 있는 숫자입니다. 12를 통해서 12, 6, 4, 3, 2의 값을 가질 수 있으며, 하나의 균등한 간격의 열을 가질 수 있습니다. 이러한 점은 디자인 프로세스를 훨씬 쉽게 진행할 수 있게 도와줍니다.

 

이러한 프레임워크는 미리 설정된 치수가 있습니다. 프레임워크 차원의 값을 작업 전부터 파악하여야 합니다. (글로벌 패딩, 열의 폭, 열 간 간격 폭, 미디어쿼리 분할점 등등)

 

저의 경우 Sketch에서 설정한 여백이 Bootstrap에서 설정한 여백 값보다 5px 정도 더 컸기 때문에, 해당 디자인들을 중단했던 적이 있었습니다. 이런 상황은 누구에게도 즐거운 상황은 아닙니다. 결국은 디자인을 재구성하고 다시 코딩해야 하기 때문입니다. 어떤 프레임워크가 사용될 것인지, 해당 프레임워크를 스케치나 포토샵에서 어떤 식으로 적용해야 하는지, 미리 파악하시기 바랍니다.

 

그리드 외에도 많은 프레임워크에는 버튼, 폼, 툴팁과 같은 디자인 요소들이 내장되어 있습니다. 만약 이런 디자인 요소들을 커스텀 하고 싶다면, 개발자가 이 사실을 분명히 숙지하도록 하세요.

제가 특정 폼의 디자인을 별도로 진행할 때마다, 개발자들이 그냥 프레임워크에서 주어지는 기본값의 폼을 사용하는 경우가 많았기 때문입니다.

개발자들이 2px의 테두리 반경 차이를 쉽게 알아차릴 것이라고 생각하지 마세요. 개발자들은 디자인 전공자가 아니기 때문입니다.

 

 

아래는 가장 인기 있는 프레임워크들입니다.

● 부트스트랩(Bootstrap)

● 저브사의 파운데이션(Foundation by Zurb)

● 야후사의 퓨어(Pure by Yahoo)

● 스켈레톤(Skeleton)

● 시멘틱UI(Semantic UI)

● 그 외 더 많은 프레임워크들

 

디자인하기 전에, 개발자가 선호하는 프레임 워크를 파악하세요.

 

 

 

 

질문 3. 개발 환경을 구성하는 언어와 라이브러리는 무엇이고, 이로 인한 제약사항은 어떤 것인가요?

 

코딩하는 법을 모른다고 하더라도, 좋은 위젯이나 플러그인들을 인터넷에서 쉽게 찾을 수 있습니다. 코드 스니펫은 쉽게 사용할 수 있고, 이를 통해 사이트에 기능을 추가하는 일은 수십 년 전보다 훨씬 쉬워졌습니다. 다만 한 가지 주의할 점은 플러그인들은 모든 것에 다 쉽게 적용되지는 않습니다.

 

사이트용으로 미리 정의된 UL 플러그인들을 사용하는 것은 꽤 괜찮습니다. 하지만 그전에 어떤 언어가 웹 사이트 제작에 사용될 것인지 미리 파악하는 것이 매우 중요합니다.

 

대부분의 플러그인이나 위젯들은 작성자가 선택한 특정 코딩 언어로 작성됩니다. 그렇기 때문에 다른 언어나 개발 환경에서는 작동하지 않는 경우가 많습니다.

 

루비(Ruby)로 제작된 날씨 앱은 PHP로 제작된 사이트에서는 작동하지 않을 것입니다.

워드프레스 플러그인은 닷넷(.NET)으로 구성된 사이트에서 구동되지 않을 것입니다.

같은 자바스크립트 기반임에도 불구하고 앵귤러(Angular) 로딩 바는 백본(Backbone)JS로 구성된 사이트에서 구동되지 않을 것입니다.

 

개발 환경과 맞는 위젯을 찾았더라도, 일종의 예시로 보여주는 용도로만 개발팀에 공유하길 바랍니다. 개발팀에게 코드를 통째로 압축한 ZIP 파일을 전송하고 "이렇게 개발해 주세요"라고 요청하는 것은, 당신에게 100px의 이미지 썸네일을 이메일로 왕창 보내놓고 "근사한 슬라이드 쇼를 만들어주세요"라고 요청하는 것과 같습니다. 이러한 행동은 예의에 어긋나고, 겸손이 부족함을 나타냅니다.

 

 

 

질문 4. 어떤 브라우저를 지원해야 하나요?

 

알다시피, Internet Explorer는 개발자들에게 아주 큰 골칫거리입니다.

 

다행히도 과거에 온라인 제작자를 괴롭혔던 브라우저 격차가 빠르게 좁혀지고 있습니다. 마이크로소프트조차도 Internet Explorer를 포기하고 새로운 Edge를 출시하고 있습니다.

 

어느 정도까지의 이전 세대의 브라우저를 지원하는지는 디자인에 큰 영향을 줍니다.

 

다음은 브라우저에서 지원할 수 없는 CSS 속성에 대한 목록입니다.

 

● Border-radius: IE8

● text-shadow: IE8, 9, Firefox 2, 3

● box-shadow: IE8, Firefox 2, 3

● RGBA (color transparency): ie8

● Flexbox (more on this later): IE8, 9. Needs adjustments for older versions of Safari and Firefox

● Multiple backgrounds: IE8, Firefox 2-3.5

● SVG: IE8 (many others for specific things)

● CSS Animation: IE8, 9, Firefox 2-4, Safari 3.1 – 3.2

● CSS 2D transforms (rotation, scale): IE8, Firefox 2, 3

● Media Queries: IE8, Firefox 2, 3

 

* 'Can I Use' 여기에서 모든 브라우저들의 기능 가능 범위를 확인할 수 있습니다.

 

 

이전 세대 브라우저 중 IE8 또는 매우 오래된 버전인 파이어폭스나 사파리를 지원해야 한다면, 특정 시각 효과가 제거된 상태에서 요소가 어떻게 보일지 생각해 보세요. 둥근 모서리는 각지게 될 것이고, 애니메이션과 그림자는 사라지게 될 것입니다.

 

최신 기술을 사용하면서 디자인하지만 이전 세대 브라우저에서도 정상적으로 사용 가능하게 유지하는 것을 progressive enhancement이라고 합니다. 완전한 사이트의 완성을 위해서 생각해야 할 또 다른 요소입니다.

 

 

 

 

 

 

 

 

 

 

 

위에 소개한 4개의 질문들을 바탕으로, 개발자들과의 커뮤니케이션을 효과적으로 될 수 있도록 도움이 되기를 바랍니다. 어떤 제약이 있을지 미리 파악하면, 어떤 디자인 룰을 따를지 생각할 수 있게 해주고, 여러 설계와 개발 문제들에 대해서 대안들을 설정하고 완화할 수 있도록 도와줍니다.

 

 

 

 

 

 

 

 

 

 

 

* 본문 내용은 https://www.invisionapp.com/inside-design/design-questions-developers/를 각색한 자료입니다.

Questions to ask developers before you start designing | Inside Design Blog

<p>Form a clear path of communication with your developers at the outset of a design process.</p>

www.invisionapp.com