UX 포트폴리오 케이스 스터디: 판단과 근거를 보여 주는 법

좋은 UX 포트폴리오 케이스 스터디는 다른 사람이 이해할 수 있는 디자인 판단을 보여 줍니다. 무엇을 바꿔야 했는지, 내가 어떤 역할을 맡았는지, 어떤 대안을 검토했는지, 그리고 확보한 근거로 결과를 어디까지 설명할 수 있는지를 연결하는 것입니다. 이 흐름부터 잡으세요. 화면, 리서치 기록, 프로토타입도 그 이야기를 설명하는 데 도움이 될 때 의미가 있습니다.

화면을 편집하고 프로토타입을 검토할 수 있는 UX 디자인 작업 공간에서 자료를 준비한 뒤, 필요한 근거를 골라 포트폴리오에 담을 수 있습니다. 케이스 스터디는 작업을 설명하는 글이고, 디자인 파일은 그 설명을 뒷받침하는 자료입니다. 파일만 공유한다고 작업의 맥락까지 전달되지는 않습니다.

설명할 만한 디자인 판단이 있는 프로젝트를 고르세요

제품 전체를 다룬 작업이 아니어도 괜찮습니다. 의미 있는 변화를 설명할 수 있는 프로젝트를 선택하세요. 수령 장소를 선택하는 한 가지 문제를 깊이 다룬 사례가, 설명 없이 화면만 나열한 완성형 앱보다 더 많은 정보를 전달할 수 있습니다. 리서치 종합, 인터랙션 디자인, 시각적 시스템 구축 등 지원하려는 직무와 맞으면서 실제로 자신이 수행한 역량을 보여 주는 작업을 고르는 것이 좋습니다.

Nielsen Norman Group의 포트폴리오 가이드도 시각적 결과물뿐 아니라 문제, 본인의 기여, 작업의 판단 근거를 함께 보여 줄 것을 권합니다. 프로젝트를 고를 때부터 이 요소들이 잘 드러나는지 확인하세요.

아래에서는 도서관 예약 서비스를 개인 프로젝트로 설계했다고 가정하겠습니다. 이용자는 온라인으로 책을 예약하고 지정한 분관에서 수령할 수 있습니다. 핵심 설계 질문은 로그인 전과 후 중 언제 수령 분관을 선택하게 할 것인지입니다. 설명을 위한 가상 프로젝트이며, 실제 고객 조사나 출시 성과가 있었다고 가정하지 않습니다.

이 질문이 사례의 범위를 정해 줍니다. 계정 설정 전체를 다시 설계하거나, 새 브랜드 아이덴티티를 만들거나, 도서관의 모든 화면을 소개할 필요는 없습니다. 예약 방식에 영향을 준 내용일 때만 포함하세요.

도입부에서 어떤 작업인지 바로 설명하세요

프로젝트, 문제, 본인의 담당 범위를 한곳에서 보여 주세요. 검토자가 커다란 기기 목업을 지나 한참 스크롤해야만 인터랙션을 설계한 것인지 일러스트만 제작한 것인지 알게 해서는 안 됩니다. 도서관 사례의 도입부는 다음처럼 쓸 수 있습니다.

로그인하기 전에 수령 분관을 확인할 수 있는 모바일 도서 예약 흐름을 설계했습니다. 예약하는 동안 선택한 책과 분관을 계속 확인할 수 있도록 구성했습니다. 와이어프레임 제작, 두 가지 인터랙션 방향 비교, 프로토타입 제작을 직접 맡았습니다. 도서관의 의뢰를 받은 서비스가 아니라 개인 프로젝트로 진행한 콘셉트입니다.

이어서 모바일 웹, 기존 도서 목록 사용, 한 번에 한 권 예약처럼 작업 범위를 짧게 정리하세요. 팀 프로젝트라면 본인의 기여를 구체적으로 구분해야 합니다. “분관 선택 화면을 설계했고, 인터뷰 계획은 리서처가 담당했다”는 설명이 “사용자 중심 프로세스를 따랐다”보다 많은 정보를 줍니다. 프로젝트 기간은 이해에 도움이 될 때만 넣으세요.

