UI 작업의 ‘기획 의도’를 잘 녹여내는 방법은?
안녕하세요! UI 분야로 이직을 준비 중인 2년 차 브랜드 디자이너입니다. 최근 Figma 등으로 앱 UI 작업을 진행하며 실무 중심 포트폴리오를 정리하고 있는데요. 기능이나 구성 자체는 심플하지만, 제가 의도한 ‘왜 이렇게 디자인(d/D)했는지’에 대한 기획적 이유를 어떻게 시각적으로 잘 녹여낼 수 있을지 막막할 때가 많습니다. 멘토님은 UI 결과물 안에서 기획 의도를 잘 전달하기 위해 어떤 방식이나 표현을 활용하셨는지 궁금합니다!
➥ UI 작업을 하면서 ‘왜 이렇게 디자인(d/D)했는지’에 대한 기획적 이유를 결과물 안에 시각적으로 잘 녹여내는 것이 어렵다는 고민으로 이해했습니다. 기능이나 구성은 단순하지만, 선택의 주체로서 의도나 판단 기준을 UI 결과 자체로 설득력 있게 표현하고 싶어 하시는군요. 관련하여 제 생각을 조금 나눠보겠습니다.
시각적 설득력을 위한 구조화
제가 생각하는 핵심은 ‘구조화된 논리’를 기반으로 프로젝트의 이야기를 전개하는 것에 있습니다. 단순히 비주얼을 멋지게 만든다고 해서는 그 의도가 잘 드러나지는 않습니다. 오히려 보는 사람은 ‘왜 이렇게 배치했을까’, ‘왜 이 버튼을 이 위치에 뒀을까’를 자연스럽게 이해하도록 유도하는 것이 중요합니다.
이를 위해서는 사용자 흐름과 시나리오를 중심으로 프로세스를 설계하고, 해당 흐름 내 각 선택의 배경을 UI 안에 포함시켜야 합니다. 결과물이 이러이러합니다라고 보통 랜딩 페이지에서의 서비스 설명처럼 기술하곤 하는데, 그게 아니라 이 결과가 나온 근거까지 덧붙여서 설명하는 것입니다.
예를 들어, Figma 등에서 인터랙션을 연결하면서도 단순한 페이지 전환이 아닌, 특정 의도를 반영한 흐름이라는 것을 설계 문서 혹은 주석 등을 통해 드러내면 좋습니다. 프로토타입이 아닌 포트폴리오 형태의 문서라면 더더욱 이러한 맥락과 과정, 근거를 제시해 수많은 옵션 중에서 하필 왜 이 선택을 했는지 나의 ‘최선’에 대한 남들이 납득할만한 객관성을 확보하는 것이 중요합니다.
디자인의 ‘맥락’을 동반하기
기획 의도를 시각화하는 핵심은 ‘맥락’을 얼마나 동반하느냐에 달려 있습니다. 아무리 단순한 버튼 하나라도 어떤 유저에게 어떤 타이밍에 보이게 되는지가 설계에 포함되어 있다면 그것만으로도 의도가 전달됩니다. 시안이나 결과물 옆에 간단한 주석을 붙이거나, 의사결정 과정의 트리 등을 함께 제시하면 효과적입니다.
이런 방법은 특히 포트폴리오에 좋습니다. 이러한 조치를 혹자는 군더더기 혹은 지저분한 것이라 오해하곤 하는데, UX 포트폴리오는 결과물을 전시하는 쇼케이스가 아니기에 괜찮습니다. 아니, 오히려 권장합니다.
예를 들어 “사용자는 이 단계에서 피로감을 느끼므로, 한 손 조작이 가능한 하단 UI를 배치했다”는 식의 메모는 시각적 정보만으로 전달하기 힘든 기획적 이유를 설득력 있게 보완해 줍니다. 혹은 사용자 조사 단계에서의 어떤 워딩을 근거로 문제해결의 방편으로써 이렇게 설계하여 “Pain Point를 완화하려 노력했다”는 식의 노트가 적절한 예입니다.
디테일 요소에 기획 반영하기
시각적 완성도보다는 디테일에 숨어 있는 설계 요소가 더 큰 역할을 할 때가 많습니다. 예를 들어 사용자가 주로 사용하는 기능을 눈에 잘 띄게 하거나, 오류 가능성이 있는 입력창 근처에 유도 텍스트를 배치하는 것처럼요. 이런 세부적 요소를 통해 ‘배려의 면모’를 담으려 노력해 보세요. 꼭 대단하고 큰걸 고치려 하지 않아도 된다는 의미입니다.
나의 의도를 잘 담기 위해선 실제 사용자 행동을 상상하고, 그에 따라 작은 기능 하나까지도 그 이유를 부여하는 것이 중요합니다. 나 좋자고 디자인했다는 것은 아무리 자랑해도 객관성이 부족할 뿐입니다. 나의 디자인이 얼마나 주관성을 벗어나 객관화되었는지를 열렬히 설파하는 것이 핵심이라고 볼 수 있겠습니다. 결국 포트폴리오도 그런 설계 의도를 얼마나 세세하게 반영했느냐가 평가 포인트가 될 수 있습니다.
문서 포맷과 전달 방식도 고민하기
UI 결과물에 기획 의도를 녹이는 방법은 결과 그 자체뿐 아니라, 그것을 어떻게 보여주느냐에도 달려 있습니다. 포트폴리오 문서를 만들 때 가급적 기업에서 선호할 문서 포맷을 참고하면 좋습니다. 두괄식의 메시지가 슬라이드마다 들어가 있고, 장과 장 간의 긴밀한 서사가 압축적으로 배치된 그런 문서를 많이 접해보는 것이 필요합니다.
특히 각 섹션마다 소제목을 넣고, 이미지 중심보다는 프로세스 중심으로 전개해야 합니다. 이미지 중심이 되면 위에서 언급한 쇼케이스가 돼버립니다. 결과물에 관한 설명이 필요할 경우에는 프로토타입보다는 정적 이미지 위에 설명을 얹는 형태가 직접적이라 오해가 적어집니다. 면접관으로 하여금 볼 게 너무 많아도 못 볼 수 있기 때문에, 꼭 봤으면 하는 것에 한해서는 10명 중 8명이 놓치지 않고 볼 수 있을 방식과 위치를 고려해 배치하는 것이 효과적입니다.
프로젝트마다 다른 깊이의 설계 강조
모든 프로젝트에 동일한 수준의 기획을 녹이기보다, 각 프로젝트의 성격에 따라 강조점을 다르게 잡는 것도 좋은 방법입니다. 예를 들어 기능 개선 중심의 프로젝트라면 기존 문제점을 어떻게 발견했고 어떻게 해결했는지를 중심으로, 신규 서비스라면 고객 여정과 니즈 분석을 통해 도출된 UX 기획안을 잘 풀어내는 식으로 말이죠.
포트폴리오에서 프로젝트는 각자의 역할이 있어야 합니다. ‘주제별 설계 핵심’을 따로 정리해 표지에 요약해 보세요. 한눈에 프로젝트 진입 단계에서 문서 작성자의 의도를 합의하고 이후 페이지로 넘어가게 만드는 것이 기술입니다. 혹은 이후 프로젝트 중간이라도 전개의 압축을 위해서 의도적으로 방향을 좁히는 것도 유효합니다. 그래야 분량을 줄일 수 있기 때문이죠. 모든 걸 다 보여주려고 하다 보면 정작 뭘 봐야 할지 알쏭달쏭하게 만들 수 있기에 왜 이 프로젝트를 이 위치에 이 정도 분량으로 넣었을지에 대해 다수가 이해할 수 있는 장치를 잘 마련하는 것도 고급 스킬 중 하나가 됩니다.
기획 의도는 결국 사용자 중심의 논리를 바탕으로 형성됩니다. 따라서 비주얼보다도 흐름과 의사결정 기준을 얼마나 잘 보여주느냐가 중요합니다. 결과물 자체에서 모든 것을 설명하려 하지 말고, 포트폴리오 문서의 형식, 설명 방식, 설계 근거를 제시하는 부가 요소들을 통해 설득하는 전략이 필요합니다.
아직 이직을 준비하시는 중이라면 지금부터라도 ‘기획 의도’로 이어지는 흐름을 각 프로젝트마다 특성을 살려서 정리해 보세요. 그 자체가 나중에는 UXer로서의 설득력 있는 언어가 될 수 있습니다. 무엇보다 ‘왜’를 스스로 계속 묻는 태도가 의도를 시각화하는 가장 강력한 도구임을 기억하셨으면 좋겠습니다.
