본문 바로가기

대외활동_스파르타클럽 UXUI 디자이너 10기

[내일배움캠프] 포폴 검수받고 이리저리 푸닥거리기 Day

 

0. 오늘의 노래

 

 티스토리 스킨 조정!

 우측 하단에 플레이어를 추가했답니다😘 크리스마스 D-22 기념~


1. 오늘 학습 키워드

 

  오전 학습 목표 (~14시) 오후 학습 목표 (~19시) 저녁 학습 목표 (~21시)
손민정 ✅ 디자인 카타 진행
컴포넌트 제작(30%)
튜터님&멘토님께  DM 돌리기
⬛ 컴포넌트 제작(45%)
✅ 5주차 과제 제출
✅ TIL 작성(~20:50)
⬛ 컴포넌트 제작(50%)


 컴포넌트 제작은 오후에 이르러서야 30%를 달성했다. 시간 내 완수하지 못했으니 우선은 blank box로.


2. 오늘 학습 한 내용을 나만의 언어로 정리하기

09:00~

 하루의 시작, 디자인 카타.

 오늘의 주제는 팀원 분께서 추천해 주신 것으로 진행했다. 

 작성하다 보면 새삼 느끼게 된다. 아래 적힌 주옥같은 댓글들을..ㅋㅋㅋㅋ

맞긴해

 

액자식 구성. 

 작성하는 데 주관적인 생각이 꽤 들어가기도 했다.

 

 

 9to9 수업을 시작하기 전, 매일같이 강아지 산책을 시킬 때는 나도 토스 만보기 어플을 꽤 애용했었다. 

이런 구조다.

 하루에 최소 2천~4천보씩 걷는 사람에게는 빠지면 섭섭한 이벤트였으니까!

 작성하며 근거를 찾던 중 어제 AI 특강에서 공유받은 Perplexity 사이트를 사용해 봤다. 

더보기

 만들고자 하는 것이 무엇인지에 따라 다를 듯 하다. 다이어트를 위해 걷기, 달리기 등의 운동을 독려하는 서비스라면 A안이, 최종적인 목표는 건강일지언정 우선 제공하는 기능이 ‘걸음 수 확인’인 만보기 서비스라면 B안이 선호되지 않을까. 선물 상자를 열었더니 예상치 못한 물건이 들어있으면 당황하듯 어플이 표방하는 서비스와 다른 내용의 서비스가 제공된다면 당황하지 않을 사용자는 적을 것이다.

 

마케팅 내용에 따라 다르겠지만, 우선 A안에는 걸음 수를 확인하는 기능 자체가 부재한 것으로 보인다. 여기서 초반의 주제의식을 되찾아 ‘아, 우리 만보기 앱이었지?’ 라 되새긴 기획자가 탭이나 슬라이드 등으로 걸음 수 확인 기능을 넣어두면 또 모를까.

 

A안이 실제로 걷기를 독려하는지도 미지수다. 리서치 결과 앱테크 목적이 아닌 건강 유지를 주 목표로 내세운 대부분의 어플들 또한 B안을 사용하고 있다. 예시는 다음과 같다.

 

ㅇㅖㅅㅣㄷㅡㄹ

 물론 소요 칼로리 또한 동기가 될 수는 있다. 말 그대로, ‘될 수는 있다.’ 대부분의 사용자는 칼로리 계산에 해박하지 않다. 숫자와 불꽃 아이콘 따위로 치장한 해당 요소는 그저 숫자가 올라갈수록 성취감을 주는 요소 중의 하나일 뿐이고, A안과 같이 커피 한 잔, 크림빵, 과자 한 봉지와 같이 걷기로 소비한 칼로리를 보여주는 행위는 사용자에게 오히려 허탈감을 안겨 줄 수 있다.  🔗

 

+너무 길어서 댓글로 모아 둔 텍스트💬

 다이어트를 원하는 사용자라면 만보기 기능, 식단일기 기능 등 다양한 기능이 있는 한 가지 어플을 희망할 것이고, 단순 ‘만보기’ 앱이라면 사용자의 나잇대가 증가할 것이라는 추측 또한 존재한다. 그렇다면 해당 사용자들에게는 칼로리 등이 아닌 직관적인 숫자와 남은 목표 걸음수로 표기되는 B안이 더욱 선호될 것이다.

 


