UX 사용성 및 UX를 위한 최고의 가이드를 보고 정리한 개념들
레드 루트
- 사람들이 우리 제품으로 수행하고자 하는 주요 테스크
모든 시스템에는 극히 중요하면서도 작은 일련의 테스크가 있다.
하지만 시스템은 덜 중요한 테스크까지 수행할 수 있으며 정작 사용자가 제일 중요하게 여기는 일을 소홀하게 여길 수 있게 된다.
그렇기 때문에 사용자의 목표에 맞게 제일 중요한 작업을 할 수 있도록 지원하는게 제일 좋다.
사용자의 목표에 집중하기 위해서는 세가지 스텝을 밟을 수 있다.
- 사용자의 목표 파악
- 목표를 사용자 스토리로 표현한다. (애자일과 같은)
- 사용자 스토리를 중심으로 소프트웨어를 표현한다.
레드 루트는 개발중인 시스템과 비슷하다.
- 사용자의 시스템에는 특정 주요 경로와 장애물이 없는 중요한 상요자 이동 경로가 있어 사용자들이 빠르게 테스크를 끝낼 수 있어야 한다.
장점으로는 다음과 같다.
- 일부 설계 팀이 직면하는 공통적인 문제를 해결하는 데 도움이 많다.
- 핵심 기능만을 작성하기 때문
- 대신 페르소나에 집중하기 때문
- 실행 가능한 목표를 만들 수 있다.
- 사용자가 시스템을 이용해서 목표를 이루게 만드는게 목적
- 그렇기 때문에 사용자가 목표를 이루기 위해서는 어떤게 어려울까를 생각하면 쉬워진다.
- 모든것을 가능하다고 여기지 말고 가능한 것만 잘 파악해서 골라야한다.
즉, 레드 루트는 다른 중요하지 않은 목표보단 사용자가 원하는 목표에만 초점을 맞추고 그것을 구현하기 위해 노력하는 것을 의미한다.
레드루트를 식별하는 방법
- 태스크를 수행할 사용자의 규모와 사용 빈도를 확인하도록 하자. 어떤것이 가치 있는지 느낄 수 있게 된다.
그렇다면 레드루트를 작성하기 위한 사용자 스토리를 작성하려면 어떻게 해야할까?
좋은 유저 스토리인지 확인할 수 있는 4가지 질문을 던질 수 있다.
- 실제 사용자가 할 법한 말인가
- 설계 및 우선순위 디자인에 도움이 되는가
- 가능성 있는 해결법을 불필요하게 제한하는가
- 좋은 증거가 있는가
린 UX
- 최소한의 실행 가능한 버전을 만들고 가능한 한 빨리 고객에게 제공하는 방법
- 고객의 피드백을 받고 사용자가 정확히 무엇을 필요한지 알게 될 때까지 진행한다.
- 문제 가설
- 사용자 욕구에 대한 우리의 가정
- 정말로 문제가 맞는지 검증하기 위해 현장에 찾아가서 인터뷰 하거나 관찰 한다.
- 솔루션 가설
- 사용자의 욕구를 충족한다는 우리의 가정
ISO 9241 세가지 특성
- 효과성
- 기본적으로 사람들이 자신의 목표를 달성할 수 있는가
- 효율성
- 시간과 같은 로겨이나 작업량이 얼마나 필요한가
- 만족
- 사용자가 태스크를 마친 후 경험에 대해 어떻게 느끼는가
과제
(구)세이프홈즈 랜딩페이지 반응형 퍼플리싱 - HTML만 작성
과제 결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin-left: 0px;
margin-top: 0px;
}
</style>
</head>
<body>
<header>
<div>세이프홈즈</div>
<div>
<button>문의하기</button>
<button>시작하기</button>
</div>
</header>
<main>
<section>
<div style="position: relative; width: 1920px; height: 768px">
<img
src="homeWork_src//상단_배경.png"
alt="이미지"
style="object-fit: cover"
/>
<div
style="
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<div>
<h1 style="color: white">내 집 보증금,</h1>
<h1 style="color: white">경매로 날아가면 어떻게 하지</h1>
<a href="www.google.co.kr" style="color: white"
>지금 걱정 해결하기 ></a
>
</div>
</div>
</div>
</section>
<section>
<div>
<h1>세이프홈즈, 전/월세 보증금 지킴이 서비스입니다.</h1>
</div>
<div class="첫번째 줄 사진 3개 전체 영역">
<div class="">
<div>
<img src="./homeWork_src//첫번째_1번째.png" alt="첫번째 사진" />
<div><h3>등기부등본 등을 분석한 보증금 지킴이 리포트</h3></div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서
여러분들에게 계약전 보증금 지킴이 리포트 제공
</div>
</div>
<div>
<img src="./homeWork_src//첫번째_2번째.png" alt="2번째 사진" />
<div><h3>보증금 보호를 위한 Check-List</h3></div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서
여러분들에게 계약전 보증금 지킴이 리포트 제공
</div>
</div>
<div>
<img src="./homeWork_src//첫번째_3번째.png" alt="3번째 사진" />
<div><h3>등기부등본 변동에따른 실시간 알림 서비스</h3></div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서
여러분들에게 계약전 보증금 지킴이 리포트 제공
</div>
</div>
</div>
<a href="www.naver.com">지금 바로 사용하기 ></a>
</div>
</section>
<section>
<div>
<h1>부동산을 찾았지만 망설이고 계시나요?</h1>
</div>
<div class="두번째 줄 사진 3개 전체 영역">
<div class="">
<div>
<img src="./homeWork_src//두번째_1번째.png" alt="첫번째 사진" />
<div>
<h3>부동산 중개 업자는 항상 괜찮다고 한다. 과연 그럴까?</h3>
</div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서
여러분들에게 계약전 보증금 지킴이 리포트 제공
</div>
</div>
<div>
<img src="./homeWork_src//두번째_2번째.png" alt="2번째 사진" />
<div>
<h3>절차가 이것저것 너무 많은데 빠뜨린 절차가 있지 않을까?</h3>
</div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서
여러분들에게 계약전 보증금 지킴이 리포트 제공
</div>
</div>
<div>
<img src="./homeWork_src//두번째_3번째.png" alt="3번째 사진" />
<div>
<h3>평생 힘들게 모은 보증금을 나중에 돌려 받지 못 하면 ..</h3>
</div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서
여러분들에게 계약전 보증금 지킴이 리포트 제공
</div>
</div>
</div>
<a href="www.naver.com">지금 바로 사용하기 ></a>
</div>
</section>
<section>
<div>
<h1>세이프홈즈, 어떻게 내 보증금을 지킬 수 있을까요?</h1>
</div>
<div>
<div>
<div>#1</div>
<div>계약 전 주소 검색</div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</div>
</div>
<div>
<div>#2</div>
<div>보증금 지킴이 리포트 확인</div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</div>
</div>
<div>
<div>#3</div>
<div>체크리스트를 따라 계약 진행</div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</div>
</div>
<div>
<div>#4</div>
<div>실시간 등기 변동 알림</div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</div>
</div>
<div>
<div>#5</div>
<div>계약 기간 안심하고 살기</div>
<div>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</div>
</div>
<a href="www.google.co.kr">조금 더 알아보기 ></a>
</div>
</section>
<section class="휴대폰 나오는 구역">
<div class="첫번째">
<div>
<div>
<img src="./homeWork_src//Phone.png" alt="휴대폰" />
</div>
<div>
<div>
<h3>리포트</h3>
</div>
<div>
<h2>등기부 등본 등을 분석한 보증금 지킴이 리포트</h2>
</div>
<div>
<div>
어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해할 수 있는
보증금 지킴이 리포트 제공
</div>
</div>
</div>
</div>
</div>
<div class="두번째">
<div>
<div>
<div>
<h3>절차</h3>
</div>
<div>
<h2>보증금 보호를 위한, 체크리스트</h2>
</div>
<div>
<div>
전세 사기 당하지 않기 위해 반드시 확인해야 할 체크리스트를
제공합니다.
</div>
</div>
</div>
<div>
<img src="./homeWork_src//Phone.png" alt="휴대폰" />
</div>
</div>
</div>
<div class="세번째">
<div>
<div>
<img src="./homeWork_src//Phone.png" alt="휴대폰" />
</div>
<div>
<div>
<h3>알림</h3>
</div>
<div>
<h2>등기부 등본 변동에 따른 실시간 알리미</h2>
</div>
<div>
<div>
어떤 말도 듣지 못 했는데 집 주인이 바뀌었다고? 세이프홈즈가
즉각 알려드립니다.
</div>
<div>
<img src="homeWork_src//문자1.png" />
</div>
<div>
<img src="homeWork_src//Compact.png" />
</div>
</div>
</div>
</div>
</div>
</section>
<section class="가격">
<div>
<h1>세이프홈즈, 서비스 가격은 어떻게 될까요?</h1>
</div>
<div>
<div><h3>전/월세 보증금 지김이 리포트</h3></div>
<div>
해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는
언제 어디서든지 사용할 수 있고 그렇습니다.
</div>
<div>
<h2>80,000 KRW</h2>
<div>1회 50,000원 / 1주 80,000원</div>
</div>
<div>
<button>지금 바로 사용하기</button>
</div>
</div>
<div>
<div><h3>등기부 등본 변동 알림 서비스</h3></div>
<div>
해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는
언제 어디서든지 사용할 수 있고 그렇습니다.
</div>
<div>
<h2>50,000 KRW</h2>
<div>1년 50,000원 / 2년 80,000원</div>
</div>
<div>
<button>지금 바로 사용하기</button>
</div>
</div>
<div>
<div><h3>올 패키지 (지킴이 리포트 + 알림)</h3></div>
<div>
해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는
언제 어디서든지 사용할 수 있고 그렇습니다.
</div>
<div>
<h2>100,000 KRW</h2>
<div>1주 + 2년 100,000원</div>
</div>
<div>
<button>지금 바로 사용하기</button>
</div>
<a href="www.google.co.kr">원하시는 플랜이 없다면 문의주세요! ></a>
</div>
</section>
<section class="후기">
<div><h1>세이프홈즈, 없었으면 큰일 날 뻔했어요!</h1></div>
<div>
<div>
<img src="./homeWork_src/Oval.png" />
<div>
<div>홍길동님</div>
<div>전/월세 보증금 지킴이 리포트</div>
</div>
</div>
<div>
공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데,
세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무
큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합
대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것 같아
해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수
있었습니다.
</div>
</div>
<div>
<div>
<img src="./homeWork_src/Oval.png" />
<div>
<div>홍길동님</div>
<div>전/월세 보증금 지킴이 리포트</div>
</div>
</div>
<div>
공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데,
세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무
큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합
대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것 같아
해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수
있었습니다.
</div>
</div>
<div>
<div>
<img src="./homeWork_src/Oval.png" />
<div>
<div>홍길동님</div>
<div>전/월세 보증금 지킴이 리포트</div>
</div>
</div>
<div>
공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데,
세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무
큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합
대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것 같아
해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수
있었습니다.
</div>
</div>
<a href="www.naver.com">후기 진위여부 파악하러 가기 ></a>
</section>
<section>
<div>내 보증금, 안전하게 보호하려면</div>
<div>지금 시작하세요</div>
<div>
<button>지금 바로 시작하기</button>
</div>
</section>
</main>
<footer>
<div>(주)세이프홈즈</div>
<div>사업자 등록 번호:250-26-01109 | 대표:정동훈</div>
<div>
경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호
</div>
<div>문의 메일 : safehomes.kr@gmail.com</div>
</footer>
</body>
</html>
과제후기
다른 라이브러리나 프레임워크 없이 순수 HTML만으로 무언가를 만든다는게 생각보다 어려웠다.
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
난 코드를 작성할땐 언제나 최선을 다한다. 그게 비록 console.log 일지라도 말이야.