문제의 출발점은 확인 가능한 상태로 설명하세요. 이 예시의 초기 콘셉트에서는 분관별 이용 가능 여부를 보여 주기 전에 로그인을 요구합니다. 따라서 이용자는 로그인하기로 결정하기 전까지 수령 장소를 알 수 없습니다. 이는 디자인에서 확인할 수 있는 조건입니다. 이 조건 때문에 실제로 예약을 포기하는지는 관련 근거가 확보되기 전까지 별도의 질문으로 남겨 두어야 합니다.

디자인이 바뀐 이유를 설명하는 근거를 고르세요

사례의 중간 부분은 중요한 판단 두세 가지를 중심으로 구성하세요. 각 판단마다 출발점이 된 정보, 검토한 대안, 선택한 방향, 그에 따른 결과를 보여 주면 됩니다. 결과물을 많이 나열하면 작업량은 드러나지만, 서로 연결된 자료 몇 개를 보여 주면 판단 과정이 드러납니다.

가지고 있는 자료	독자가 확인해야 할 내용
초기 예약 와이어프레임	분관 정보가 빠져 있어 선택이 불명확해지는 지점
수정한 두 가지 레이아웃	로그인 전에 분관을 선택하는 방향을 택한 이유와 그로 인해 화면에 추가되는 요소
프로토타입 화면 흐름	로그인부터 예약 확인까지 선택한 책과 분관을 계속 이해할 수 있는지
리뷰 또는 테스트 기록	수정으로 이어진 실제 관찰과 그 근거의 한계를 판단할 수 있는 맥락

리서치를 진행하지 않았다면 과정이 완전해 보이도록 페르소나나 인터뷰 인용문을 지어내지 마세요. 대신 “이용자는 로그인하기 전에 어디서 책을 수령할지 알아야 한다”는 설계 가정을 명시하세요. 그 가정을 바탕으로 어떻게 설계했는지, 후속 조사에서 무엇을 확인해야 하는지를 보여 주면 됩니다.

실제 리서치가 있다면 디자인을 바꾸게 만든 관찰을 선택하고, 그때의 과업과 상황을 설명하세요. 맥락이 없는 인용문은 인상적일 수 있지만 특정 해결책의 근거가 되지는 않을 수 있습니다. 공개 버전에는 개인정보나 기밀 자료가 포함되지 않도록 하세요.

하나의 절충안을 충분히 설명하세요

도서관 예약 흐름에 두 가지 안이 있다고 가정해 보겠습니다. A안은 도서 상세 페이지를 짧게 유지하고 로그인한 뒤에 분관을 선택하게 합니다. B안은 도서 상세 페이지에 간단한 분관 선택기를 두고, 선택한 정보를 로그인 단계까지 이어 갑니다.

B안은 필요한 정보를 더 일찍 제공하지만 도서 상세 페이지가 길어진다는 단점이 있습니다. 여기서 B안을 단순히 “더 직관적”이라고 평가하는 것으로 끝내지 마세요. 책 제목, 이용 가능 여부, 선택한 분관을 함께 보여 주되, 분관의 추가 정보는 선택기를 열었을 때만 제공하는 식으로 구체적인 절충을 설명하세요.

예를 들어 다음과 같이 쓸 수 있습니다. “예약 버튼을 누르기 전에 수령 장소를 알 수 있도록 분관 선택을 로그인 앞으로 옮겼다. 도서 상세 페이지가 길어지지 않도록 기본 화면에는 선택한 분관과 이용 가능 여부만 표시하고, 전체 주소는 분관 선택기 안에서 확인하도록 했다.”

이후에 더 설계해야 할 상황도 짚어 주세요. 로그인하는 동안 이용 가능 여부가 바뀐다면, 변경 안내와 다른 분관을 선택할 수 있는 경로가 필요합니다. 이런 설명은 필드를 보기 좋게 재배치한 데 그치지 않고 인터랙션 전체를 고려했음을 보여 줍니다.

각 이미지에 분명한 역할을 주세요