여긴 펄플렉시티? 사용한 기록!

더보기

만보기 앱의 UI가 달라지면 사용자의 이해도, 동기부여, 유지율(재방문·지속 사용)에 직접적인 영향을 주기 때문에 효용성이 크게 달라집니다.smoothwork.tistory+1

어떤 UI 요소가 효용을 가르는가

  • 한눈에 보이는 정보 구조: 오늘 걸음 수, 목표 대비 달성률, 칼로리·이동거리 같은 핵심 정보가 첫 화면에 명확하게 배치될수록 사용자는 “지금 얼마나 걸었는지”를 즉시 파악하고 행동을 조정하기 쉽습니다.naver+1
  • 시각화와 메타포: 단순 숫자 대신 게이지, 막대그래프, 달력, 음식·코인 등 직관적인 비유를 쓰면 운동량의 의미가 잘 전달되어 동기부여 효용이 커집니다.y0ung-zip.tistory+1

동기부여 관점 효용성

  • 게이미피케이션: 포인트, 복권, 뱃지, 챌린지, 캐릭터 같은 UI 요소를 전면에 배치하면 ‘게임하는 느낌’을 주어 재방문과 장기 사용을 유도하는 데 효과적입니다.brunch+1
  • 피드백 빈도와 방식: 오늘 성과(당일 걸음), 누적 통계(주·월 그래프), 비교 정보(평균 대비, 지난주 대비 등)를 어떻게 보여주는지에 따라 성취감·위기의식이 달라져 운동 지속률이 달라집니다.smoothwork.tistory+1

정보 중심형 vs 재미 중심형 UI

관점정보 중심형 UI재미·게임 중심형 UI
핵심 목표 정확한 기록·관리naver 재방문·참여 유도brunch+1
첫 화면 구성 걸음 수·시간·칼로리 등 수치 강조brunch+1 그래픽, 캐릭터, 포인트·복권 영역 강조brunch+1
통계 제공 주·월 그래프, 캘린더로 세밀한 기록smoothwork.tistory+1 단순화된 통계 + 보상/이벤트 UIbrunch+1
주 사용 상황 건강관리 의지가 강한 사용자 앱테크·가벼운 동기, 재미 위주 사용자
 
 

UI 차이에 따른 사용성·비즈니스 효용

  • 사용성 측면: 정보 구조가 직관적이고 패턴(예: 좌우 스와이프 방향, 하단 내비 등)이 일반적인 앱 문법을 따를수록 학습 비용이 낮아지고, 그렇지 않으면 혼란과 이탈이 늘어납니다.naver+1
  • 비즈니스 측면: 만보기 UI를 메인 페이지 진입 동선과 자연스럽게 연결하면 앱 전체 체류 시간과 다른 서비스(결제, 금융, 커뮤니티 등) 전환율을 높이는 장치로 활용할 수 있습니다.phalanx-club.tistory+2

상황별 UI 설계·평가 팁

  • “건강관리 효용”이 목표일 때
    • 오늘 목표 달성률, 칼로리, 주·월 통계를 상단·첫 화면에 두고, 비교·추이 그래프를 명확히 시각화된 UI가 더 유리합니다.naver+1
  • “재방문·앱테크 효용”이 목표일 때
    • 포인트, 복권, 챌린지 입구를 눈에 잘 띄는 위치에 두고, 매일 변하는 요소(오늘 보상, 오늘 미션 등)를 강조하는 UI가 효과적입니다.brunch+2

원하시면 토스·캐시워크·발로소득 같은 특정 앱을 예로 들어, UI 스크린별로 효용 차이를 더 구체적으로 정리해 줄 수 있습니다.y0ung-zip.tistory+1

  1. https://smoothwork.tistory.com/79
  2. https://brunch.co.kr/@dldydwo815/54
  3. https://brunch.co.kr/@@6Sl1/108
  4. https://blog.naver.com/badpark/223455465607
  5. https://y0ung-zip.tistory.com/34
  6. https://www.elancer.co.kr/blog/detail/293
  7. https://www.dbpia.co.kr/journal/articleDetail?nodeId=NODE11889656
  8. https://phalanx-club.tistory.com/2141
  9. https://blog.naver.com/withrami/221994391797
  10. https://koreascience.kr/article/JAKO202413864491270.pdf

 

