전체 글 48

웹 사이트의 구조 뜯어보기 - 집 꾸미기

1. HTML 뜯어보기HTML의 구조는 크게 태그로 감싸져있고, 그 안에 와 태그로 감싸져 있다. 일반적으로 안의 태그들은 사용자가 웹 브라우저에 접속했을 때 보이지는 않는다. 유일하게 표시되는 부분은 이다. 안에 적힌 텍스트가 탭 제목으로 표시된다.   태그에는 태그 외에도 와 가 있다. 태그에는 charset 인코딩이나 검색 엔진 최적화 (SEO)를 위한 discription, name 속성과 같은 데이터 정보가 담긴다.  태그와 태그를 사용해 js와 css 파일을 연결한다. 메인 html 파일에 css와 js를 함께 작성할 수도 있지만, 코드가 길고 복잡해지기 때문에 링크로 연결해 사용한다.   문서의 몸통이라고 생각하면 된다. HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 ..

데이트립을 린 분석 방법론으로 살펴보기

들어가는 말 린 분석새로운 성장 원동력을 탐색하고 있는 실무자를 위한 린 분석!「한빛미디어 IT 스타트업 시리즈」『린 분석: 성공을 예측하는 31가지 사례와 13가지 패턴』. 이 책은 사업 모델과 성장 단계를 결정book.naver.com린분석 책에 따르면 데이터를 사용해 스타트업을 도약시키는 방법에 대한 단계별 가이드를 제시하고 있다. 책에서 다루는 내용 중 '제품의 성장 단계'와 '서비스 유형별'에 맞는 제품 분석 방법론으로 '데이트립'이라는 프로덕트를 살펴보고 자 한다.0. 공간 큐레이션 서비스, 데이트립2020년 8월에 론칭한 데이트립은 공간 큐레이션 플랫폼 서비스이다. '일상을 여행처럼'이라는 슬로건 아래에 카페나 문화 공간을 소개한다. 사용자는 지역별/공간별 탐색(검색), 공간 기록 등을 할 ..

고객 분석 도구 GA 알아보기

GA(Google Analytics)란?GA(Google Analytics)는 구글에서 제공하는 웹 로그 분석 툴이다. GA를 웹사이트에 설정하면 방문자의 유입 소스나 사이트 내 행동과 같은 정보를 수집, 저장, 분석할 수 있다. GA는 웹에 적합한 페이지 중심 고객 데이터 분석에 활용된다. 앱 고객 분석에 적합한 이벤트 중심 고객 데이터 분석 툴은 Amplitude가 있다.  GA 데모 계정GA에서는 데모 계정을 제공하고 있다. 데모 계정을 사용해 모든 기능을 사용해볼 수 있다. 구글 아이디가 있다면 접근이 가능하며, 데모 계정을 사용해 실제 비즈니스 데이터를 확인해보고 GA 기능을 실험해 볼 수 있다. 데모 계정 - 애널리틱스 고객센터도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요supp..

마켓컬리 사례로 프로덕트의 개발적인 측면 살펴보기

1. 프로덕트에서 유저가 할 수 있는 행동은 무엇이 있을까?마켓컬리의 주요 액터인 고객은 마켓컬리에 회원가입을 하고, 상품을 탐색하고, 상품을 장바구니에 담고, 주문을 한다. 이 중 로그인, 장바구니 담기, 주문하기 총 3개의 행동에 대한 플로우차트를 그려보았다. 2. 프로덕트의 UI, 클라이언트, 서버, DB는 각각 어떻게 보이고 작동할까?마켓컬리의 블로그와 개발자 채용 공고를 참고해 서버는 AWS를 쓰고 있음을 짐작할 수 있었다.마켓컬리의 블로그에 따르면, 마켓컬리는 이커머스 서비스, 물류 서비스, 데이터 서비스로 나눠져있다.이커머스 서비스소비자(회원)이 보는 화면을 보여주는 파트이다. 회원정보, 상품, 주문, 결제 등을 관리하고 있다.UI: Web / Mobile App를 통해 회원에게 보여진다.C..

디자이너가 되고 싶은 그대에게 건네는 망고보드의 첫 인사

랜딩 페이지(landing page)란?검색 엔진, 광고 등을 경유하여 접속하는 이용자가 최초로 보게 되는 웹페이지이다. 링크를 클릭하고 해당 웹페이지에 접속하면 마케터가 의도한 행위를 하도록 하는 페이지를 의미한다. -위키백과1. 고객은 어떻게 망고보드 홈페이지에 들어올까?카드뉴스를 만들고 싶어요.구글에 '카드뉴스 제작', '카드뉴스 제작 사이트' 라는 키워드를 검색하면 아래와 같이 상단에 망고보드 사이트가 뜬다.  망고보드디자인 제작 도구 망고보드 – 카드뉴스, 인포그래픽, 프레젠테이션, 포스터, 배너, 유튜브썸네일www.mangoboard.net2. 랜딩 페이지 분석망고보드의 랜딩 페이지는 총 7단계로 되어 있다. 1단계: 메인 카피 + 영상 CTA처음 사용자가 망고보드에 접속하면 마주하는 화면이다..

