웹, 앱 디자인 분석을 위한 3가지 기준점
UI 디자이너가 웹서비스와 앱서비스를 분석하는 방법
디자인 분석이 필요한 이유
웹과 앱 디자인에 있어서 좋고 나쁨을 느끼는건 몇초만 있어도 충분합니다. 그러나 디자인 결과물이 왜 좋은지. 혹은 어떤게 나쁜지를 이야기할때는 정 반대의 상황이 됩니다. 뚜렷하게 - 이게 이래서 좋다, 나쁘다를 말하려면 - 수많은 경험과 문서로서의 정리가 필요합니다. 그런 면에서 디자인 결과물을 일정한 기준점으로 분석하고, 장단점을 명확히 글로 써보는건 매우 좋은 훈련이 되죠. 이런 훈련은 단순히 미적 감각을 올리는 훈련 외에도, 디자이너들이 꼭 거쳐야하는 훈련들 중 하나입니다. 그러니 이번 글에서는 웹, 앱 디자인을 분석하는 방법에 대해 이야기해보겠습니다.
이번 분석의 예시가 되어줄 - 한화 Qcells의 제품 홈페이지
https://www.q-cells.com/kr/main.html
분석을 위한 3가지 기준점
일단, 필자는 UI디자이너이고. 단순 시각적 우수성뿐 아니라 UI 디자인적 연출이나, 배치. 레이아웃등을 같이 보게됩니다. 또한 컨텐츠 자체의 난이도를 시각적으로 어떻게 풀어냈는지. 그 양과 정보의 가치는 충분한지 등을 함께 들여다봅니다.
기준점만 명확하다면 좋고 나쁨을 이야기하기도 쉬워집니다1. 비주얼 컨셉
웹이나 앱의 시각적 완성도를 들여다봅니다. 주로 색상과 사진. UI에 들어간 애니메이팅이나 연출을 묶어 함께 보는 편입니다. UI 요소들의 배치나 레이아웃적인 부분도 포함할 수 있는 부분이며. 한 눈에 보아도 알 수 있는 - 시각적 비례나, 컨텐츠 영역의 너비 등을 확인합니다.
2. UI 디자인적 완성도
UI 디자인의 개별 요소들이 얼마나 적재적소에 쓰였는지를 봅니다. 주요 컨텐츠를 설명하기위해 어떤 UI를 사용했고, 개별 요소들의 비례나 크기. 색상 사용은 적절했는지. 컨텐츠를 읽고 확인하는데 있어서 UI가 제대로 도움을 줄 수 있도록 설계 되었는지. 페이지 메뉴와 컨텐츠의 맥락을 어떤 순서대로 만들었는지. 개별 UI의 연출로 인해 사용성에 문제가 생기지 않는지 등을 확인합니다.
3. 컨텐츠의 내용과 맥락
아무리 잘 만들어진 웹, 앱이라하더라도 내부에 들어갈 컨텐츠가 부실하다면 어떨까요? 혹은 컨텐츠 자체가 좋아도 UI나 시각적인 부분에서 제대로 풀어내지 못하는 경우가 있을수도 있습니다. 이러한 부분에서 해당 웹, 앱 서비스가 사용자에게 전달할 컨텐츠를 무엇으로 두고. 적절한 설명과 내용을 담고있는지. 그 내용이 기술적으로 너무 어려운 내용은 아닌지. 사용자에게 얼마나 효과적으로 설명되고있는지를 확인합니다.
실제 분석 예시 : 한화 Q Cells 사이트
기준점을 이야기해보았으니. 실제 사이트에 대한 분석을 진행해보도록 하겠습니다. 이번 예제가될 사이트는 한화 Qcells의 제품소개 사이트입니다. 해당 사이트는 태양열 발전을 대규모로 진행하는 사업에 대한 웹사이트입니다. 개별 제품의 우수성을 알리고, 제품에 사용되는 기술적 내용을 풀어서 말해주는 기술적 도해 의 개념이 많이 들어가있습니다.
깔끔하고 잘 정돈된 색상 팔레트와 고해상도의 사진들이 돋보인다1. 분석 : 비주얼 컨셉
간결한 디자인에 압축적으로 기술소개와 제품 소개를 잘 풀어냈습니다. 일관성있게 깔끔한 색상 스킴을 유지한 것도 좋은 선택이었던 것으로 보입니다. 메인 슬라이드의 blur 애니메이팅은 호불호가 갈릴 수 있겠으나, 개별 UI 컴포넌트에 작은 애니메이션을 넣어 생동감을 주려한 시도는 긍정적으로 보이네요.
전반적으로 시인성이 좋은 각진 폰트와 사각형 그리드를 차용한 깔끔한 디자인이 돋보입니다. 실제로 다루고있는 제품도 반듯한 사각형인 태양광 패널이라, 사각형 그리드가 잘 어울리는군요. 아이콘이나 시각물 사용에 있어서 파란색과 검은색. 두가지로 이루어진 라인 형태의 아이콘을 사용함으로써. 메인 로고와의 통일성을 잘 지켰습니다.
많은 내용을 모두 글로 설명하기보다, 그림으로 풀어내려한 점을 높이 사고싶습니다. 넓은 항공사진을 기반으로 큰 규모의 산업 컨셉의 특성도 잘 살려냈습니다. 전반적으로 사진의 균일함과 색상의 일관성이 높아보이네요
2. 분석 : UI 디자인적 완성도
사진 위에 어두운 배경을 올리고, 하얀 텍스트와 남색 버튼을 사용한 것이 기본 UI 스타일인듯합니다. 다만 남색이 검은 배경에 의해 묻히는 경우가 많고, 텍스트의 shadow값이 종종 거슬리는 경우가 있군요. 차라리 사진을 더 어둡게 처리하는 편이 나아보이는 경우가 많습니다.
영상 모듈의 경우 왜 굳이 개별 팝업창에서 영상이 플레이되는지 모르겠습니다. 어차피 유튜브 링크를 연결시켜놓은 영상이라면, 해당 화면에서 그대로 재생되어도 좋았을 것 같네요. 전체화면으로 자동 플레이되는 것도 아닌데 다, 따로 관련 article 내용이 등장하는 것도 아니거든요. 아마도 이 부분은 상용화 모듈을 그대로 사용하는 과정에서 생긴 실수가 아닐까 싶습니다.
컨텐츠 영역들 중에 내부 컨텐츠와의 간격. 제목과 컨텐츠 영역간의 구분이 불확실해 가독성이 떨어지는 부분이 종종 눈에 보입니다. 타이틀 영역의 요소와 서브텍스트, 아이콘간의 명도차이가 없다시피한 경우도 많구요. 최대한 아이콘을 강조하려한 의도같은데, 타이틀이나 아이콘. 둘 중 하나를 좀 더 덜 강조하는 편이 보기에 좋았을듯 합니다.
디자인적으로는 일관성을 지키려 노력한 점은 칭찬하고 싶습니다. 허나 너무 다양한 UI 컴포넌트를 사용하여, 페이지가 복잡해보이는 부분은 조금 아쉽습니다. 내용이 복잡한 규격인데, 컨텐츠 레이아웃에서 지나치게 멋을 부려 오히려 복잡도를 추가해서 눈에 띠는 단점이 됐네요.
복잡한 개념들을 아이콘과 영상규격으로 잘 풀어냈다.3. 분석 : 컨텐츠의 내용과 맥락
생각보다 너무 많은 컨텐츠를 담고있습니다. 자연히 읽어야할 내용이나 확인해야할 내용이 많아져서 페이지수가 많이 늘어났어요. 컨텐츠 편집과 규격에 신경을 많이 쓴 것도 알겠지만, 그 양이 너무 많습니다. 좀 더 압축해서 내용을 정리할 필요가 있었을듯 합니다.
GA를 통해 실제 사용자들의 사용 패턴을 분석해보면 알 수 있겠지 - 실제 개별 페이지들에 대한 체류시간은 그리 높지 않을 것으로 예상됩니다. 내용 하나하나가 알찬 것은 좋으나, 페이지 수나 정보의 양이 너무 많아서, 두꺼운 소개책자를 한꺼번에 보는듯한 경험을 하게됩니다. 게다가 가독성이 떨어지는 복잡한 레이아웃도 한몫 하고있구요. 이런 경우라면 사용자들이 계속 내용을 읽고있을리가 없겠죠.
자, 분석이 끝났군요. 이 분석이 무조건 맞다고만 말할수는 없을겁니다. 자신이 보기에 어떠한지. 스스로의 기준점을 만들어 이야기해보고싶다면, 지금이라도 한번 도전해보세요...!
정확한 기준을 갖고 분석해야, 좋은 결과물을 만들 수 있습니다.디자인 분석, 그리고 전략적 선택
디자이너는 미적 감각을 고도로 훈련해야하는 직업입니다. UI 디자인 역시 이런 디자인적 특성에 많은 영향을 받게되죠. 하지만 UI 디자인은 단순히 아름답고, 보기에좋은것이 최우선의 가치인것은 아닙니다. 기술적인 구현방식이나, 사용자들이 바라보게되는 컨텐츠의 내용과 맥락 또한 매우 중요합니다. 그러한 면에서 이런 세가지 기준점을 갖고 - 여러 서비스와 시각물들을 분석하는 연습은. 미적 감각을 훈련하는 것 만큼이나 중요합니다.
디자인의 좋고 나쁨의 이유를 명확하게 이야기하는 디자이너는 기획과 기술적 구현에 있어서도 - 어떤 선택을 왜 해야하는지. 상황에 맞게 어떤 방법을 사용해서 전략적으로 문제를 해결할지를 고민해야합니다. 디자인을 넘어 마케팅과, SEO 등 - 서비스를 성공시키기 위한 전략을 짜는 수준까지 나아갈 수 있다면 더욱더 많은 것들을 바라보게되겠죠.
한 사이트에 대해서 3가지 기준점을 갖고 내용을 분석해보는 시간을 가져봤습니다. 어떠셨나요? 생각보다 그리 어렵지는 않으셨죠? 이런 작업을 실제로 해보시다보면 분명 - 이걸 어떻게 표현해야할지. 이 부분이 정말 문제이거나, 장점이라 할 수 있는지. 자신만의 기준점들이 만들어지기 마련입니다. 그런 기준점이 많고 정확할수록 - 웹과 앱서비스에대한 분석도 정확도가 높아지게되죠.
결국, 디자인에 대한 분석은 - 높은 안목과 다양한 경험, 그리고 꾸준한 반복이 핵심입니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