만보기 UI A/B 테스트는 “어떤 UI가 더 많이 걷게 만들고 더 자주 돌아오게 하는가”를 검증하는 실험입니다. 아래 절차와 샘플 크기(표본 수) 설계 포인트만 정리해두면 실무에서 바로 적용할 수 있습니다.kimsam4u.tistory+2

기본 설계 절차

  1. 목표·지표 정의
    • 예: 첫 방문 후 7일 내 재방문율, 일 평균 걸음 수 달성률, 만보기 화면 진입 비율, 리워드 수령 전환율 등 하나의 핵심 KPI를 먼저 정합니다.velog+1
    • KPI 외에 “악화되면 안 되는 가드레일 지표(이탈률, 오류율 등)”도 함께 확인하도록 설계합니다.velog
  2. 가설 수립·변수 최소화
    • “보상이 더 잘 보이는 B UI가 A보다 7일 재방문율을 3%p 이상 올릴 것이다”처럼 구체적인 가설을 세웁니다.ranktracker+1
    • A와 B의 차이는 한두 가지 요소(예: 카드 레이아웃 vs 리스트, CTA 버튼 위치)만 두고 나머지 조건은 동일하게 유지해야 원인을 명확히 할 수 있습니다.beusable+1
  3. 실험 대상·랜덤 배정
    • 실험 대상: 신규/기존 유저, 특정 OS, 특정 국가 등 테스트 대상군을 먼저 확정합니다.ab180+1
    • 무작위 배정: 유입 시점에 A/B로 랜덤 1/n 분배(보통 50:50)를 하되, 동일 유저는 항상 같은 버전을 보도록 고정합니다.kimsam4u.tistory+1
  4. 기간·운영
    • 최소 한 번의 “비즈니스 주기”(예: 1주 또는 2주)를 커버할 수 있도록 기간을 잡고, 통계적으로 의미 있는 샘플이 모일 때까지 테스트를 중단하지 않습니다.sseozytank.tistory+1
    • 실험 중에는 UI 이외 다른 큰 변경(프로모션, 정책, 버그 수정 등)을 최소화해 외생 변수 영향을 줄입니다.sseozytank.tistory
  5. 분석·결정
    • 사전에 정한 신뢰수준(대개 95%)과 통계적 검정 방법(이항 전환율이면 z-test, t-test 등)을 정해 두고, 실험 종료 후 유의한 차이가 있는지 판단합니다.ranktracker+1
    • KPI 개선 폭이 적더라도 구현·운영 비용까지 고려해 “실제 롤아웃 가치”를 함께 판단합니다.mfitlab

샘플 크기 설계 핵심

샘플 크기는 “기존 성과 수준 + 최소 감지 효과 + 신뢰수준·검정력” 네 가지가 핵심입니다.kimsam4u.tistory+1

  • 필요한 입력 값
    • 기존 전환율: 예) 현재 만보기 진입 비율 20%, 7일 재방문율 30% 등.velog
    • 최소 감지 효과(MDE): “이 정도는 차이가 나야 의미 있다”라고 보는 최소 개선 폭(예: +2%p).velog
    • 신뢰수준·검정력: 보통 95% 신뢰수준, 80% 검정력을 기본값으로 둡니다.ranktracker+1
  • 실무적인 기준선
    • 각 그룹(A, B) 별 최소 n≈30 이상이면 기초적인 통계 검정이 가능하지만, 실제 서비스에서는 수백~수천 단위가 되어야 안정적인 결과를 얻습니다.sseozytank.tistory+1
    • 트래픽이 적은 만보기(초기 앱 등)는 전 유입의 거의 100%를 실험에 포함시키고, 실험 기간을 충분히 늘려 필요한 샘플을 채우는 전략을 씁니다.naver+1
  • 계산 방법
    • 직접 공식으로 계산하기보다는 Optimizely, AB Tasty 등에서 제공하는 온라인 샘플 사이즈 계산기를 활용해 기존 전환율·MDE·신뢰수준·검정력을 넣고 그룹 당 필요 인원을 산출하는 방식이 실무에서 일반적입니다.brunch+2