오아시스 마켓 AARRR 분석

AARRR이란?AARRR 지표는 퍼널 분석이 스타트업에 맞춰 변형되며 발전된 형태이다. Acquisition(획득), Activation(활성화), Retention(재방문), Revenue(매출), Referral(추천)의 앞 글자를 딴 것이다.고객 구매 여정, 퍼널 최적화를 할 때나 제품 전략 기획 시 추적 및 검증 가능한 지표를 설정하는 데 있어 중요한 역할을 한다. AARRR 분석은 회사의 목표에 맞게 지표를 설정하는 걸 돕는다. 이로써 회사의 성장 정도를 측정하고 액션 리스트를 단순화시킬 수 있다. 결론적으로, 제품 고도화에 관련된 기민한 의사결정을 할 수 있다. 수집 단계(Acquisition): ‘어떻게 우리 제품을 처음 접하게 되는가’활동 단계(Activation): ‘사용자가 처음 서비스..

오아시스 마켓의 마케팅 전략은 마케팅 비용 줄이기

이번 주제를 선정하면서 떠오른 것이 마켓컬리 100원딜이었다. 마켓컬리 대표가 PMF를 100원딜를 통해 찾았다는 인터뷰가 떠올랐다. 자료를 조사하다 마켓컬리와 함께 신선제품 새벽배송으로 경쟁하고 있는 오아시스 마켓이 눈에 들어왔다. 오아시스 마켓의 마케팅 전략은 저비용 마케팅이다. 라는 문구가 눈길이 갔다. 그로스해킹을 획기적으로 진행하고있는 사례보다 더 재밌는 과제가 될 것 같아 오아시스 마켓으로 주제를 변경했다.오아시스 마켓의 마케팅 전략은 마케팅 비용 줄이기오아시스마켓은 생활협동조합(생협)에서 시작했다. 온라인 시장 진출 전, 10여년의 오프라인 시장 업력을 통해 키운 직거래 인프라를 가지고 있다. 또한 고액의 광고료를 지급하는 모델을 투입해 광고에 나서는 대신 쿠폰 등을 통해 소리 소문 없이 강..

Figma를 활용해 KREAM의 Wireframe 만들어 보기

한정판 거래 플랫폼인 KREAM의 유저스토리를 작성하고 해당 테스크의 핵심 기능과 Flow를 파악해 Lo-fi 프로토타입과 mid-fi 와이어프레임을 만들어보고자 한다.1. KREAM 사용자의 유저 스토리WHO: 나이키 덩크 로우를 갖고 싶은 사용자가WHY: 드로우에 응모하기 위해WHAT: 드로우 알람을 설정한다.  KREAM에서는 발매정보(드로우 정보)를 제공한다. 원하는 신발의 발매 일정의 알람을 설정해두면 응모 마감 전에 알림을 받을 수 있다. 드로우에 응모한다고 무조건 되는 건 아니지만, 기회에 도전하지 않으면 기회를 얻을 수 없는 법이다. 알림을 설정해두고 꾸준히 하면 한번은 된다. (저는 한번 됐습니다..!) 2. 유저의 FLOW알람을 설정하는 방법은 두가지이다. 1) 상품 상세 페이지를 직접..

페이퍼 프로토타입 제작하기

저번 게시물에서 UX를 분석했던 인터파크 티켓의 아쉬웠던 부분을 개선해보고자한다. 프로토타이핑을 통해 어떻게 UI를 개선하면 사용자 경험에 더 좋은 경험을 제공할 수 있을지 생각해보자.프로토타입(Prototype, Prototyping)이란?개발에 들어가기 전, 각 이해관계자들이 정보가 어디에 위치해야하는지 이해하고 합위하기 위한 방법이다. 프로토타이핑을 통해 UI를 빠르게 디자인함으로써, 개발 이전에 모의 테스트를 할 수 있다.프로토타이핑 장점제품 개발 단계의 초기부터 유저의 참여가 가능하고, 디자인이나 코딩 기술 없이도 적은 자원으로 빠르게 평가하고 테스팅할 수 있다.프로토타이핑 종류1) Lo-Fi Prototype(Low Fidelity Prototype)Lo-Fi Prototype는 핸드 스케치와..

Laws of UX 기준으로 지그재그의 UX 살펴보기

책 Laws of UX에 나오는 심리학 10가지를 기준으로 서비스를 분석해보았다. 이 기준은 절대적인 기준이 아니며, 다양하고 주관적으로 해석이 가능한 심리학적인 요소이다. 1. 제이콥의 법칙 사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다. 2. 피츠의 법칙 대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다. 3. 힉의 법칙 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다. 4. 밀러의 법칙 보통 사람은 작업 기억에 7(±2)개의 항목 밖에 저장하지 못한다. 5. 포스텔의 법칙 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게. 사용자가 어떤 동작이나 입력을 ..