sihyun22 님의 블로그

노코드 툴 Framer 배우기 #4

sihyun22 — Thu, 11 Dec 2025 20:25:26 +0900

Framer로 화면을 제작했다면, 더욱 실감나는 웹을 위해 다양한 인터렉션을 사용해볼 수 있다. 오늘은 Framer에서 구현할 수 있는 다양한 인터렉션들을 배워보았다.

Top Button

머티리얼 아이콘으로 Top Button을 제작하고 컴포넌트로 만들어준다.

컴포넌트에서 아이콘을 복사해주고 보이지 않는 하단에 배치, Hover 상태의 버튼을 하나 더 만들어 보이지 않는 상단에 배치해주면, 마우스 Hover 시 인터렉션이 생긴 것을 확인할 수 있다.

버튼을 클릭하면 페이지의 상단으로 이동할 수 있도록 Hero Section에 Scrool Section을 만들어주고, 버튼 컴포넌트에 Link To를 설정해주면, 잘 작동이 되는 것을 확인할 수 있다.

에셋 페널에서 버튼을 불러와주고 배치시켜준 뒤, 포지션을 Fixed로 고정, Z Index를 2로 올려주면 가장 높은 레이어로 설정된다.(하단 Footer가 Z Index 1로 설정되어 있어 2로 올린 상황)

Mouse Cursor

Frame으로 원형 Mouse Follower을 제작해준 뒤, 컴포넌트로 만들어준다. Variant로 클릭 가능한 곳에 마우스를 올렸을 시, 나타날 Mouse Follower을 제작한다. 클릭할 요소가 뒤에 보일 수 있도록 투명도를 주었다.

클릭 될 요소들이 포함된 컴포넌트에 들어가 클릭할 요소들 모두 Cursor 옵션을 일일이 넣어주면 설정은 완료된다.

이제 화면에서 Cursor 옵션이 잘 적용되도록 데스트탑 전체 영역에는 Cursor Variant1을 설정해주고,

클릭이 가능한 요소가 포함된 모듈에는 Cursor Variant2를 적용해주면 완료된다.

Lottie

"Lottie는 JSON 기반의 벡터 애니메이션 파일 형식입니다. After Effects에서 만든 애니메이션을 Bodymovin 플러그인을 통해 JSON으로 내보내고, 이걸 웹, iOS, Android, React Native, Windows 등 다양한 플랫폼에서 실시간 렌더링할 수 있게 해 주는 기술입니다."

웹사이트에서 원하는 Lottie JSON 파일을 다운로드 해주고,

Lottiefiles

Framer에서 Insert → Lottie 검색 후 꺼내주어 다운로드 받은 파일을 업로드 해주면 원하는 페이지 위치에 배치 후 바로 Lottie를 사용할 수 있다.

Spline 3D 연동하기

"Spline이란 웹 기반 3D 디자인 툴로, 디자이너가 코드 없이 인터랙티브한 3D 콘텐츠를 만들 수 있게 해주는 도구입니다. 피그마, 프레이머, 비전 프로, 앱 빌드 등 다양한 플랫폼에 연동이 가능합니다."

먼저 Spline 홈페이지에서 원하는 3D를 데스트탑/모바일 화면의 링크를 복사하여 준비해주고,

Spline -Desktop

Spline -Mobile

Framer에서 Insert → Embed 검색 후 활성화, 좌측 패널에서 복사해 둔 링크를 삽입해주면 3D를 가져올 수 있다.

가져온 3D 화면은 Hero Section 배경에 배치해주고, Position을 Absolute, 값을 모두 0으로 설정해주면 반응형에도 대응하게 된다. Z Index는 0으로 낮춰주어 가장 뒤에 배경으로 위치할 수 있게 한다.

데스크탑에 가져온 화면은 모바일 환경에는 맞지 않기 때문에 Embed 컴포넌트를 복사, Mobile로 하나를 더 만들어주고, 모바일 3D 화면 링크를 삽입, 데스크탑에선 비활성화 해준다.

모바일 화면에선 Desktop Embed를 비활성화, Mobile Enbed를 활성화해주면 된다.

스크롤별 인터렉션 구현

! 인터렉션은 일일이 효과를 넣어주는 것으로 설정값을 잘 확인하며 설정하는게 중요하다. 설정값 캡쳐사진을 참고하며 다음에도 적용할 수 있도록 기록하였다.

상단 네비게이션 바 인터렉션을 위해 Fixed로 고정 후 좌측 패널에서 Effects를 설정해주면 완성이다.

설정값 확인

텍스트 인터렉션은 텍스트 선택 후 Effects → Text로 효과를 넣어준다.

타이틀 밑 서브 텍스트와 버튼은 0.4 딜레이를 주어 타이틀 이후에 효과가 들어갈 수 있도록 한다.

중간 타이틀에선 Layer in View로 레이어가 보일 때 효과가 나타나도록 설정해준다.

타이틀 옆 이미지도 효과를 넣어주고,

밑 이미지에도 효과를 넣어주면, 완성된다.

CMS 레이아웃 변경

CMS를 불러온 뒤, 디자인을 변경한다. Date의 경우 S~XL까지 스타일을 지정할 수 있으며 Locale도 한국식 날짜 표기로 지정할 수 있었다.

이미지의 경우 Positon Type을 Absolute로, Positon 값을 모두 0으로 해주고 아래 Size를 원하는 사이즈로 Fixed해주면 크기에 대응하여 이미지 크기가 맞춰진다.

각 디바이스마다 알맞은 디자인으로 변경해준 뒤, 컴포넌트로 제작한다.

Primary(Desktop)에 Hover를 만들어 4가지 포지션 값에 -40 값을 적용해주면, 마우스 Hover 시 이미지가 확대되는 인터페이스가 만들어진다.

CMS 공유하기 기능

소셜 플랫폼 아이콘을 제작, 컴포넌트로 인터렉션을 만들어 준 뒤,

아이콘 컴포넌트에 Code를 삽입하여 SNS로 공유하게 해줄 code 컴포넌트를 만든다.

소셜 공유하기 코드 컴포넌트

import { useCallback } from "react"
import type { ComponentType } from "react"

// X 공유
export function x_Share(Component): ComponentType {
    return (props) => {
        const handleTap = useCallback(() => {
            if (
                typeof window !== "undefined" &&
                typeof document !== "undefined"
            ) {
                const pageTitle = document.title
                const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
                    `Notion Mail ${pageTitle}. `
                )}&url=${encodeURIComponent(window.location.href)}`
                window.open(url)
            }
        }, [])

        return <Component {...props} onTap={handleTap} />
    }
}

// Facebook 공유
export function Facebook_Share(Component): ComponentType {
    return (props) => {
        const handleTap = useCallback(() => {
            if (
                typeof window !== "undefined" &&
                typeof document !== "undefined"
            ) {
                const pageTitle = document.title
                const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
                    window.location.href
                )}&quote=${encodeURIComponent(`Notion Mail "${pageTitle}"`)}`
                window.open(url)
            }
        }, [])

        return <Component {...props} onTap={handleTap} />
    }
}