만보기 UI 맥락에서의 지표·샘플 설계 예

항목예시 설정
핵심 KPI 만보기 탭 진입 비율, 일 5,000보 이상 달성률, 7일 재방문율 등 하나 선택kimsam4u.tistory+1
기존 값 가정 현재 7일 재방문율 30%velog
MDE +3%p(30% → 33%) 이상일 때만 의미 있다고 가정velog+1
신뢰·검정력 95% 신뢰수준, 80% 검정력ranktracker+1
샘플 배분 유저 50:50 랜덤 배정, 각 그룹 동일 기간 수집beusable+1
 
 

이 입력값을 온라인 계산기에 넣으면 그룹당 필요한 유저 수가 나오며, 이를 일일 활성 사용자(DAU)와 나누어 필요한 실험 기간을 역산해 일정과 릴리즈 계획을 잡을 수 있습니다.brunch+2

원하시면 “보상 강조형 vs 운동 정보 강조형”처럼 구체적인 만보기 UI 시안을 가정해, 어떤 지표·샘플 전략이 더 적합한지 예시 숫자까지 넣어 계산 흐름을 같이 잡아줄 수 있습니다.kimsam4u.tistory+1

  1. https://kimsam4u.tistory.com/entry/AB-%ED%85%8C%EC%8A%A4%ED%8A%B81
  2. https://www.beusable.net/blog/?p=2854
  3. https://brunch.co.kr/@beusable/89
  4. https://www.ranktracker.com/ko/blog/ab-testing-in-ui-ux-design-the-complete-guide/
  5. https://www.mfitlab.com/solutions/blog/abtest-fail-reason
  6. https://blog.naver.com/lovemesd2/222992185720
  7. https://seo.tbwakorea.com/blog/what-is-abtest-for-seo/
  8. https://velog.io/@yujin_jeong/AB-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%84%88-%EB%88%84%EA%B5%B0%EB%8D%B0-13bkcbei
  9. https://sseozytank.tistory.com/44
  10. https://blog.ab180.co/posts/design-effective-abtesting-tips

 

~13:00

 그리고 오전의 주요 할 일!!

 컴포넌트 제작!!!은 뒷전으로 미뤄 두고...DM 돌리기를 했다. 어제 강의를 진행해 주셨던 멘토님께서 강의 마지막에 포폴 공유/확인도 해 줄 수 있으니 인스타 디엠이나 링크드인 메세지로 연락줘도 좋다고 하셨고, 어제 튜터님과 컴포넌트 관련으로 대화하던 중 포폴 관련한 얘기도 나눴었어서.

 혼자서 이것저것 하는 건 끝나고 나서도 할 수 있고 내가 제일 원했던 건 전문가/인사담당자로서의 시각이었으니 이 쪽을 더 중시하기로 해 기존의 포폴을 정리했다. 겸사겸사 예전부터 생각했던 것들도 같이. 디자인 관련 타임라인 구성을 위한 디자인용 인스타 계정(@smgjy1999)을 만들었고, 포폴 목차를 정리해 하이라이트처럼 올려두었다. 이후 정리한 걸 첨부해 각각 인스타와 슬랙 DM으로 공유드렸고.

더보기

01. 최근 제작한 포폴에서 개선점이나 부족한 점이 어떻게 될까요?
제가 생각하는 부족한 점은 우선 내용을 구성하는 프로젝트 완성도가 떨어지는 점과 진행한 프로젝트의 내용을 다 욱여넣었다는 점인데, 팀 프로젝트의 경우 제가 손대지 않은 부분을 빼면 내용이 너무 부실해지는 것 같더라구요..추천하시는 개선 방향이 궁금합니다!

 

먼저 현재 포폴을 아주 간단히 정리해보면,
  • 커버는 “웹디자이너 손민정”
  • 프로필은 치위생과 → 다양한 과정 → 인턴 경험 흐름
  • 인덱스는 콘텐츠 디자인 → 브랜드 디자인(댕즈오즈) → UX/UI 분석(마이루틴) → 그래픽 디자인
