인프런 커뮤니티 질문&답변

안녕하세요. 질문 감사합니다.

질문이 여러개인 것 같아 각각 나누어서 답변드릴게요.

질문1: 그렇다면 한 회사의 앱 또는 웹을 출시한다고 했을 때 실무에서 디자이너는 현재 존재하는 모든 제품들의 화면의 픽셀에 맞는 프레임들을 따로 전부 각각 디자인을 해야하는건가요? 아니면 그리드 상에 디자인을 하면 자동으로 맞추어 주는건가요?

--> 답변: 일단 현존하는 모든 제품 디바이스를 위해 화면들을 전부 다 디자인하는 것은 불가능하다고 볼 수 있습니다. 디바이스가 수백수천개가 있고 그런만큼 화면의 사이즈도 아주 다양합니다. 그래서 이를 제한된 디자이너가 모두 디자인한다는 것은 불가능에 가깝다고 볼 수 있습니다. 예를 들어서 반응형 웹사이트가 있다면, 해당 웹사이트를 수천개의 다른 디바이스와 사이즈를 가진 사용자가 접속할 수 있습니다. 모든 것을 각각 따로 디자인하는 형태로 업무를 하는 것은 불가능하다는 것이에요.

그렇기 때문에 그리드를 만들어주어야 합니다. 그리드를 만든다는 것은 세로 줄(Column)의 개수를 어떻게 할 지 룰을 정하고 오브젝트를 그 줄에 따라 어떻게 배치할지, 몇개의 줄을 차지하도록 할지 정해줌으로서 다양한 디바이스에 대해서 오브젝트에 대해 정확한 Pixel 사이즈를 지정하지 않고도 유연하게 대응할 수 있도록 하는 것입니다.

저같은 경우에는 웹사이트를 디자인한다고 할 때 대체로 3가지 그리드를 정의합니다. Desktop, Tablet, Mobile 이렇게 세가지입니다. 그래서 수천개의 화면을 디자인하는 것이 아닌 3가지의 화면을 디자인하면 됩니다. 그리고 무엇보다 중요한 것은 그리드를 단순히 디자이너가 자신만 사용하기 위해 만드는 것이 아니라는 점입니다. 그리드는 무엇보다도 개발자가 개발을 하는데 필요합니다. 그래서 현재 실제 현업에서 그리드를 만들어야 하는 상황이 생긴다면 개발자와 깊이 상의하시면서 그리드를 활용하시기 바랍니다.

그리드가 자동으로 맞추어준다는 게 어떤 질문인지 잘 이해를 못해서 이 부분은 어떤 의미로 질문하신 건지 조금더 상세하게 이야기해주시면 감사하겠습니다.

질문 2: 그리고 핀터레스트 웹사이트 예시 보여주시면서 웹사이트의 크기를 줄여나가면 컨텐츠들이 알아서 맞게 변하는것을 보고 이게 반응형 디자인이고 이를 하려면 그리드로 디자인을해야한다고 이해를 했습니다. 이 또한 그 화면마다 디자이너가 그화면 프레임에 맞게 각각 디자인을 한건가요? 아니면 그리드상에 디자인을 하면 자동으로 맞추어 주는건가요?

--> 답변: 질문 1에서 답변을 드린 부분입니다. 웹사이트를 만드는데 있어 수백 수천개의 디바이스 화면에 모두 대응해서 각각 디자인하는 것은 다시 말씀드리지만 불가능에 가깝습니다. 그래서 각각의 오브젝트가 화면 상에서 그리드를 통해 세로줄을 어떻게 차지하는지 그 룰을 정해주어서 여러 디바이스에 유연하게 적용하도록 하는 것이 주된 목적입니다.

질문 3: 그리드상에 디자인을 하면 자동으로 맞추어 주는것이 정답이라 한다면, 모바일 디자인이라 가정했을때 아이폰8 프레임 / 아이폰 11 프레임 등등 어떤 프레임으로 디자인하는 모든제품에 대응이 되는것인지 궁금하며 또 이것이 대응이된다면 각 제품마다 프레임이 나누어놓는 이유가 무엇인가요?

 --> 답변: 앞서서 말씀드렸지만 자동으로 맞추어 준다는 것이 어떤 의미인지 잘 이해가 되지 않습니다.

그리드는 대체로 3-5개를 만드는 것에서 크게 벗어나지 않습니다. 위에서 말씀드렸지만 저같은 경우에는 웹사이트 디자인시 Desktop, tablet, mobile 이렇게 세개의 그리드를 만든다고 했구요. 그래서 저같은 경우에는 모바일 같은 경우에는 하나를 정해서 그리드를 만들어준후, 아이폰 8이든 아이폰 11이든 모두 적용 가능하게끔 하고 있습니다. 어떤 프레임을 기준으로 삼을지에 대해서는 본인이 정하시면 됩니다. 저같은 경우에는 제가 만드는 웹사이트에서 사용자가 가장 많이 사용디바이스의 통계를 확인해본 후 (구글 애널리틱스에서 내 회사 제품의 이런 통계자료를 뽑을 수 있습니다.) 정하기도 합니다.

질문 4: 아이폰8 사용자를 대상으로 아이폰11 프레임으로 디자인 했을때 대응이 되는지 / 또 대응이 된다면 차이는 없으며 왜 프레임을 제품마다 나누는지 궁금합니다.

--> 답변: 그리드를 사용하는 이유는 대응이 되기 때문에 사용하는 것입니다. 프레임을 제품마다 나누는지 궁금하다고 하셨는데 이 부분은 제가 질문의 의도/의미를 잘 이해를 못해서 혹시 더 자세히 말씀해주시면 감사하겠습니다. 제가 이해하기로는 왜 제품마다 프레임이 다른가를 물어보신 것 같은데, 그것은 제품을 만드는 제조사가 자신의 제품의 화면 사이즈를 정하는 것이기 때문에 디자이너는 해당 제품에 무리없이 나의 그리드가 그리고 디자인이 잘 맞는지 테스트하기 위해서 해당 프레임을 만들어서 테스트를 해보게 되는 것 같습니다.

그리고 무엇보다 초기에 그리드를 잘 정의하는 게 중요하겠습니다. 적어도 초반에 그리드를 만들 때에 모바일을 하나를 만든다고 한다면, 이것이 다양한 모바일 디바이스에 유연하게 적용될 수 있는지 테스트해보면 좋습니다.

제가 질문을 정확하게 잘 이해하지 못한부분도 있어 답변이 미흡했다면 이 점 양해바랍니다. 혹시 더 궁금한 점이 있다면 문의주세요.

감사합니다.^^