전체 화면으로 흐름을 보여 주고, 확대 이미지로 핵심 판단을 설명하세요. 전후 비교 이미지는 실제로 비교할 차이가 있을 때 사용하고 두 이미지의 배율을 맞추세요. 작은 ‘이전’ 화면 옆에 화면 폭을 가득 채운 세련된 ‘이후’ 화면을 놓으면 차이를 설명하기보다 가리게 됩니다.

이미지 설명은 그림만 봐서는 알기 어려운 정보를 더해야 합니다. “분관 선택기”는 요소의 이름입니다. “선택한 분관을 예약 버튼 옆에 유지해 이용자가 수령 장소를 확인할 수 있도록 했다”는 설계를 설명합니다. 이미지에 글자가 많다면 핵심 내용은 일반 본문에도 적어 모바일에서도 읽을 수 있게 하세요.

Pixso에서는 편집 가능한 프레임에 대안을 나란히 두고, 디자인의 해당 위치에 댓글을 달아 피드백을 남길 수 있습니다. 프로토타입으로 도서 상세부터 예약 확인까지의 경로도 보여 줄 수 있습니다. 공개할 사례에는 이 가운데 필요한 자료를 골라 담으세요. 정리되지 않은 작업 파일을 넘겨주고 검토자가 직접 이야기를 찾아내게 해서는 안 됩니다.

근거로 설명할 수 있는 결과를 제시하세요

완성한 디자인, 리서치에서 관찰한 사실, 비즈니스 성과는 구분해야 합니다. 각각 답하는 질문이 다르기 때문입니다. 도서관 콘셉트는 로그인 전에 분관이 보이고, 이용 가능 여부가 바뀌었을 때의 경로가 프로토타입에 포함되어 있음을 보여 줄 수 있습니다. 하지만 실제로 출시하고 적절하게 측정하지 않았다면 예약 건수가 늘었다는 결론을 뒷받침할 수는 없습니다.

사용성 테스트 근거가 있다면 과업, 참여자, 실제로 일어난 일을 설명하세요. 몇 번의 성공 사례를 전체 사용자에게 적용되는 비율로 바꾸지 마세요. 운영 중인 서비스의 지표가 있다면 측정 기간과 같은 시기에 달라진 다른 조건도 밝혀야 합니다. 디자인 변경만이 결과의 원인이라고 단정할 수 없기 때문입니다.

출시하지 않은 프로젝트도 다음처럼 구체적으로 마무리할 수 있습니다. “최종 프로토타입에는 도서 선택, 분관 선택, 로그인, 예약 확인과 함께 해당 분관에서 수령할 수 없어진 상태까지 포함했다. 다음 조사에서는 분관 선택만으로 예약이 완료되는 것은 아니라는 점을 이용자가 이해하는지 확인해야 한다.” 이렇게 쓰면 완성한 범위와 아직 확인하지 못한 부분을 함께 전달할 수 있습니다.

훑어 읽고 질문하기 쉬운 사례로 마무리하세요

소제목에도 디자인 판단을 담으세요. “로그인 전에 수령 분관 보여 주기”는 “아이디어 발상”, “반복 개선”, “최종 UI” 같은 단계 이름만 나열하는 것보다 도움이 됩니다. 도입부, 소제목, 이미지 설명만 읽어도 프로젝트의 핵심 변화가 이해되어야 합니다.

추가 자료를 찾아볼 수 있게 하되 모든 결과물을 본문에 넣지는 마세요. 프로토타입 링크로 인터랙션을 보여 주거나 짧은 부록에 리서치 자료를 담을 수 있습니다. 기밀 작업은 공개 가능한 범위를 먼저 합의하고, 필요하면 허가받은 익명화 버전을 사용하세요. 비밀번호를 걸었다고 공개할 권한이 생기는 것은 아닙니다.

마지막에는 다음 프로젝트에 가져갈 교훈을 남기세요. 다시 적용할 판단, 재검토할 절충안, 아직 답하지 못한 질문이 될 수 있습니다. 도서관 사례라면 분관을 더 추가하기 전에 이용자가 일시적인 이용 가능 상태를 어떻게 해석하는지 확인하는 것입니다. 포트폴리오의 가치는 다른 사람이 판단 과정을 이해하고, 이를 바탕으로 의미 있는 대화를 나눌 수 있게 하는 데 있습니다.