이렇게 보여서, 지금 포폴의 전체 톤은
“콘텐츠/브랜드 디자이너인데 UXUI도 조금 곁들인 상태”
로 읽혀요.
경험을 다 녹이는 건 좋은데, 지금은 메인 메시지가 흐려질 위험이 있어서 전략적으로 다듬는 게 좋아요.현재 기준으로 말씀드리면 아쉬운점은
  • 메인 포지션 메시지가 약해요. 지금 구성은 민정님은 웹디자이너인데 콘텐츠랑 그래픽을 메인으로 했고 uxui도 조금 경험해봄. 이런 느낌이거든요. 앞으로 포지션을 uxui 디자이너로 가져가고 싶으면 포폴 상에 이부분이 더 앞에서 비중있게 나와야되요.
  • 프로젝트들 중에 어떤게 메인 프로젝트인지가 잘 안들어나요. 모든 프로젝트가 비슷한 무게감으로 느껴져요.
  • 팀 프로젝트에서도 내 담당 영역과 팀작업의 구분이 명확히 잘 안드러나요. 글로는 작게 적혀있지만, 시각적으로는 거의 안보여서 민정님의 기여도가 명확히 느껴지지 않아요. 포폴에서는 민정님이 어느정도의 퍼포먼스를 낼 수 있는지를 보여주는게 핵심인데, 이 부분이 명확하지않다면 그게 잘 보여지지 않겠죠.
그래서 개선 방향은
  • 구성 순서를 아예 UXUI 기준으로 재정렬하기 : 포폴 타이틀도 웹디자이너가 아닌 UXUI디자이너로 정정하고 인덱스도 UXUI를 앞으로 빼고 나머지는 뒤로 빼주세요. -> 나는 UXUI가 메인이고, 콘텐츠나 그래픽 경험도 강점으로 갖고있다라는 메세지로 바꾸는거죠.
  • 팀프로젝트는 내가 한 영역과 팀작업을 시각적으로 쪼개주세요. 댕즈오즈 페이지를 예시로 하면, 이미 텍스트로는 표시가 되어있기에 시각적인 부분만 추가하면 될 것 같아요. 내가 한 화면만 컬러로하고, 팀작업은 회색으로 간다던지, 각 단계에서 내 역할과 팀 역할을 분리해서 한줄씩 정리한다던지 다양한 방법이 있겠죠. 그러면 남의 작업을 빌려온 느낌이 아니라 팀의 전체 그림 안에서 내가 책임진 부분이 어디인지 선명하게 보여질거에요.
  • 한 눈에 보이는 구조로 바꾸기 : 각 프로젝트 마다 프로젝트 한줄 소개 , 문제/목표 , 내 역할 , 핵심 산출물, 성과 혹은 배운점 이런식으로 컨텐츠를 정하고 템플릿을 규격화해서 패턴을 맞추면 내용을 우겨넣지 않고도 생각의 흐름 + 분석력을 보여줄 수 있어요.

02. 본 부트캠프 중 진행할 팀 프로젝트의 퀄리티에 따라서 포폴에 첨부할 의향이 있는데, 만약 프로젝트 하나를 빼야 한다면 어떤 게 좋을까요?

 

제가 보기에는 최종 포폴 구성을 이렇게 추천해요.
  • 댕즈오즈 (브랜딩+UXUI)
  • 부트캠프 메인 팀 프로젝트 (가장 비중 크게)
  • 마이루틴 UXUI 분석 (보조)
  • 콘텐츠/그래픽은 뒷쪽에서 1~2장으로 묶기
즉, 그래픽/콘텐츠 프로젝트를 제일 먼저 정리하거나 요약하는 것이 좋아요.
UXUI가 메인 메시지라면 자연스러운 선택이에요. 그리고 하나 더 추가하자면, 기존 마이루틴과 댕즈오즈, 그리고 우리가 진행할 MVP를 제외한 2개의 프로젝트까지 포폴정리할때는 UI는 최종적으로 다듬어서 올리시는걸 추천해요. 캠프 시작할때와 끝날때 디자인 실력차이들이 엄청 크더라구요. 그래서 시간이 허락한다면 꼭 더 성장하신 실력으로 멋지게 시각적으로 포폴을 잘 표현해주면 좋겠어요.

 