// LinkedIn 공유
export function LinkedIn_Share(Component): ComponentType {
    return (props) => {
        const handleTap = useCallback(() => {
            if (
                typeof window !== "undefined" &&
                typeof document !== "undefined"
            ) {
                const pageTitle = document.title
                const url = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
                    window.location.href
                )}&title=${encodeURIComponent(pageTitle)}&source=framer.com`
                window.open(url)
            }
        }, [])

        return (
            <Component
                {...props}
                onTap={handleTap}
                style={{ ...props.style, cursor: "pointer" }}
            />
        )
    }
}

// WhatsApp 공유
export function Whatsapp_Share(Component): ComponentType {
    return (props) => {
        const handleTap = useCallback(() => {
            if (typeof window !== "undefined") {
                const url = `https://api.whatsapp.com/send?text=${encodeURIComponent(
                    `Notion Mail : ${window.location.href}`
                )}`
                window.open(url)
            }
        }, [])

        return <Component {...props} onTap={handleTap} />
    }
}

// Email 공유
export function Email_Share(Component): ComponentType {
    return (props) => {
        const handleTap = useCallback(() => {
            if (typeof window !== "undefined") {
                const subject = encodeURIComponent("Check out this link!")
                const body = encodeURIComponent(
                    `Notion Mail : ${window.location.href}`
                )
                window.open(`mailto:?subject=${subject}&body=${body}`)
            }
        }, [])

        return <Component {...props} onTap={handleTap} />
    }
}

// 클립보드 복사
export function Clipboard_Share(Component): ComponentType {
    return (props) => {
        const handleTap = useCallback(() => {
            if (
                typeof window !== "undefined" &&
                typeof document !== "undefined"
            ) {
                const textField = document.createElement("textarea")
                textField.innerText = window.location.href
                document.body.appendChild(textField)
                textField.select()
                document.execCommand("copy")
                textField.remove()
                alert("링크복사가 완료되었어요!")
            }
        }, [])

        return <Component {...props} onTap={handleTap} />
    }
}

컴포넌트를 복제해서 클립보드 복사 / X 공유 / Facebook 공유 버튼 컴포넌트를 만들어주고, Code Overrides를 맞게 연결해주면 퍼블리쉬된 페이지에서 소셜 공유가 가능한 것을 확인할 수 있다.

오늘은 Framer에서 더욱 다이나믹하고 실감나는 웹 사용을 위한 인터렉션들과 기능들을 학습했다. 한 번만 해선 외우기 어려운 속성들이지만 화면에 적용됐을 때 확실히 웹이 생동감 있게 느껴졌다. 적용 방법을 위에 잘 정리해두어 필요할 때마다 다시 확인하며 익히는 과정이 필요할 것 같다.

노코드 툴 Framer 배우기 #3

sihyun22 — Wed, 10 Dec 2025 21:28:37 +0900

Framer 배우기_Day3

오늘은 Framer의 웹사이트 기본 세팅과 사용자 반응문자 지표 수집, CMS 활용에 대해 알아보았다.

사용자 데이터

랜딩페이지 제작을 완료했다면, 실제 사용자 데이터를 받을 수 있는 기능이 있다.

랜딩페이지에 이메일을 작성하는 모듈을 제작하고, Form 레이어에 Send To → Google Sheets로 연결해주면, 이메일 입력시, 스프레드 시트에 이메일이 잘 모이는 것을 확인할 수 있다. 이 기능으로 메일을 수집하여, 서비스 런칭 시 연락을 돌리는 등의 사용자와의 연결이 가능하다.

+ 추가적으로 메일을 수집하려면, 메일 주소를 보낸 뒤, 성공적으로 주소가 보내졌다는 화면을 제작하여 사용자의 상황을 안내하는 것이 필수적으로 필요하다. 성공 화면을 먼저 제작해주고, 버튼 컴포넌트에 Link To → Create Variable로 버튼을 누르면 화면을 이동할 수 있는 설정을 넣어준다.

그리고 실제 화면 페이지에서 button 패널에서 이동할 페이지를 설정해주면, 버튼을 통해 사용자의 다음 행동을 유도할 수 있다.

SEO

랜딩페이지를 만들면 필수적으로 SEO를 설정해주어야 한다. SEO를 설정하지 않으면 링크 직접 전달 이외에 사용자가 접속할 수 있는 방법이 없기 때문에 꼭 설정해주어야 한다.

SEO는 우측 상단 Site Settings에서 설정할 수 있다. 차례로 입력하면, 하단 Preview로 어떻게 SEO가 구성될지 미리 확인할 수 있다. 또 Favicon, OG Image 등을 준비하면 더욱 완성도 높은 페이지로 마무리 할 수 있다.

방문자 지표

Framer은 방문자 지표를 확인할 수 있어 이를 바탕으로 개선에 활용할 수 있다. 우측 상단에 차트 아이콘을 누르면 확인이 가능하다.

CMS

평소 개발 영역에서 들어보았던 CMS도 Framer에서 적용해볼 수 있었는데, 한가지 틀을 만들어 데이터만 바꿔 재활용할 수 있는 시스템이었다.

Framer은 페이지를 추가하는 영역에서 CMS를 선택해 빠르게 만들 수 있다. Blog 형태의 CMS를 만들면 알아서 디자인까지 제공되고, 데이터를 편집, 디자인 수정만 해주면 바로 활성화가 가능하다.

위처럼 목록 화면이 생기고, 목록 화면 밑 Articles Pages가 하나 더 생성되는데, 이게 상세 페이지가 되는 것이다. 상단 CMS 탭으로 진입해 데이터만 바꿔주면 간편하게 블로그 형식의 사이트를 운영할 수 있다.

오늘은 Framer에서 페이지 제작 이후, 배포까지 어떻게 관리하면 되는지, 개발 영역에서만 사용할 수 있었던 CMS는 어떻게 프레이머를 통해 활용해볼 수 있었는지 배워보았다. 사용할 수록 Framerd은 개발자가 아니더라도 페이지를 제작하고, CMS 같은 기능까지 사용해볼 수 있는 훌륭한 툴이라는 생각이 들었다.

노코드 툴 Framer 배우기 #2

sihyun22 — Tue, 9 Dec 2025 20:33:14 +0900

Framer 배우기_Day2

오늘은 어제 배운 기능들을 사용하여 랜딩페이지를 제작 실습을 진행하였다. 노션의 랜딩페이지를 클론해보고, 디스플레이에 맞춰 반응할 수 있도록 데스크탑, 타블렛, 모바일 화면을 제작하였다.

Section

먼저 랜딩페이지의 센션을 파악했다. 랜딩페이지는 여러개의 섹션들로 이루어져 있는데, 구성요소에 따라 어떤 네이밍으로 불리는지 알 수 있었다.

Breakpoint

디바이스에 맞게 반응하는 화면을 위해선 화면이 바뀌는 기준 사이즈가 필요한데, 이를 Breakpoint라고 한다. 일반적으로 모바일/타블렛/데스크탑 3단계로 나뉘며, 표준 Breakpoint가 있지만, Framer에서 제공하는 사이즈를 사용했다.

반응형 디자인

Framer에선 데스크탑을 Primary로 사용하는 원리였으며 이를 바탕으로 타블렛과 모바일 화면을 정돈해주는 과정으로 작업 프로세스가 이루어져있다. 큰 화면(Primary) → 작은 화면으로 순으로 설계가 진행되며, 이 반대로는 반영이 안되는 시스템이다.

Wireframer

Framer의 AI 기능인 Wifeframer로 와이어 프레임까지 제작을 할 수 있었다. 원하는 프롬포트를 입력하면 알아서 와이어프레임까지 제작해주면 되어서, 와이어프레임 제작 과정 없이 바로 디자인을 시작할 수 있는 매우 편리한 기능이었다.

Interactive

Interative 효과들을 활용해 좀 더 멋진 화면들을 제작할 수도 있었다. 오늘 사용해본 Interative는 Ticker과 Slidshow였는데, 평소 웹 사이트에서 많이 봐왔던 익숙한 효과들이라

Ticker

Slideshow

Component

버튼의 경우 Component로 제작하였는데, Figma에서 Text property를 적용했던 것과 같이, Text를 수정할 수 있었다. 별도의 설정 없이 이런 기능이 다 갖춰져 있어, 제작에 굉장히 편리한 툴이라는 생각이 들었다.

반응형 랜딩페이지 실습 완료

토스의 랜딩페이지를 클론디자인하며 Frame로 반응형 페이지를 제작했다. 반응형으로 모바일에선 Top Nevigation이 메뉴로 들어간다거나, 2열이었던 레이아웃을 1열로 정리해서 디스플레이에 대응하게 제작하는 과정이 흥미로웠다.

오늘은 실제 랜딩페이지를 만들어보았는데, 이틀만에 실제 사용이 가능한 페이지를 제작할 수 있는 것으로 하여금 Framer가 얼마나 편리하고 강력한 툴인지 체감이되었다. Figma를 사용할 줄 알면 금방 익힐 수 있는 기능들과 Wireframer AI 기능으로 와이어프레임까지 제작이 가능한 점이 매우 강력한 Framer의 장점으로 느껴졌다. 이 툴을 적극적으로 사용하면 원하는 다양한 반응형 페이지를 만들 수 있겠다는 생각이 들었다.

노코드 툴 Framer 배우기 #1

sihyun22 — Mon, 8 Dec 2025 20:36:34 +0900

Framer 배우기_Day1

지금까지 여러 프로토타입들을 만들어보며 아쉬웠던 부분은 정말 실행되는 것 처럼 만들었지만, 사실은 실행되지 않는다는 점이었다. 개발 바로 직전까지만 닿을 수 있었는데, 이번 노코드 툴 학습을 통해 실제 구동하는 화면을 만들 수 있다는 게 기대가 된다. 일주일간 노코드 툴인 'Framer'를 통해 랜딩페이지 제작을 목표로 학습하는 것이 목표이다.

Framer를 통해 개발 과정 없이 바로 실행할 수 있는 페이지를 만들 수 있다. Frame에서 웹사이트를 디자인하면 곧바로 사이트가 개설되는 것이다. 오늘은 이 Frame 툴을 처음 접해보려 한다.

랜딩페이지

최종 목표인 랜딩페이지에 대해 알아보자. 랜딩페이지는 사용자가 처음 도달하는 페이지로 회원가입등과 같은 행동을 유도할 수 있으며, 브랜드의 첫인상을 좌우한다. 이는 전환율에 직접적인 영향을 미친다. 그러므로 랜딩페이지는 논리적, 시각적으로 사용자를 설득할 수 있는 페이지이어야 한다.

Framer 용어

Framer는 전체적으로 Figma 툴 사용법과 유사했지만, 몇가지 중요한 툴 용어가 달랐다.

Autolayout=Stack
Hug=Fit
Ignore Autolayout=Position Absolute
Stroke=Border

실습

기본적인 기능들을 하나씩 사용해보며 툴을 익혔다.

➀ Stack

첫번째로 가장 기본적인 Frame과 Stack을 구분할 수 있다. Frme 속의 요소들은 자유롭게 배치되지만, Stack은 Figma의 Autolayout과 같이 Stack 속의 요소들이 레이아웃에 맞춰 배치된다.

➁ Size

사이즈 조절을 Width값으로 조절해보았다. Fixed/Fill/Fit/Relative로 조절할 수 있으며, Relative의 경우 부모 개체의 퍼센트 영역으로 조절할 수 있는 설정값이다.

Viewport의 경우 Height에만 있는 옵션인데, 화면 크기에 맞춰 영역의 크기가 정해지는 옵션이다. Preview를 통해 확인해보면, 화면 크기에 맞춰져 Viewport를 적용한 박스의 크기가 변화한 것을 확인할 수 있다.

➂ Position

Position은 스크롤 시 위치 옵션으로 인터렉션에서 중요하게 활용되는 속성이다. 기능은 모두 Figma 프로토타입과 유사했다.

다만 용어가 달라 이름을 잘 기억하도록 해야한다. Relative의 경우 부모 개체(현재 Steck 상태의 Desktop)의 레이아웃대로 쌓이는 것이고, Absolute의 경우 레이아웃과 상관없이 원하는 곳에 배치할 수 있는 옵션이다.

Fixed와 Sticky는 Figma와 같고, Sticky의 경우 어디에 붙을지 Top 값을 설정해주어야 한다.

➃ Distribute

Distribute는 Stack 설정 이후 설정할 수 있는 옵션이고 내부 개체 나열 방식을 설정할 수 있다.

➄ Overflow

Overflow는 콘텐츠가 컨테이너를 초과할 때 동작하는 방식을 말하며, Cilp/Hidden/Visible/Scroll 4가지 방식으로 조절이 가능하다. Cilp과 Hidden은 컨테이너 밖으로 나간 콘텐츠는 안보이게하는 것은 똑같지만, Cilp이 다른 스크롤들과 같이 동작됐을 때, 버그가 적고 성능이 좋게 설계된 최신 옵션이라고 한다.

⑥ Card 제작

다양한 Card 옵션을 제작해보며 'Insert'의 다양한 Icons과 Media의 Image 블럭을 사용해볼 수 있었다. Figma보다 좀 더 편리하게 다양한 옵션들을 제작하지 않고도 쉽게 가져다 쓸 수 있는 점이 매우 큰 장점으로 보여졌다.

Image 위에 글자를 배치하고자 하는 경우, Position의 속성을 이용해 Absolute로 지정해주면 Stoke 상태에서도 원하는 자리에 배치할 수 있다.

⑦ Button 컴포넌트

Button은 웹에서 상태를 항상 표시해 주어야하기 때문에 'Hover/Pressed' 상태를 항상 만들어주어야 한다. 이를 위해선 컴포넌트로 제작해주어야 하는데, Framer는 이를 쉽게 제작할 수 있도록 Primary 버튼을 하나 만들어 컴포넌트로 변경해주면 오른쪽으로 + 하여 베리언츠를 제작하고, 아래로 + 하여 Hover와 Pressed 상태의 버튼을 간편하게 제작할 수 있었다.

이렇게 오늘 실습을 통해 기본적인 툴의 기능들을 다뤄보았다. Figma와 대체로 비슷한 부분이 많아 이해하기 좋았고, 더 편리하게 적용할 수 있는 Insert 부분이나 컴포넌트 제작 과정이 인상깊었다. 처음 만난 용어들도 반복해서 사용해보며 Framer에 익숙해질 수 있도록 할 것이다.

[테무 UX 리서치] 4. 개선안 제작

sihyun22 — Mon, 24 Nov 2025 20:02:51 +0900

[Temu 개선을 위한 UX 리서치 프로젝트]

~~사용자 리뷰, 설문조사 분석~~ (완료)

~~사용자 심층 인터뷰~~ (완료)

~~사용자 시나리오 설계를 통한 개선 아이데이션~~ (완료)

개선안 제작

아이디어 우선 순위를 바탕으로 개선 진행

시간 관계 상 전부 개선을 진행하긴 어려워 선정된 아이디어들을 순서대로 진행하였다.

결론적으로 4번 개선안까지 개선을 진행하게 되었다.

➀ 카테고리 개선안

기존의 복잡한 카테고리를 직관적으로 정리하여 사용자가 혼란을 겪지 않고 빠르게 선택할 수 있도록 개선하였다.

좌: 기존 Temu / 우: 개선안

➁ 상품 리스트 개선안

기존의 쇼핑 흐름을 방해하는 할인 광고 팝업을 카드 형태로 상품 리스트 사이에 배치하여 흐름이 끊기지 않게 할인 광고를 확인할 수 있도록 개선하였으며, 상품 리스트 화면의 복잡도를 낮추고 주요 정보를 직관적으로 제공할 수 있도록 화면을 정돈하였다.

기존 Temu 할인 팝업

1번: 기존 Temu / 2,3번: 개선안

➂ 상품 상세 정보 개선안

기존의 원하는 정보를 찾기 어렵다는 문제점을 해결하기 위해 정보의 순서를 사용자 친화적으로 수정하고, 주요 정보들을 먼저 제시해 헤메지 않고 정보를 확인할 수 있는 방향으로 개선하였다.

좌: 기존 Temu / 우: 개선안

개선안 문서화

기존 화면과 개선화면을 "AS IS - TO BE"로 제시하고 설명을 덧붙여 개선안을 정리, 문서화하였다.

디자인 시스템 제작

개선안 UI 화면을 제작할 때 기존 테무와 비슷하도록 파운데이션을 제작하고 화면마다 필요한 컴포넌트를 만들어 활용하며 설계를 진행하였다.

[회고]

이번 프로젝트는 UX 리서치를 통해 디자인 근거를 더욱 탄탄히 설계할 수 있는 경험이었다. 특히 설문조사와 인터뷰를 통해 사용자 목소리를 듣는 과정이 진짜 문제점을 찾는데에 큰 뒷받침이 되주었다. 근거를 탄탄히 설계하는 것은 디자이너 자신에게도 문제점을 충분히 납득할 수 있게 해주어 프로젝트가 좋은 방향으로 진행되게 해주는 것을 체감하였다. 근거 있는 디자인의 힘을 배울 수 있는 프로젝트였다.

[테무 UX 리서치] 3. 사용자 시나리오 설계를 통한 개선 아이데이션

sihyun22 — Fri, 21 Nov 2025 20:27:42 +0900

[Temu 개선을 위한 UX 리서치 프로젝트]

~~사용자 리뷰, 설문조사 분석~~ (완료)

~~사용자 심층 인터뷰~~ (완료)

사용자 시나리오 설계를 통한 개선 아이데이션

인터뷰 인사이트 최종 도출

심층 인터뷰를 통해 발견한 키워드 인사이트를 기반으로 대표 사용자의 특성을 정립하고, 가장 큰 문제점과 그 문제에 대한 원인들을 도출하였다.

'사용자가 상품 탐색에 시간이 길어져 지치고, 결국 구매를 포기하게 되는 점'이 3명의 인터뷰 참여자에게 반복되고, 어플 이탈에 도달하는 것이기 때문에 가장 큰 문제점으로 설정하였다.

페르소나

대표 사용자 특성을 바탕으로 페르소나의 특성을 설정하고, 주요 불편함에 대한 시나리오 설계로 페인포인트와 니즈를 도출했다.

사용자 여정 지도

페르소나의 테무 쇼핑 과정을 시각화하여 탐색 과정에서 주요 불편사항들이 일어난 것을 보여주고, 문제를 정의했다.

HMW Q

현재 테무의 불편함에 대한 문제 정의는 '탐색 과정에서의 불편함들로 탐색 소요 시간이 늘어나고, 점점 지치게 된 사용자는 구매를 포기하게 됨'이므로 개선 방향은 '탐색 과정에서의 불편함을 없애 소요 시간을 줄이고, 빠르게 구매 단계에 도달 할 수 있게 함'으로 설정하였다.

이 개선 방향에 맞춰 불편함들에 대한 HWM Q에 대한 아이데이션을 진행하며 아이디어를 발산하였다.

아이디어 우선 순위 선정

앞서 발산한 아이디어들 중 우선 순위를 선정하여 개선하기 위해 매트릭스를 사용하였다. 기준은 '사용자 가치'와 '리소스 양'으로 두어 사용자 가치가 높으면서 리소스가 적게드는 아이디어를 우선으로 선정했다.

이 우선 순위대로 테무 UI 화면 개선안을 제작할 예정이다.

[회고]

페르소나와 사용자 여정 지도를 통해 사용자 특성을 명확히 하고, 그 사용자가 겪는 불편이 무엇인지, 언제 발생하는지를 명확히 할 수 있어 개선 방향성 설정에 도움이 되었다. 특히 사용자 여정 지도는 시각적으로 사용자의 흐름 중 불편함을 겪는 부분을 직관적으로 확인할 수 있어 다른 사람에게 설명해야 할 때도 큰 도움이 될 것 같다. HMW Q을 통한 아이디어 발산은 질문을 세분화해서 더 명확한 아이디어가 나올 수 있도록 하였는데, 아이디어가 많아지다 보니 어떤 아이디어가 가장 좋을지, 몇개를 진행해야 할지 고민이 들었다. 그래서 불편함이 발생하는 구간별로 아이디어를 묶고(UI 화면별로 그룹화 되었다) 매트릭스를 진행하였다. 그렇게 우선순위가 선정되었는데, 아이디어를 크케 묶어 진행하는 것보다 각 아이디어 하나씩 나열해서 우선순위를 선정하는게 좋았을까 하는 생각도 들었다.

[테무 UX 리서치] 2. 사용자 심층 인터뷰

sihyun22 — Wed, 19 Nov 2025 21:19:58 +0900

[Temu 개선을 위한 UX 리서치 프로젝트]

~~사용자 리뷰, 설문조사 분석~~ (완료)

사용자 심층 인터뷰

인터뷰 목적 설정

사용자 리뷰를 통해 설정한 가설 확인과 설문조사를 통해 발견한 불편함들의 원인을 파악하기 위해 심층 인터뷰를 진행하기로 하였다.

인터뷰 질문 작성

인터뷰 질문은 탐색하고자 하는 주제별로 작성을 하였고, 관련 주제들 끼리 묶어 자연스러운 흐름을 만들고자 하였다.

"테무에서 가장 많이 하는 행동은 무엇인가요?" 라고 첫 질문을 시작했다면 왜 그 행동을 했는지, 그 때의 불편함은 없었는지, 가장 중요하게 고려하는 것은 무엇인지 등 꼬리질문을 계속해서 이어가는 방식으로 구성했다.

인터뷰 진행

인터뷰는 총 3명을 진행했으며, 테무를 사용해본 사용자를 대상으로 진행하였다.

인터뷰는 녹음을 진행해 클로바노트로 문서화 하였다. 진행자가 나 혼자이기 때문에 진행과 동시에 기록이나 타이핑이 어려워 녹음이 필수적으로 필요했다. 클로바노트는 목소리를 구분해서 문서를 만들어주는 점이 편리했고, AI 요약 기능을 통해 주요 내용을 자동으로 생성해볼 수도 있었다.

인터뷰 정리

클로바노트를 통해 문서화된 인터뷰 내용은 엑셀로 옮겨 정리를 진행했다. 인터뷰 내용을 다시 읽어보며 주요 인사이트들을 정리했다.

인터뷰 인사이트 정리

3명의 인터뷰 인사이트를 모아 공통 키워드로 분류해주었다.

2명 이상의 공통 인사이트가 있는 경우 공통 키워드로 묶어서 정리하였다.

공통 키워드는 '사용자 특성'과 '불편함'으로 크게 나누어졌는데, '사용자 특성'의 공통점들은 사용자 유형을 설정할 때 사용하고 '불편함'은 공통적으로 느끼는 불편함이므로 개선 방향 설정에 사용할 예정이다.

인터뷰 정리 중 일부

[회고]

인터뷰를 진행하며 확실히 사용자의 실제 목소리를 들을 수 있는게 얼마나 도움이 되는지 알 수 있었다. 직접 어떤점이 불편한지 사용자의 경험을 근거로 묻고 파악할 수 있는점이 인터뷰의 큰 장점이라는 생각이 들었다. 또 인터뷰를 진행할 때 세워둔 질문 계획대로 흘러가지 않을 때도 있었는데, 꼭 계획한 순서대로 진행하는 것 보다 사용자의 말에 집중하여 파고드는게 더 좋은 답변을 얻을 수 있었다. 그러기 위해선 순서에서 벗어나더라도 꼭 질문해야할 것들을 빠트리지 않기 위해 인터뷰 목적 리스트를 만들어둔 것이 도움이 많이 되었다. 인터뷰는 철저한 준비가 필수적으로 필요하다는 것을 체감했다.

[테무 UX 리서치] 1. 사용자 리뷰, 설문조사 분석

sihyun22 — Mon, 17 Nov 2025 21:10:22 +0900

[Temu 개선을 위한 UX 리서치 프로젝트]

사용자 리뷰, 설문조사 분석

Temu 사용자 흐름 관찰

리서치에 앞서 테무 어플을 직접 사용해보며 사용자 관점으로 흐름을 파악하였다.

사용자 리뷰 분석

Play Store와 App Store의 사용자 리뷰를 분석하였다.

불편함에 대한 내용이 담긴 리뷰를 선별하여 정리하고, 왜 불편했을지에 대한 가설을 세워보았다.

설문조사

사용자 리뷰와 더불어 테무 사용자의 이용 패턴과 주요 불편사항을 수집하기 위해 설문조사를 진행하였다.

질문은 목적에 따라 의도를 설정한 뒤 작성하였고, 총 11명의 응답을 받았다.

이후 설문조사 결과를 분석하며 인사이트를 정리하였다.

사용자 리뷰 & 설문조사 인사이트 취합

사용자 리뷰를 분석하여 도출한 가설과 설문조사를 통해 도출한 인사이트를 취합하여 내용을 정리하였다.

테무 서비스를 사용하는 목적과 사용자의 주요 행동 과정을 확인하였고, 주요 불편함 5가지를 도출할 수 있었다.

이 내용을 바탕으로 가설 검증, 불편함 이유 파악을 위해 심층 인터뷰를 진행할 예정이다.

[회고]

이번 프로젝트에선 UI 개선 근거를 명확히 하기 위해 UX 리서치를 꼼꼼히 진행하고자 하였다.

사용자 리뷰 분석에선 리뷰에서부터 불편함의 원인을 화면 분석을 바탕으로 파악하고자 하며 가설을 세워보았고, 처음으로 진행한 설문조사에서는 사용자의 주요 불편사항을 수집하고자하였다. 이 두가지를 진행하니 어느정도 사용자의 불편함이 파악되는 것을 알게되었다.

또한 이 과정의 인사이트들을 한 번 정리하니, 다음에 진행할 심층 인터뷰의 목적이 어느 정도 잡혀 더 명확한 방향으로 인터뷰를 진행할 수 있을 것 같다.

UX 기획 및 리서치_리서치 결과 정리와 기획 구체화

sihyun22 — Wed, 12 Nov 2025 19:45:02 +0900

[11/11_To Do]

UX/UI 기획 및 리서치 강의 Chepter 3. 어피니티 다이어그램과 유저 페르소나

UX/UI 기획 및 리서치 강의 Chepter 4. UX 기획과 고객 여정 지도

UX/UI 기획 및 리서치 강의 Chepter 5. 사용성 테스트

3-1. 리서치 결과 정리

정리 예시)

3-2. 어피니티 다이어그램

어피니티 다이어그램의 장점

→ 방대한 데이터 사이의 규칙과 연관성을 발견

→ 발견한 내용을 토대로 인사이트를 도출할 수 있음

어피니티 다이어그램 수행 단계

어피니티 다이어그램 노트

- 리서치를 통해 발견한 사실, 정보, 인사이트 등을 노트에 한 문장 단위로 적는다.

- 중복, 잘못된 정보는 제외시킨다.

그룹핑하고 헤더 이름 붙이기

- 연관성, 유사성에 따라 그룹핑하면서 헤어 이름을 붙인다.

- 헤더는 사실을 기반으로 한 구체적인 내용이 담겨야 한다.

토론을 통해 우선순위 논의

- 적은 리소스 대비 큰 유저 임팩트를 낼 수 있는 문제를 우선순위로 매긴다.

<어피니티 다이어그램 주의 사항>

단순 분류에서 그치는 것이 아니라 인사이트를 찾아내는 것이 핵심이기 때문에 3명 이상 참여하는 것을 추천
미리 정해놓은 카테고리에 끼워맞추지 않아야 함

어피니티 다이어그램 예시)

→ 인사이트 도출 : 개선이 필요한 약점 / 강화하면 좋은 강점 발견

→ 이 과정에서 다음 액션 플랜을 짤 수 있고, 제품을 사용하는 유저를 정의할 수 있음

<우선순위 논의 TIP>

ICE Framework 활용

- Impact : 성공하면 임팩트가 얼마나 큰가요?

- Confidence : 성공할 확신을 얼마나 가지고 있나요?

- Ease : 구현하는 데까지 얼마나 걸리나요?

3-3. 유저 페르소나 작성

유저 페르소나란?

: 특정 유저 타입을 대표하는 가상의 인물

<유저 페르소나 작성 시 주의사항>

실제 사람으로 느껴지도록 묘사
대부분의 유저를 대표할 수 있어야 함
여러 페르소나가 있다면 각각이 명확하게 구분되어야 함
의사결정에 영향을 줄 수 있는 인사이트가 포함되어야 함

[실습] 유저 페르소나 작성

외국어 학습 서비스(듀오링고, 링고디어, 캠블리 등)의 유저 페르소나를 작성해보세요.

4-1. UX 기획 첫 단추 : 문제 정의 및 가설 수립

문제 정의

해결해야 할 문제가 무엇인지 정의
문제의 크기를 정량화된 수치로 파악
왜 문제로 정의했는지 충분한 근거가 있어야 함
문제 발생 원인에 대한 근거 데이터를 파악

가설 수립

어떤 변경을 통해 어떤 결과를 얻고자 하는지 가설 설정
가설을 어떻게 검증할 것인지 검증 방법 선정
가설을 검증할 수 있는 올바른 모니터링 지표 설정

4-2. UX 기획 구체화 : 유저 사용 맥락 반영

유저 시나리오 (User Scenario)

: 제품 또는 서비스에 대한 유저 경험을 스토리텔링으로 기술하는 방법

→ 유저의 동기와 목표를 감성적으로 이해하는데에 도움

<유저 시나리오 구성 요소>

유저 : 유저 페르소나
목표 : 무엇을 달성하려고 하나요?
동기 : 왜 달성하려고 하나요?
외부 요소 : 어떤 것에 영향을 받나요?

고객 여정 지도 (Customer Journey Map)

: 제품 또는 서비스를 유저가 이용하는 흐륾을 시각화하여 분석하는 방법

<고객 여정 지도 구성 요소>

유저 페르소나 : 여정을 체험하는 유저
유저 시나리오 : 여정 지도가 다루는 상황 묘사, 유저의 목표와 기대치와 연결
여정 단계 : 타임라인 기반으로 분류
행동 : 유저가 특정 단계에서 취하는 행동
생각 : 유저의 생각, 질문, 동기, 정보에 대한 니즈
감정 : 단계에 걸쳐 단일 선으로 표현
기회 : 유저의 경험을 어떻게 최적화할 수 있는지에 대한 인사이트
(담당 팀이나 부서 : 해당 인사이트를 적용해볼 수 있는 협업자 코멘트)

고객 여정 지도 시각화 방법

유저 스토리 (User Story)

: 특정 기능을 실제 개발 구현 가능한 작은 단위로 기술하는 방법

→ 유저 스토리를 통해 구현할 사항에 대한 구성원 간 합의를 도출

<유저 스토리 구성 요소>

As a (user) : 유저
I want (goal) : 유저가 원하는 기능 또는 행동
So that (benefit) : 이를 통해 유저가 얻을 수 있는 이득

4-3. UX 기획 구체화 : 논리적인 흐름 설계

유저 플로우 (User Flow)

: 유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계

→ 다양한 경로 고려 가능

→ 해피 패스에 매몰되지 않고 다양한 경로 고려 가능

유저 플로우 구성 요소

유저플로우 예시)

와이어 프레임 (Wireframe)

: 화면의 레이아웃과 플로우를 단순한 선과 도형으로 설계하는 과정

→ 신속하게 화면을 그려 커뮤니케이션에 용이

→ 변경되는 요구 사항에 대응하여 수정하기가 용이

정보 구조도 (Information Architecture)

: 제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것

<정보 구조도의 기반이 되는 구성 요소>

Organization(조직 및 구성 시스템) : 정보를 체계적으로 정리하고 구성
Labeling(라벨링 시스템) : 정보를 명확하고 이해하기 쉽게 표현
Navigation(네비게이션 시스템) : 유저가 정보를 찾고 이동
Searching(검색 시스템) : 유저가 원하는 정보를 검색하여 찾기

정보 구조도 예시)

4-4. UX 기획 문서화 : 화면 설계서 및 QA 문서

화면 설계서

: 원활한 히스토리 파악 및 유지 보수를 위해 작성

와이어프레임과 기능 상세 정의를 합친 문서로 화면에 존재하는 각 요소를 분리하여 설명
변경된 내용은 작성일과 함께 기록하여 버전을 관리

QA 문서

: 기능 배포 전에 기능을 테스트하는 과정으로 테크니컬 QA / 디자인 QA로 나뉨

테스니컬 QA : 의도대로 기능이 잘 동작하는지
디자인 QA : 의도대로 디자인이 잘 구현되었는지

[실습] 고객 여정 지도

[조건]

<유저 페르소나>

주요 인적 사항 : 스타트업 데이터 분석가, 32세

니즈 : 추천 상품을 구매하고 싶은 니즈가 있음

페인 포인트 : 복잡하게 이것저것 찾아보는 걸 귀찮아 함

기술 친순도 : 주 2회 이상 커머스를 잘 활용함

관심있는 브랜드 : 무신사, 하이버

<유저 시나리오>

유저 : 30대 직장인 유저

목표 : 카카오톡 선물하기 서비스를 통해 친구에게 생일 선물 보내기

동기 : 추천 상품 중 인기가 많은 5만원 이상 가격대에 있는 선물 중 골라서 성의 있는 선물을 전하고 싶음

외부 요소 : 야근을 하느라 단톡방을 보지 못해 친구의 생일을 뒤늦게 앎, 저녁 11시 30분인 지금 얼른 선물을 보내고자 함

유저 페르소나의 여정 지도를 작성해보세요.

5-1. 사용성 테스트의 개념과 중요성

사용성 테스트(Usability Test: UT)

: 의도한 시나리오에 따라 테스크를 수행하는지, 문제점은 없는지 관찰하기 위해 진행

→ 프로토타입이 있다면 제품 단계 중 언제든 활용할 수 있음

사용성 테스트의 중요성

→ 우리는 사용자가 아니기 때문. 프로젝트에 대해 편향 없이 확인할 수 있기 위해

5-2. 사용성 테스트 준비

<사용성 테스트의 구성 요소>

진행자 (Moderator)
테스크 (Task)
참가자 (Participant)
관찰자 (Observer)

사용성 테스트 준비하기

테스크란 유저에게 주어지는 미션같은 것으로 수행 가능한 현실적인 것으로 선정
파일럿 테스트를 진행하여 현장 변수를 미리 확인하고 질문 관련 피드백을 받아볼 수 있음

사용성 테스트 시나리오 예시)

5-3. 사용성 테스트 실행

사용성 테스트 실행 과정

테스크를 수행할 때 자신의 생각과 감정을 말로 표현해 줄 것을 요청
사후 인터뷰에서 이용 만족도를 측정
사후 인터뷰는 각 테스크가 종료된 직후에 진행

Think Aloud

: 테스크를 수행하면서 머릿속에 어떤 생각이 드는 지 말로 표현하도록 하는 방법

유저가 메뉴나 버튼, 아이콘을 클릭한 의도
어떤 행동을 했을 때 기대하는 결과값
테스크 수행 중 유저가 겪는 어려움
테스크 수행 중 유저가 실수를 한 이유

→ 유저의 실제 의도와 인지 과정을 이해하고 설계에 반영할 수 있다는 장점

참가자가 질문을 할 때 최대한 답변을 주지 않아야 함
참가자가 실수를 한다고해서 힌트를 주거나 고치려고 하지 말아야 함
"왜 그렇게 생각하세요?", "어떻게 해야할 것 같으세요?"등의 열린 질문으로 참가자의 생각을 파악

5-4. 사용성 테스트 결과 정리

문제점 도출 → 원인 도출 → 개선 방향 도출

<우선순위 논의 Tip>

테스크 수행 후 참가자의 이용 만족도 측정
참가자의 테스크 성공/실패 여부를 측정
참가자가 테스크를 쉽게 달성할 수 있었는지 측정

5-5. 제이콥 닐슨의 휴리스틱 평가 방법

휴리스틱 평가 (Heuristic Evaluation)

: 전문가가 인터페이스를 검토하여 사용자 인터페이스의 문제점을 발견하는 방법

제이콥 닐슨의 10가지 휴리스틱 평가 항목

[실습] 테스크 선정

[조건]

- 커머스 서비스 회원가입 과정의 사용성 테스트에서 참여자가 수행할 테스크를 선정해보세요.

- 목적: 신규 가입 유저가 회원가입을 할 때 겪는 문제점을 찾아내고자 함

- 신규 가입 유저가 로그인/회원가입을 할 때 겪는 문제점을 찾아내고자 함

1. 이메일 아이디로 회원가입을 진행해보세요.

- 이메일 아이디 조건 인지 확인

2. 입력한 이메일의 인증을 진행해보세요.

- 이메일 인증 흐름 확인

- 앱 전환 시 오류 확인

3. 나머지 회원가입에 필요한 정보(비밀번호, 닉네임)를 입력해주세요.

- 비밀번호 조건 인지 확인

- 닉네임 조건 인지 확인

4. 약관 동의와 마케팅 수신 여부를 진행해주세요.

- 약관 동의 필수/선택 항목 구분 확인

5. 회원가입이 정상적으로 완료되었는지 확인해주세요.

- 회원가입 후 행동 확인

6. 카카오로 소셜 로그인을 진행해보세요.

- 소셜 로그인 흐름 확인

7. 비밀번호 변경을 진행해보세요.

- 비밀번호 변경 흐름 확인

[To Day_회고]

리서치를 잘 정리할 수 있도록 도와주는 방법들과 UX 기획을 구체화하는 방법들을 알아보았다. UX 프로젝트에서 쉽게 찾아볼 수 있는 페르소나, 정보구조도, 사용자 여정등을 제작하는 방법을 더욱 확실히 배울 수 있었고, 사용성 테스트와 같이 실무에서 자주 사용되는 방법을 파악할 수 있었다. 이번 실습에서는 페르소나와 사용자 여정을 직접 그려보며 시각화도 진행해볼 수 있어 도움이 되었다.

UX 기획 및 리서치_디자인 프로세스와 유저 리서치

sihyun22 — Tue, 11 Nov 2025 20:31:30 +0900

[11/11_To Do]

UX/UI 기획 및 리서치 강의 Chepter 1. UX/UI 디자인 프로세스

UX/UI 기획 및 리서치 강의 Chepter 2. 유저 리서치

1-3. UX/UI 디자인 프로세스

더블 다이아몬드 모형

< ➀ 해결해야 할 문제 찾기 >

1. 발견(Discover) 단계

무엇이 문제인지 발견, 이해하는 단계
유저 리서치( 데스크 리서치, 필드 리서치)

2. 정의(Define) 단계

집중할 문제가 무엇인지 정의하는 단계
어피니티 다이어그램, 유저 페르소나

< ➁ 해결책 찾기 >

3. 발전(Develop) 단계

문제 해결을 위한 아이데이션 진행 단계
정보구조도, 와이어프레임

4. 전달(Deliver) 단계

디자인을 구현하여 유저에게 제공하는 단계
프로토타입, 사용성 테스트

더블 다이아몬드 모형의 4가지 핵심 원칙

1-4. Lean UX와 MVP

Lean UX 프로세스

유저 피드백을 데이터로 측정하고 반복적으로 디자인과 기능을 개선하는 과정을 거쳐 더 나은 유저 경험을 제공하는 프로세스

MVP

최소한의 리소스로 앞으로 더 많은 자원을 투자할 가치가 있을 지 판단할 수 있음

MVP 1 : 바퀴에 판을 덧댄 이동 수단 → (유저 피드백)

MVP 2 : 손잡이를 더한 이동 수단 → (유저 피드백)

MVP 3 : 바퀴 크기를 키운 이동 수단 → (유저 피드백)

MVP 4 : 모터를 단 이동 수단 → (유저 피드백)

MVP 5 : 문을 여닫을 수 있는 이동 수단

1-5. 데이터 드리분 UX 트렌드

데이터 드리븐 UX 등장 배경

→ 데이터 드릴븐 UX를 통해 빠르게 변화하는 시장에서 효율적으로 제품을 개선할 수 있음

데이터 드리븐 UX 중요성

→ 디자이너가 홀로 작업할 때 뿐만 아니라 협업 할 때, 그리고 산출불의 임팩트를 측정할 때에도 중요한 역할을 함

디자이너 관점

: 유저 데이터의 해석을 바탕으로 디자인 산출물에 대한 논리적인 근거 제공

커뮤니케이션 관점

: 데이터는 타 조직과 원활한 의사소통을 돕는 공용어 역할

비즈니스 관점

: 디자인 산출물이 비지니스에 얼마나 기여하는지 파악

데이터 드리븐 UX에서 활용되는 지표 예시

유저 관여도 관점 (Engagement)
- 얼마나 많이 이용하는가? - DAU, WAU, MAU
- 얼마나 자주 이용하는가? - DAU/MAU, DAU/WAU
유저 재방문 관점 (Retention)
- 특정한 특성의 유저들이 재방문하는가? - 코호토 리텐션
- N일째 된 유저들이 재방문하는가? - Day N 리텐션
유저 획득 관점 (Acquisition)
- 얼마나 보는가? - 페이지 뷰 수, 클릭 뷰 수
- 얼마나 획득되는가? - 전환율, 이탈율

예시) 각 기업의 A/B 테스트 사례 사이트

goodui.org, https://www.abtestcases.com

1-6. 실무 UX/UI 용어

디자인 관련 용어

인지 심리 관련 용어

개발 관련 용어

서버 (Sever)

: 정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공함

클라이언트 (Client)

: 서버로부터 정보를 요청하고 받아오는 디바이스나 소프트웨어로, 웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분을 가리킴

접근성 (Accessibility)

: 모든 유저, 포괄적으로 장애가 있는 유저를 포함하여, 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것을 의미함

API(Applicatin Programming Interface)

: 서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로, 데이터를 교환하거나 서비스를 활용할 수 있도록 하는 프로그래밍 규칙과 도구의 집합

CMS (Content Management System)

: 웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼

오픈 소스 (Open Source)

: 소프트웨어 또는 프로젝트가 무료로 공개되며, 누구나 소스 코드를 확인하고 수정할 수 있는 개발 방식

디버깅 (Debugging)

: 소프트웨어 오류를 찾고 수정하는 프로세스로, 프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정

[실습] 데이터 기반 UX 개선 사례 3가지

문제 정의

: 문제를 어떻게 발견했고, 원인은 무엇이었나요?

가설 수립

: 어떤 가설을 세웠나요?

해결 방법

: 문제를 어떻게 해결했나요?

검증 과정

: 가설을 검증하기 위해 어떤 방법을 활용했고, 어떤 지표를 모니터링 했나요?

결과

: 어떤 임팩트가 있었나요?

사례 #1. 네이버 (출처 )

문제 정의)

홈피드에 대한 테스트를 꾸준히 진행한 결과, 홈 피드에서의 체류시간이 늘어나면 클릭 수, 광고 매출 등이 상승한다. 이를 바탕으로 홈 피드의 체류시간을 늘리는 방법이 필요하다.

가설 수립)

"홈피드에 개인 맞춤화 콘텐츠를 제공하면 체류시간이 늘어날 것이다." 가설 설정

해결 방법)

홈피드에 사용자의 구독 정보, 검색 이력, 문서 소비 이력을 바탕으로 개인 맞춤화 콘텐츠를 추천, 더불어 추천된 이유를 함께 제시하는 UI로 사용자가 신뢰를 가지며 피드에 머무를 수 있도록 함

검증 과정)

피드 체류시간 데이터와 클릭 수, 광고 매출 증가율을 모니터링

결과)

체류시간이 늘어나는 효과를 보았고, 맞춤형 추천 시스템으로 사용자의 경험을 향상, 플랫폼에 대한 충성도를 높이는 데에 기여했다.

사례 #2. 우리카드 간편 결제 어플 '우리 WON페이' (출처 )

문제 정의)

간편결제 서비스 사용자가 지속적으로 늘어남에 따라 우리 카드의 경쟁력 강화 필요

가설 수립)

"쉽고, 편리하며 빠른 결제 경험이 경쟁력이 될 것이다."

해결 방법)

'우리페이'를 '우리 WON페이'로 리뉴얼하는 과정을 통해 페이에 진입하는 순간 바로 결제 준비가 완료되는 UX/UI 제작

검증 과정)

하루 평균 간편결제 이용 금액 증가율 모니터링

결과)

결제 단계 축소와 페이 실행 속도 개선으로 고객의 편의성을 높였으며 이는 경쟁력 강화에 도움이 됨

사례 #3. KB알다 어플 리뉴얼 ( 출처)

문제 정의)

사용자는 홈 화면에서 나에게 맞는 대출을 쉽고 빠르게 찾을 수 없다.

가설 수립)

"사용자는 홈 화면에서 나에게 맞는 대출을 쉽고 빠르게 찾을 수 없다."

→ " 홈에서 다른 기능을 덜어내고 [대출비교]를 강조하면, 사용자는 나에게 맞는 대출을 쉽고 빠르게 찾을 수 있을 것이다."

해결 방법)

온보딩 화면을 통해 회원가입 후 대출비교로 이동할 수 있는 페이지를 구성

온보딩 페이지는 하나 늘어났지만, 오히려 대출 비교로 이동하는 스텝은 줄어든 셈

홈 화면 또한 캐러셀 형태로 수정하여 핵심 기능에 주목할 수 있게 리뉴얼

검증 과정)

홈에서 사용자 이동 경로 추적, 지속적인 사용자 관찰 및 추적

+ 동시에 진행한 대출관리 부분 리뉴얼에선 UT를 진행하여 검증

결과)

홈에서 대출비교 기능으로 진입하는 전환율 약 15% 증가

2-1. 유저 리서치의 중요성

유저에 대한 이해도 강화

→ 유저의 행동과 동기를 파악 가능

→ 해결해야 할 새로운 문제를 발견될 수 있음

효율적인 커뮤니케이션 도구

→ 의사 결정의 근거를 마련할 수 있음

→ 사전에 문제를 미리 발견하고 수정 비용을 절감할 수 있음

2-2. 리서치 종류와 목적

유저 리서치 종류

정성적 리서치

유저의 생각, 의견, 감정 이해. "왜(Why)"에 대한 심층적인 인사이트를 얻는 것이 목적
심층 인터뷰, 포커스 그룹, voC 분석
소수 유저를 대상으로 하기 때문에 모든 유저를 대표하기 어려움

정량적 리서치

유저의 행동 기반의 통계 데이터를 분석하여 "무엇(What)"과 얼마나(How much/many)"에 대한 답을 얻는 것이 목적
설문조사, A/B 테스트, 애널리틱스
왜(Why)에 대한 근본적인 원인을 파악하기는 어려움

2-3. 데스크 리서치 : 마켓 리서치, 경쟁사 분석

마켓 리서치

시장 구모 및 성장 동향
수익 구조
법적 제약

예시) 소셜 데이팅 서비스

경쟁사 분석

경쟁사 선정
- 직접 경쟁사 : 자사 서비스와 동일한 산업군에서 유사한 가격대로 형성되어 있는 서비스
- 간접 경쟁사 : 자사 서비스를 대체하여 사용될 가능성이 있는 모든 서비스
SWOT 분석
- 서비스의 강점(Strength), 약점(Weakness), 기회(Opportunity), 위험(Threat)을 파악하는 분석 도구
포지셔닝 맵핑
- 경쟁사와 자사 서비스가 유저 인식 속에서 차지하는 고유한 위치를 시각적으로 나타내는 분석 도구

예시) OTT 서비스

2-4. 정성적 리서치 : 심층 인터뷰, 포커스 그룹, VoC 분석

심층 인터뷰

1:1로 유저에게 질문하고 답변을 들으면서, 특정 주제에 대한 깊이 있는 인사이트를 얻는 리서치 방법

<심층 인터뷰 준비하기>

→ 5명 정도 인터뷰 하는 것을 추천

→ 파일럿 인터뷰를 통해 인터뷰 예행 연습을 해보는 것을 추천

인터뷰 목적 설정

: 어떤 정보를 수집하고자 하는지 목적을 명확히 정의하는 것이 중요

대상자 선정

: 어떤 그룹의 유저를 인터뷰하는 것이 인터뷰 목적에 부합하는지 고려

리크루팅

: 인터뷰 목적, 방식, 일정, 보상 등에 대한 정보가 포함된 공지

질문지 작성

: 아이스 브레이킹 질문 → 답을 바로 떠올릴 수 있는 질문 → 고민이 필요한 질문

심층 인터뷰 질문지 예시)

포커스 그룹

유사한 경험을 가진 6~9명의 유저를 모더레이터가 동시에 인터뷰하는 방식
참가자들이 서로 답변을 발전시키거나 경험을 더 자세히 떠올릴 수 있음
다만 특정 참가자에게 의견이 앵커링되는 것을 경계해야 함

VoC 분석

고객 센터, 앱스토어 리뷰 등을 수집하여 분석하는 방식

2-5. 정량적 리서치 : 설문조사, A/B 테스트, 애널리틱스

설문조사

구조화된 질문과 답변 옵션을 통해 유저의 전반적인 경향을 파악하는 방법

<설문지 문항 작성 시 주의사항>

5분 이내의 분량으로 조절하는 것이 적절
선택지가 많은 경우 순서를 무작위로 설정하여 순서 효과를 감소
기술어나 전문용어 사용을 피하되, 불가피한 경우 정의나 예시를 함께 표시
질문자의 의도가 드러나거나 한쪽으로 유도하는 질문은 피해야 함
한 질문에서는 하나만 물어봐야 함

A/B 테스트

하나의 웹 페이지를 2개 이상의 옵션으로 나누어 유저에게 동시에 보여주며 어느 쪽이 더 효과적인지 비교하는 방법

동일한 기간에 진행되어야 함
하나의 변인에 대해서만 테스트를 진행해야 함
충분한 모수가 확보되는 기간을 고려하여 테스트 기간을 설정해야 함

애널리틱스

웹이나 앱이서 얻은 페이지뷰, 바운스율, 전환율 등의 데이터를 통합하여 분석하는 리서치 방법

<애널리틱스 주의사항>

특정 이벤트, 계절, 휴가 기간 등의 외부적인 이슈 고려하여 분석
상관 관계를 발견했다고 해서 반드시 인과관계가 성립하는 것은 아님
조직 내에 중요하게 고려하는 지표들과 해당 용어에 대한 얼라인 필요

[실습] 심층 인터뷰 질문 작성하기

구인구직 서비스를 사용하는 취준생 유저가 서비스를 사용하면서 겪는 문제를 파악하기 위한 심층 인터뷰 질문 작성

인터뷰 목적)

구인구직 서비스 유저에 대한 이해

아이스브레이킹 질문)

- 오시는 길은 힘드시지 않으셨나요?

답을 바로 떠올릴 수 있는 질문)

- 보통 언제 어플을 사용하시나요?

- 가장 최근에 어플을 사용하셨을 땐 언제이신가요?

- 가장 많이 사용하신 기능은 어떤 부분인가요?

고민이 필요한 질문)

- 어플을 사용하시게 된 계기가 있으실까요?

- 어플 이외에 다른 경로로 구인구직을 하신 경험이 있으실까요?

- 어플에서 구인구직을 할 때 편하거나 불편했던 점이 있다면 말씀해주세요

마무리 질문)

- 오늘 진행한 인터뷰와 관련하여 덧붙이고 싶은 의견이 있다면 알려주세요

[To Day_회고]

팀 프로젝트가 끝난 직후라 오늘 학습한 UX/UI 프로세스를 프로젝트에서 사용했더라면 더 시간이 단축되고 효율적으로 진행해 나갈 수 있었을거란 생각이 들었다. 또 데이터를 기반으로 UX를 개선하는 과정이 매우 논리적이라는 생각이 들었다. 실제 기업에선 사용자의 데이터를 가지고 있으니 좀 더 명확한 문제와 방향으로 개선을 해나갈 수 있을 것 같다. 하지만 우리는 데이터가 없으니 유저 리서치를 통해 이를 메꿔야하는데, 그냥 유저 리서치를 진행하는게 아니라 목표와 알고자 하는 부분을 명확히 설정하는게 중요하다는 것을 다시 한 번 확인할 수 있었다. 다음 프로젝트에선 설문조사와 심층 인터뷰를 꼭 진행해보고 싶다.