03. 콘텐츠 디자이너 직종으로 준비했던 포폴인데 얼마나 수정하면 좋을까요?
콘디 직무에 지원했던 포폴이고, AI 관련 언급이 있어 참고해 조금씩 다듬은 부분이 있어요. 최근 진행했던 인턴 프로그램에서의 콘텐츠 디자인 경험에 비중을 두기도 했습니다! 처음부터 UXUI 직군을 준비한다면 해당 경험은 비중을 좀 줄이는 게 좋을까요? 실무에서 다른 분들(클라이언트, 타 부서 등)과 소통했던 경험도 강조하고 싶은데, 이런 건 이력서나 자소서가 훨씬 유리할 것 같긴 해서요.

  • 콘텐츠 경험을 완전히 줄이거나 없앨 필요는 없어요. 오히려 나는 이런 강점도 있다로 어필하되 비중과 위치만 조정하면 좋겠습니다. UXUI가 전체의 70%정도로 하고, 콘텐츠와 그래픽은 대표적인것만 골라서 요약하고 커뮤니케이션이나 마케팅 강점을 보여주는 용도로 활용하면 좋겠어요.
  • UXUI가 아닌 포폴도 구조와 텍스트는 UX관점으로 말을 바꿔주면 좋을것같아요. 타켓/목적, 문제, 내가 한일, 결과나 배운점 등 UX에 시선을 맞추고 텍스트를 전반적으로 조정하면 좋을것같아요. 그러면 그냥 예쁜 포스터 만든 사람이 아니라 목적에 맞게 정보를 구조화하는 사람으로 보여질 수 있거든요.
  • 협업 경험은 포폴안에는 1~2줄 요약, 이력서나 자소서에는 스토리 기반으로, 면접때는 상황-문제-행동-결과로 풀면 좋을거예요.
포폴은 결과 중심, 이력서/자소서는 나라는 사람 중심이라고 생각하면 쉬워요~!

04. 혹시 소연 튜터님께서 제작하셨던 포폴도 볼 수 있을까요..?

 

제 포트폴리오는 보여드리는 건 어렵지 않은데, 솔직히 큰 도움이 안 될 거예요 

 신입 포폴과 경력 포폴은 구조가 완전히 달라서요. 전 프로젝트 양도 너무 많고, 대부분 리더 역할이라 프로젝트마다
프로젝트명, 기간, 역할, 프로그램, 결과 화면 목업 이렇게 딱 한 장으로 끝냅니다.
신입 포폴처럼 상세하게 쓰면… 진짜 책이 돼요 (수백페이지도 가능…)

 

20:06~

TIL 작성 시작.

한 시간 가량 걸려서 드디어..끝!!

 


3. 학습하며 겪었던 문제점 & 에러

 - 지금의 내게 딱 필요한 활동(자습 시)이 무엇인지 명확하게 알지 못하는 것 같다.

- 반복 작업/세세한 작업 처리 시 로딩 시간이 길어 쓸때없이 시간 소요를 많이 한다. 개선 필요가 있다.

- 아쉬운 점!! 와이어프레임 플러그인 사용을 시도해 봤는데, 익숙해지기 조금 힘들었다. 어떻게 하는지 한 번 찾아도 보고 팀원분께 여쭤도 볼까?


4. 내일 학습 할 것은 무엇인지

  오늘 달성한 목표 오늘 달성 못한 목표 & 이유 내일 목표
손민정 - 디자인 카타
- 튜터님&멘토님께 DM 돌리기
- 5주차 과제 제출
- 컴포넌트 제작(30%)
- 정시퇴근😏 TIL 제출!
- 컴포넌트 제작(50%): 안 될 줄은 알았지만..오전 시간소요가 길었음. DM 발송 및 인스타 디자인용 계정 정리, 기존 포트폴리오 정리에 힘썼다.

- 다른 건 없음!
- 새로운 마음가짐으로 2주차 임하기!
- 수강한 강의 효력 200% 발휘하기
- 10:00 온보딩 주차 발제 기다리기

 

오늘의 나는 어제의 나보다 대단하다!

아자아자 화이팅!!