통 속의 뇌

[독서일기] 사용자를 끌어들이는 UX/UI의 비밀 :: 인터페이스는 삶을 더 쉽게 만들어야 한다.

디자인 지지(ZII) — Fri, 12 Jul 2024 18:37:43 +0900

많은 변화가 일어나더라도, 결국 그 본질은 같다.

책을 읽으며 인상깊거나 참고해야할 부분을 메모하고있다.

이를 정리해 두고두고 기억할 수 있도록 하려고 한다.

몰랐는데 이 책 이미지를 찾다보니 매우 두꺼웠다. 같이 책을 읽는 강의까지 있을 정도면 꽤나 바이블인듯하다.

때문에 나도 사람들과 함께 읽는다고 생각하고 문장에 한해서 완전한 축약은 하지않을 것이다.

서문 :: 인터페이스는 삶을 더 쉽게 만들어야 한다.

시대가 변하더라도 유효한 인터랙션 디자인의 원천

소프트웨어는 더 강력하게, 더 뛰어난 분석력, 예측력, 통찰력을 발휘하며 보다 독립적으로 작동하게끔 진화하고 있다.

소프트웨어는 우리를 닮아 가고 있다.

인터페이스 디자인 역시 시대의 변화에 발맞춰 달라지지만, 이 책은 기술의 발전에 따라 소프트웨어 디자인이 맞이하는 새로운 시대의 가이드북을 목표로 한다. 모든 인터페이스를 다루는 것이 아닌, 시대가 변하더라도 유효한 디자인의 원천과 독창적인 관점(디자인 패턴)을 제시하는 가이드북이다.

디자인 패턴은 여전히 의미 있다

디자인 패턴은 사람들이 소프트웨어를 인식하고 사용하는 방식에서부터 도출되었다.

인간의 감각과 심리는 변하지 않으며, 디자인 패턴은 인간의 감각과 심리에 반하는 방향이 아니라 같은 방향으로 움직인다.

디자인 패턴은 사람들이 소프트웨어로 수행하는 크고 작은 태스크를 기준으로 정의되었기 때문에 의미가 변하지않는다.

사람들은 언제나 검색하고, 입력하고, 제어하고 처리하기 위해 화면을 사용할 것이기 때문이다.

디자인 패턴은 모든 화면의 UI를 위한 구성 요소다.

소프트웨어는 이제 시스템이다

디자인과 소프트웨어 업계는 시스템, 컴포넌트, 모듈 기반의 접근법으로 진화해 왔다.

컴포넌트 라이브러리는 탄탄한 기반을 빠르게 다지는 도구로 취급되어야 한다.

왜 굳이 새로운 가입 시스템을 개발하는가? 처음부터 새로 만들기보다는 조합해 사용하는게 대세다.

스크린은 오히려 늘어날 것이다

실제로 화면에 표시해야 하는 정보는 더욱 복잡해지고 있다. 복잡한 인터페이스를 디자인하려면 걸맞은 전문 인력이 계속 필요하다.

새롭게 떠오르고 지금도 부상하고 있는 영역은 각각 특별한 디자인 과제를 제시하기 때문에 다루지않는다.

특정 도메인에 특화된 디자인 서적은 아래를 참고하라.

참고로 이 책에서 추천하는 모든 도서는 해외서적이며, 아마존에서 쉽게 구매할 수 있다.

음성

- 소프트웨어를 다루기 위해 기계와 대화하는 대화형 디자인

- 참고도서 : Designing Voice User Interfaces: Principles of Conversational Experiences

소셜 미디어

- 소셜 미디어는 거의 모든 소프트웨어에서 찾아볼 수 있는 의사소통, 토론, 인터랙션의 요소가 되었으며 일적인 의사소통과 생산성을 혁신했다.

- 참고도서 : Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience

스트리밍 TV

- 텔레비전의 의미가 변화되었다. 이제 TV는 핸드폰이나 외부 기기에 담긴 기능을 활용할 수 있는 앱이다.

- 참고도서 : Designing Multi-Device Experiences: An Ecosystem Approach to User Experiences across Devices

증강 현실(AR) / 가상 현실(VR) / 혼합 현실(MR)

- 인터페이스와 소프트웨어느 실제 세계 위에 레이어처럼 덧입혀지거나(AR), 그 자체로 완전히 몰입할 수 있는 세계(VR)가 되고 있다.

- 참고도서 : Creating Augmented and Virtual Realities: Theory and Practice for Next-Generation Spatial Computing

챗봇 및 대화형 디자인

- 챗봇은 데이터와 음성 패턴을 인식해 학습하고 개선하는 소프트웨어로 구동된다. 디자이너는 이를 학습하고 유용하게 만드는 소스 데이터 도메인, 대화 프레임워크와 같은 시나리오를 만들어야 한다.

- 참고도서 : Designing Bots: Creating Conversational Experiences

내추럴 유저 인터페이스

- 터치를 넘어서는 제스처 기반 인터페이스. 기술과의 상호작용에서 몸을 사용하는 데 중점을 둔다.

책은 총 12장이며, 각 장은 대부분 두 부분으로 구성돼 있다.

전반부는 주제를 소개하고 확장하며 주제와 관련된 디자인 이론 및 실습에 대한 논의(디자인 원칙, 지침, 모범 사례) 및 후반부에 나올 맥락을 얘기한다.

후반부는 디자인 패턴으로, 구체적인 구성 요소 및 기능을 얘기한다.

수많은 패턴이 있지만 책에서는 대중적인 일부만 소개하고 있으며 각 패턴을 다음 구조로 나누어 설명하고 있다.

WHAT :: 정의하기

해당 디자인 패턴의 의미를 정의

WHEN :: 언제 사용하면 좋을까?

사용 가능한 시나리오. 패턴을 사용하는 맥락과 고려해야하거나 예외적인 사항들

WHY :: 어떤 효과가 있을까?

디자인 패턴의 목적과 장점. 어떤 효과를 의도하거나 기대할 수 있는가.

우리나라말의 '왜'와 결이 좀 다른 것 같지만 왜 사용해야해?에 대한 대답으로 적절한 것 같다

HOW :: 어떻게 활용할까?

패턴 디자인 자체와 이를 구현하는 방법에 대해 자세히 설명. 잘 사용하려면? 언제 패턴을 사용할지?

EXAMPLES :: 예시

해당 패턴을 보여 주는 여러 사례를 설명하고 분석

책을 읽으며 서문을 자세하게 들여다본적은 처음인 것 같다. 아무래도 공부하기 위해 산 책이다보니 저자가 어떤 목적으로 책을 썼는지 파악해야 더 읽을 것인지 판단할 수 있기 때문이다.
내가 읽는 책은 제3판이며, 제2판은 15년 전에 나왔다고 한다. 그 사이 디지털 기술은 너무나도 빠르게 발전했고, 그만큼 디자이너와 개발자 및 그 외 모든 관련 직종에 있는 사람들도 같이 발전해야 한다. 우리는 사용자가 왜, 어떻게 행동했는지 항상 호기심을 갖고 관찰해야 하고 그들이 목표를 완수하길 바라며 적극적으로 도와야하는 직업이다.
나는 좋은 제품과 좋은 사용자 경험을 만들어내려면 어떻게 해야할 지 고민해왔고, 그 토대를 단단하게 다지기 위해 이 책을 읽는다.

[Web] 오프메이트 서비스 분석하기

디자인 지지(ZII) — Fri, 21 Jun 2024 18:38:52 +0900

서비스 형태 : 모바일 웹 형태 (현재 ios 앱 출시)

컨셉 : 함께 만드는 생카 지도

오늘의 서비스는 오프메이트

24년 2월 출시한 것으로 추정되는 따끈따끈한 서비스다.

아이돌 생일 카페를 지도로 볼 수 있는 오프메이트에 대해 알아보자.

OFFMATE = "OFF" + "MATE"

오프는 커뮤니티에서 오프라인 만남을 뜻하는 은어다.

오프라인 친구 등 커뮤니티로 생각할 수 있지만

서비스 컨셉인 "함께 만드는 생카 지도"를 생각하면

같이 오프라인 이벤트를 만들어나가는 서비스 ~ 정도로 유추할 수 있다.

메인화면

오프메이트 : 메인화면

MVP 모델은 모바일 UI를 기반으로 웹 서비스 중이다.

앱스토어, 구글스토어 모두 애플리케이션이 확인되지 않는다.

+) 2024년 5월 31일 앱스토어 출시 확인

추후 출시를 위해서인지 브랜드 각인과 마케팅용으로

서비스 유입을 유도하기 위해 SNS 홍보 중이다.

우측 상단엔 프로필 아이콘, 가이드 아이콘이 있다.

시장에 생소한 서비스일수록 친절한 가이드는 사용자 진입장벽을 낮출 수 있는 기회가 된다.

물론 오프메이트의 경우, 서비스 자체는 기존에 없었더라도

이미 타겟층이 익숙한 정보로 이루어져 있으며, 특히 사용자 주연령층이 1020으로 낮은 편이기 때문에

빠르게 서비스에 적응할 수 있을 것으로 예상된다.

물론 기능도 복잡함없이 필요한 부분만 제공 중이다.

빠르게 섹션별로 살펴보겠다.

자주 묻는 질문

오프메이트 : 자주 묻는 질문

우측 상단 물음표 아이콘을 클릭하면 자주 묻는 질문으로 이동한다.

검색, 지도 생카, 마이페이지 등 제공하는 기능별로 분류 하였다.

자주 묻는 질문 하단 CTA

신규 서비스는 당연하게도 사용자가 많지않다.

DB에 등록된 아티스트 수, 이벤트 수가 적을 수 밖에 없기 때문에

사용자가 작성할 수 없다면 관리자단에서 일일이 정보값을 집어넣어야한다.

좌 : 자주 묻는 질문 CTA / 우 : 메인 추가요청 CTA

이를 해결하고자 서비스 곳곳에서 CTA를 달아놨다.

사용자의 요구사항 확인 후 반영하는 형태인데, 의도한 것인지 리소스를 줄이기 위한 것인지 확인은 못하지만

브랜드와 성장하는 것을 좋아하는 Z세대는 환영하지않을까 싶다.

해당 CTA는 메인 5번 섹션에서도 라이팅 변경 후 노출되고 있다.

메인에서는 "추가 요청"으로 유도하고 있기 때문에 아티스트 추가요청 유형이 선택된 채로 팝업이 뜬다.

버튼별 워딩에 맞게 유형이 선택된 채로 넘어가는 UX가 보인다. :-)

HOWEVER

이벤트 서비스 특성상 사용자가 원하는 아티스트, 이벤트가 없거나 적을 경우 이탈로 이어지기 쉬울 것이다.

이를 해결하기 위해 오프메이트는 빠르게 DB를 최신화 해야할 수밖에 없다.

사용자가 리소스를 덜 사용하고 정보를 쉽게 얻어갈 수 있도록 하기위해 나온 기획이라고 보여진다.

다만, 다음과 같은 문제를 해결해야 사용자 이탈 감소와 서비스 확장을 해결할 수 있을 것 같다.

1. 이벤트 주최자를 끌어들일만한 와우포인트가 없음. (직접 이벤트 등록, 수정 불가능)

2. 이벤트 특성상 참여 사용자가 유입 -> 정보만 얻고 이탈할 가능성 높음

3. 정보를 일방향으로 주고받기 때문에 실시간 대응이 늦어짐. (문의하기 통해 요청 반복)

- 팬 이벤트는 장기간 진행하지 않으며, 혜택 여부가 이벤트 참여에 큰 기여를 하기도 한다.

4. 단순 정보 확인만을 위해 웹사이트를 지속적으로 확인하는 사용자는 갈수록 줄어들 것.

프로필

오프메이트 : 프로필

비회원일 경우, 로그인 유도와 함께 찜한 아티스트 지도, 저장한 카페 목록이 나온다.

내가 관심있는 이벤트를 확인&관리할 수 있다고 생각된다.

다만, "찜한 아티스트 + 지도"는 해당 서비스의 이해도가 낮은 사용자에게 직관적인 라이팅은 아니라고 보여진다.

오프메이트의 핵심 기능이 지도에 노출된 이벤트를 저장하거나 확인하는 것이라면,

찜한 아티스트 / 찜한 이벤트 등 명확하게 구분된 라이팅이 더 좋지 않았을까?

회원가입/로그인

로그인 버튼을 누르면 팝업이 제공된다.

서비스명, 캡션과 함께 이메일 로그인 / 카카오 로그인을 제공하고 있다.

+) 앱출시와 함께 애플로그인이 추가되엇다.

신규 서비스는 비용 감소를 위해 카카오 API를 제일 많이 사용하는 듯 싶다.

회원가입하기를 누르면 등록된 생일카페가 많은 순으로 가로 슬라이드를 제공한다.

바로 눌러서 이동도 가능하다.

로그인 화면에서 SNS 로그인 버튼을 누르면 추가 정보만 받고 가입이 완료된다.

HOWEVER

간편 로그인은 제공하되, 웹인데 꼭 카카오여야 했을까? 싶은 의문은 있다.

추후 앱이 출시되었을 때 기존 회원에게 동일한 로그인 방식을 제공하기 위함일까?

* 쿠키가 날라가면 재로그인, 심지어 모바일 인증을 요구하는 일이 빈번한 카카오톡은 사실 내 선호대상이 아니긴하다.

비밀번호를 잊었다면 가입 했던 이메일(아이디)로 재설정 가능하다.

아티스트 검색

검색 시 월별 아티스트를 보여준다.

별도 필터는 제공하지않는다.

검색 필터가 궁금해져서 여러가지 실험을 해봤다.

그룹을 검색하면 그룹 태그가 달린 것으로 추정되는 아티스트들이 나온다.

영어로 검색해도 나온다.

아티스트를 등록할 때 꽤 공수가 들 것 같다.

검색은 단어 단위가 아니다. su를 치니 슈퍼주니어와 트레져 그룹이 나온다.

핵심 기능 (찜, 지도 및 이벤트 상세정보)

오프메이트 : 찜한 아티스트 및 카페

위에서 언급한 것 처럼 아티스트, 생일카페를 각각 찜할 수 있다.

오프메이트 : 아티스트 생카 지도

아티스트를 클릭하면 어떤 화면에서던 주변 생카 리스트를 보여준다.

지도를 확대하면 생일카페 썸네일과 함께 자세하게 볼 수 있다.

지도 축소 시 대략적으로 보여주는 기능이 좋다.

오프메이트 : 지도 상세 리스트

하단 모달창을 끌어올리면 생카 리스트를 볼 수 있다.

제공 되는 항목은 다음과 같다.

- 이벤트 썸네일 및 이벤트명

- X에서 확인 가능한 주최자 계정

- 이벤트 시작, 종료 기간
- 제공되는 특전 항목

오프메이트 : 생일카페 상세보기

이벤트 상세화면을 확인해 보자.

리스트에서 볼 수 있었던 특전 표기 대신 위치를 표기하고 있다.

굳이 리스트에 있던 정보를 다시 보여줄 필요 없으며,

특전 강조를 위해 탭으로 빼놨기 때문인 듯하다.

생카의 위치, 제공되는 특전 중 어떤 것이 사용자에게 더 중요할까?

를 고민하게 만드는 화면이다.

제일 좋은 것은 등록자 계정으로 이동하게 만드는 것인데,

사실 대부분의 서비스가 이탈을 최대한 막기위해 이를 방지하고자 한다.

그러나 초기 사용자가 서비스를 인식하고 꾸준하게 사용하여 완전 대체가 가능하기 전까지

자유롭게 풀어두는 것 또한 하나의 운영 방법이 아닐까 싶다.

오프메이트 : 상세보기

밑으로 스크롤 시 각 탭의 정보를 확인 가능하다.
전체적인 UI가 카카오맵 같다고 생각했는데 지도 API가 카카오맵이다 ㅋㅋ

특전을 항목별로 분류하여 태그처럼 두었다.

선착 특전, 그 외 특전 또한 이벤트 성격에 따라 다른듯 하다.

자세한 위치는 카카오맵을 통해 확인하도록 하고 간략한 정보만 제공하고 있다.

주소를 복사하여 공유할 수 있도록 하였다.

HOWEVER

앞으로 어떤 기능을 더 추가하고 개선할 것인지 확인할 수 없지만

현재로서는 이벤트 모아보기, 저장하기가 주력이다.

특히 그 외 특전은 이미지를 참고해야 상세하게 알 수 있는 것처럼

정보를 최대한 간략화하는데 집중한 것이 보인다.

그것만으로 고객이 만족할 수 있을지, 이탈률을 낮출 수 있을지 모르겠지만

앱스토어 평점을 보면 기존에 없던 앱인데서 만족하는 것을 알 수 있다.

다양한 팬층이 늘어나면서 아이돌뿐만 아니라, 일반 스포츠팬부터 모든 문화생활에 '덕질'이 함께하고 있다.

그만큼 다방면의 사용자를 만족시킬 프로세스 또한 고민해야할 것이다.

더욱 상세한 팬 이벤트, 생카 지도 서비스가 궁금하다면?

럽식 개발글 보기

[Loveseek] UXUI 사이드 프로젝트를 시작하다

내일채움공제 2년형 만기 후기 :: 타임라인, 만기 퇴사, 기업기여금

디자인 지지(ZII) — Fri, 21 Jun 2024 13:47:17 +0900

드디어 내채공 2년 만기 후기를 씀

다들 후기 쓰려고 2년 버티는거지? 그런거지?

Timeline

입사일자	내채공 가입	1차 납부일	24회차 납부일	만기일 포함 급여일 (기업기여금 신청)	기업기여금 입금	정부지원금 입금
2022.04.06	2022.05.25	2022.06.15	2024.05.15	2024.06.10	2024.06.18	2024.06.20

내채공 만기 전 알아둘 것

본인납부금과 별개로 나머지 2개가 납부되어야 만기 신청 가능

· 내채공을 계약한(납부 시작일x)달의 1일부터 말일까지 월급을 전부 받아야함

· 기업지원금은 계약달의 월급을 수령한 날부터 신청 가능 :: 마지막 기여금은 기업에서 신청해야 함

예) 1일 입사자가 아니며 5월 계약한 사람 -> 6월 월급날부터 신청가능

단, 25일인 경우 다음 달 월급을 선불받는 형태이기 때문에 바로 신청 가능하다고 알고있음!

· 정부지원금은 기업지원금을 신청한 뒤 입금됨

· 세 가지 모두 납부 됐을 경우 만기 수령 신청 가능

1. 퇴사 언급

만기를 채우기 위해서 다녔던 회사는 절대 아니었지만

더 버틸 수 없겠다는 판단이 섰다!

그래서 넉넉하게 5월 중순 즈음 6월까지만 일하겠다는 의사를 밝혔다.

다들 너무 아쉬워해 주셨지만(?) 일주일 뒤 공고가 올라갔고

~~아직까지 면접 보고 있다 ㅁㅊ~~

6월 중순이되어서야 겨우 후임자가 정해졌다...

넉넉하게 7월까진 다닐 수 있다고 말씀드렸지만

나도 좀 쉬고싶은건지 언급하자마자 번아웃 온 사람마냥

멍청이가 돼서 예전보다 일에 집중을 못하고 있는 상태다.

5월 25일 계약만료 -> 사실상 26일부터 퇴사 가능

계약 만기일이 기준이기 때문에 꼭꼭 퇴사할거라면 잘 확인하기

TIP : 주말이 껴있다면 차주 월요일에 퇴사하는 것이 퇴직금에 도움된다.

그리고 나는 4월 갱신이라 연차가 12개넘게 남아서;;

전부 소모할테니 출근일과 퇴직일은 별도로 처리해달라고 했다 내 퇴직금 ㅋ

2. 포도알 24개 채우기와 취업지원금, 기업기여금

나는 계약일자가 5월 25일이었고

첫 납부일인 6월 15일부터 24회차 납부일인 5월 15일까지 전부 넣었음에도

1일 입사자가 아니기 때문에 5월 월급을 전부 받는 6월에야 신청할 수 있었다.

급여일이 10일이어서(대부분의 중소기업이 5일, 10일이겠지만)

담당자님이 급여일 되자마자 마치 자기 일인 것 마냥 서류들고 자리로 오심ㅋㅋ;

근로소득? 관련 서류를 제출해야 한다는데 그런거없음

워낙 꼼꼼하시니 알아서 해주시겠지 싶어 후다닥 싸인하고 전달 드렸다.

기업기여금은 짧으면 영업일 7일 이내, 길면 한 달까지도 걸린다고 한다.

10일 칼같이 신청, 18일 기업기여금 입금 완료 !!!

3, 4월 만기자들은 받는데 꽤 걸린다고 하는듯

정부지원금 납부 알림은 아마 21일에 올 것 같다.

사실 홈페이지에서 확인 후 조건을 충족했다면 바로 신청해도됨.

전산상 오류 방지를 위함인지 그냥 느린건지 항상 하루 뒤에 오고.. 후기들도 다 그랬다.

혹시 싶어서 20일에 들어갔더니 적립되어있길래 바로 만기신청 함 ㅋㅋ

3. 고대하던 만기신청

만기신청은 아주 쉽고 빠르다.

공제만기 상품 관리 - 내 청약번호 클릭 - 필요 내용 작성 후 설문조사 - 신청완료

네네 좋아요 다 좋아요!!!!!

어디로 이체될 건지 확인하고 만약 일반 내일채움공제로 연장을 원한다면 그렇게해도 된다.

나는 앱으로 진행 했고 쭉쭉 이어서 설문조사까지 끝냈다.

그렇게 만기신청 접수 완료 톡이 정부지원금 납부 톡보다 빨리 오게 되었다.

어차피 이후 15영업일 이내이니, 늦어도 7월초까지만 기다리면 되겠다 싶어서

포스팅은 여기까지.

이자 합산 금액과 실제 수령 날짜는 확인 후 덧붙이겠음

야호~!

+) 6월 28일 이자까지 총 12,289,015원 들어옴 !

(보증금으로 다 나갔다)

[Loveseek] 생카 애플리케이션 개발을 위한 시장조사 및 사용자 리서치

디자인 지지(ZII) — Wed, 17 Jan 2024 10:15:11 +0900

안녕하세요, JIJI입니다.

개발 진행과정을 공유하고자 사이드프로젝트 카테고리를 새로 만들어봤습니다.

사이드 프로젝트를 시작하게 된 계기는 지인 추천이었다.

저는 X(구 트위터)에서 디자인용 계정을 가지고 있었고 #디자이너_트친소 태그로 알게된 현재 프로젝트의 PM님이 감사하게도 참여제의를 주셨다.

그 시점 프로젝트는 사람들을 모집하고 있는 단계였고 제대로 된 기획이 나오지않은 상태였다.

참여했던 이유는 딱 하나!

파편화된 정보들을 하나로 모으자

그 정보들은... 바로 팬 이벤트다.

홍대, 성수 등 이미 수많은 팬 이벤트가 매일 같이 열리고 있으며 이를 알고 있거나 참여해본 분도 계실 것이다.

지하철 전광판도 이러한 이벤트 유형 중 하나다.

그런데 단 하루, 며칠만을 위해 열리는 이벤트에 대한 정보는 99% 엑스(구 트위터)에서밖에 찾지 못한다.

사용자는 어떻게 이벤트를 확인하나

엑스, 해보신 분?

수많은 사용자들은 원하는 정보를 찾기 어려움에도 단지 정보량이 많기 때문에, 마땅한 플랫폼이 없기 때문이란 이유로 익숙해진 방식 그대로 사용하길 원한다.

엑스에서 사용자가 원하는 정보를 얻으려면 어떻게 해야할까?

생일카페 검색 후 나오는 대관 카페들

먼저 단순 #생일카페를 키워드로 검색하면 수많은 카페가 나온다.

해당 카페들은 이벤트용 대관이 가능한 생일, 이벤트 전문카페로 일반 카페와는 다르다고 생각하면 됨.

일반 카페에서도 진행하는 경우도 있겠지만 대부분 위와같은 목적성을 가지고 오픈한 카페이다.

사용자가 가고자하는 연예인 혹은 캐릭터 생일 카페를 검색한다면 어떻게 될까?

카페 계정을 둘러보다 몬스타엑스의 멤버, IM(아이엠)씨의 생일카페들을 발견했다.

오픈 전 여러가지 안내 및 홍보를 진행하고 있었다.

각기 다른 이벤트 홍보 계정

생일카페는 대개 대관처 / 주최자 / 참여자로 분리되어있다.

이때 참여자(사용자)는 대관처 위치와 특전 등 정보를 얻기 위해 각 주최자 계정을 확인한다.

하지만 검색 후에 나오는 정보는 위처럼 장소도, 계정 이름도, 내용도 천차만별이다.

엑스의 장점은 자유로운 양식덕에 개성있는 팬 이벤트를 홍보할 수 있는 것이다.

그러나 홍보글까지 도달하기의 여정이 녹록치 않다. 계정명에 정보가 적혀있지않다면 서치 후 나온 글을 한 번 더 살펴봐야하기 때문이다. 위 사진의 홍보 계정 또한 검색으로 나오는 글의 계정을 타고 들어가야만 했다.

사용자들은 서치한 정보들을 한 곳으로 묶어 보기 위하여 타래(글을 연속해서 쓰는 것)를 만들기도 한다.

여러 생카를 둘러보며 어디를 먼저 갈지 미리 동선을 짜기도 한다. 누군가 만들어 둔 타래를 저장해 놓기도 한다.

정보에 미숙한 참여자는 어떻게 팬 이벤트 확인해야 할까?

검색 엔진(네이버, 구글)을 통해 질문하거나, 나오는 글들을 확인하는 방법밖에는 없다.

또한 내 주변 지역에서 열리는 카페 정보는 더더욱 확인하기 힘들다.

문제 정의 및 목표 분석

러브식과 완벽히 같은 모델을 가진 애플리케이션은 조사 당시(2023년) 없었으나, 웹 형태로는 유사한 서비스가 있었다. (이후 앱 출시) 대부분의 앱은 모든 이벤트를 제공하거나, 아이돌 및 연예인 스케쥴 확인 및 커뮤니티 기능만 제공하고 있다.

[경쟁사 앱에 대한 분석글]

[Web] 오프메이트 서비스 분석하기

[생카 관련 기사 : 2021년]

기사 참고

러브식 팀은 이러한 순환구조를 더욱 원활하고 간편하게 만들고자 하였다.

1. 모든 이벤트를 지도로 표기하여 쉽게 볼 수 있도록 하자.

2. 서로 받은 굿즈를 교환하거나 구매, 판매할 수 있는 커뮤니티 기능을 추가

실제로 사용자가 해당 문제를 인지하고 있는지, 개선을 원하고 있는지

설문조사와 비대면 인터뷰를 통한 리서치를 진행했다.

최대한 많은 사용자의 의견을 듣기 위하여 대상은 다음과 같이 정의했다.

팬 이벤트에 관심이 있거나 참여할 의향이 있는 사용자
팬 이벤트에 실제 참여 경험이 있는 사용자
유사한 앱을 사용한 경험이 있는 사용자
팬 이벤트 후기를 올린 경험이 있는 사용자
팬 이벤트 주최 경험이 있는 사용자
팬 이벤트를 위한 장소 대관 경험이 있는 사용자

1) 온라인 설문조사 :: 구글폼

프로덕트 홍보겸 다양한 사용자에게 닿길 원하며 커피 기프티콘을 증정하는 이벤트를 진행했다.

사용자 연령층

10-20대 연령층 : 참여자 다수
20-30대 연령층 : 참여자 및 주최자 다수

팬 이벤트 참여 시 불편했던 경험

대기 장소 협소
특전의 빠른 소진
- 특전 소진 시 확인할 수 없음
주거지와 먼 곳에서 열리는 행사
- 미리 공지를 확인할 수 있으면 함
이벤트 주최진의 미흡함
좋아하는 그룹의 팬 이벤트를 모아볼 수 없음
대기시간이 김
- 예약을 받거나 원격 줄서기 도입 필요
- 도착 전 웨이팅 유무를 알 수 없음
공지와 위치의 매칭이 어려움
경쟁률 또는 난이도를 미리 알 수 없음
해시태그를 달지않으면 서치가 힘듦

팬 이벤트 앱에 기대하는 점

다른 곳에서 얻을 수 없는 특전
현장 밀집도와 잔여 특전 수량 실시간 안내
예약 시스템
엑스 베이스 편리한 이벤트 서치
위치 및 특전 정리
원하는 장소 선택 시 최적의 동선 짜주기
기본 정보 표기 (운영 시간, 특전 종류, 메뉴 컨셉 사진 등)
찜한 사람 숫자 파악
지도에 행사, 날짜, 특이사항 표기
좋아하는 그룹, 멤버별 이벤트를 분류해 놓은 서비스
대기인원 표기, 대기표 발부
트위터에 과도하게 의존하지않을 수 있는 서비스
정확하고 빠른 정보 공유
이벤트 스케쥴표 작성

2) 비대면 인터뷰 (참여자, 주최자, 대관처)

이벤트 참여자
- 지도 앱을 이용해서 정보를 공유하는 사람
- 트윗 타래로 이벤트 계정을 정리하는 사람
- 생카 후기(1~3개)를 올린 사람
- 생카 투어 후기(4개 이상)를 올린 사람
이벤트 주최자(블로그, 포스타입, 트윗 타래 등에 주최 후기를 작성한 사람)
- 카페 주최자
- 상영회 주최자
- RPS 성향의 이벤트 주최자
- 이벤트 주최를 준비하고 있는 사람
대관처 사장님

참여자

참여자 J

과거 온리전 위주로 참여
팝업스토어 등 굿즈를 나눠주는 곳을 간 경험이 있음
20세 남성

1. 어떤 온리전에 참여를 해보았는지?

파이널판타지
사이퍼즈 (공식, 일반 행사도 참여해봄)
애니메이션 - 은혼

1-1. 어떻게 참여를 하게 됐는지?

게임쪽으로 기대했던건 온리전이 아닌 경우, 게임 안에서 도움이 될만한 굿즈나 사은품이 영향이 컸다.

온리전 같은 경우, 내가 좋아하는 캐릭터와 굿즈를 받고 싶어서 갔다. 그런데 온리전은 사람과의 커뮤니케이션이 제일 크지않았나 싶다. 구글 폼, 네이버 폼 같은걸로 양식을 넣어서 신청하는 형태로 갔다.

1-2. 어떤 커뮤니케이션을 하러간건지?

좋아하는 작가라던지, (트위터가 더 활성화가 잘 되어있으니까) 사람들과의 교류가 제일 컸다. 보통은 먼저 개개인으로 신청을 하고 (장르의 서사나 스토리가 좋아서 오는 사람들이 많기 때문에) 가서 사람들과 얘기를 하러 가는게 많았다.

2. 동행을 구한적이 있는지?

친한 사람이 아닌 경우엔 같이 갈 사람보다는 특정 장소에 가는게 겹친 사람을 구했다. 그래서 가서 만나는걸로 이어진 경우가 더 많았다.

3. 굿즈 같은걸 기다려서 받은 적이 있는지?

인기많은 온리전 부스같은 경우는 선입금을 받기 때문에 기다린 적은 없다. 안에 주최진들이 통제를 하기도하고.

4. 생일 팬카페 등은 가본적이 없는지?

마비노기였는데, 유저 중 하나가 카페를 대관해서 디렉터도 오고 따로 음료를 사지않아도 간단한 굿즈를 주고, 커피랑 굿즈를 같이 파는 형태였다. 소규모여서 커피를 주문하면서 맘에 드는 굿즈가 있으면 구매하고 사람이 몰리면 대기가 생기는건 자연스러웠다. 내가 갔을 때는 적당히 있어서 따로 대기하진 않았다. 엽서나 스티커 같은건 그냥 주고 키링 등은 구매를 했어야했다.

5. 가보려다 실패하거나 취소한 경우는 없는지?

에테르 파티. 파이널판타지14에서 공식적으로 주최를 했는데, 사람이 몰릴걸 예상하지 못해서 통제가 안됐다. 워낙 이슈가 되기도했고 트위터 내에서 큰 장르기도 했고 그러다보니 가기가 힘들거라 생각해서 가지못했다. 트위터에서도 얘기가 많이 나오는걸 보니 인기를 실감할 수 있었는데, 주최측에서 통제를 할 정도였다고 들었다. 제일 큰 이유는 사람이 너무 몰릴 것이 예상되어서 지칠 것 같기 때문이었다. 잘 놀지도 못하고 보지도 못할거라 생각해서 갈 생각을 포기했다.

6. 이런 대규모 행사나 사람이 몰릴게 예상이 된다면 어떻게 대응했으면 좋겠는지?

티켓을 시간을 나눠서 판매를 했으면 좋겠다. 구경하고 나와서도 충분히 소통이 가능하기 떄문에 하루종일 있을 수 있는 티켓이나 자리를 마련해버린다면 처음부터 포기하는 사람들도 많고 빠르게 굿즈가 소진되기 때문에 오히려 모든 사람이 한 번이라도 경험을 하게하려면 시간대를 나눠야한다고 생각한다.

7. 만약 실시간으로 대기를 알 수 있거나 예측이 된다면 도움이 될 것 같은지?

운영진이 제일 먼저 오픈을 하기 때문에 운영진측에서 어플을 활용해서 간편하게 현재 인원을 체크해서 유동적으로 변경하고 그게 반영이 된다면 그걸로도 충분할 것 같다는 생각이 든다. 중간에 이탈하는 사람이 생긴다면 입장하면서 수를 줄여나가면 되지않을까 싶다. QR 코드를 활용한다던가. 입장할 때 찍고 들어가면 인원이 얼마나 들어갔는지 알 수 있지 않을까? (이 부분은 큐알코드가 아니어도 개인이 한 번 입장을 누르면 그 횟수를 측정하는 방식으로 진행해도 괜찮을듯, 운영진 앱 개발은 아직 힘드니까)

8. 지도 기능이 생긴다면 어떻게 사용을 할 것 같나?

나는 한 곳만 집중적으로 가기 때문에 만약 지도에 여러 곳이 표시되어있고 한 지역을 선택하면 내가 원하는, 관심을 가지는 카페가 주변에 또 있는지 거리순으로 표시되면 좋을 것 같다. (그걸 저장하는 기능이 있으면 개인적으로 계획하고 앱에서는 현재 거리만 측정해서 알려주면 되지않을까?) 정보를 모르는 사람은 좀 더 편하게 사용할 수 있을 것 같다. 몰라서 못가는 사람도 있을테고 만약 표시해주면 관심이 더 생겨서라도 가지않을까?

그리고 단순 위치순으로 목록말고도 눌렀을 때 정보가 간단하게 표시되면 좋겠다. 언제 열린다던지, 아직 열리지않음이라는 등 상태 표시라던지. 간단하게 추린 목록 상태였을 땐 오픈 날짜랑 현재 운영 중인지 아닌지 상태가 있었으면 좋겠다.

참여자 H

2D 행사 참여 경험 있음
여성

1. 어떤 온리전에 참여를 해보았는지?

전독시 관련 행사를 참여하였다.

1-1. 어떻게 참여를 하게 됐는지 ?

해당 작품 관련 SNS(트위터) 비공식 계정을 구독하여 정보를 얻었다.

2. 가게 된 목적이 어떤 것인지?

호감이 있는 작품을 테마로 하는 상품 구입, 거의 90%

공통 관심사를 가지고 있는 지인과 오프라인에서 인사할 기회 10% 정도인 것 같다.

3. 사전에 그런 정보들을 어디서 보는지, 규모등을 파악하는데도 쓰는지?

1번과 동일하게 SNS 트위터 비공식 정보 계정을 구독하여 리트윗 되는 행사 계정 글을 보고 개최 여부를 파악했다. 이후엔 행사 운영 계정에서 지시하는 안내문을 읽었다.

지금까지는 행사 규모를 아는데 문제는 크게 없었지만 아무래도 개인이 선의로 운영하는 계정에 의존하다보니, 놓치고 지나가는 부분이 있을 수 있고 그 계정이 사라질 경우 알기 어려울 것 같음.

3D 위주로 파는 사람들이랑 다른 부분이 있을 수도 있음

참여자 Y

1. 자기소개

저는 성인 세븐틴 팬입니다. 2016년부터 좋아했고 콘서트에 자주 갑니다.

2. 이벤트 참여

생일 카페 이벤트에 가끔 참여합니다.

3. 평일에 가고 싶은 이벤트

퇴근 후에 갈 수 있는 곳에만 갑니다.

4. 정보 정리 목적

본인이 보려는 것도 있지만 정보가 많이 모아지면 아이돌의 인기가 많다는 걸 체감하게 되어 만족감을 느낍니다.

5. 사람들이 정보를 사용하는 걸 알 수 있는지

따로 확인하지는 않았지만 정보 트위터를 사람들이 리트윗 하면 저 사람들이 사용하겠구나 했습니다.

6. 이벤트 목록을 따로 만드는지

요즘에는 집에서 가까운 곳에서 열리는 이벤트 정보만 저장해둡니다. 예전에는 메모장에 간단히 정리해뒀습니다.

7. 지도와 트윗 타래 중 선호

트윗 타래를 선호합니다. 트윗 타래에서 바로 미리보기로 이벤트 포스터와 컵홀더 정보를 바로 인식하기 쉽습니다. 지도는 하나씩 이벤트 썸네일을 눌러 봐야 해서 비교적 번거롭습니다.

8. 트위터가 아닌 서비스에 정보를 올릴 의향

웹 기반이 아닌 모바일 기반 어플/사이트면 올릴 의향이 있습니다. 업무 후에 다시 노트북을 사용하려면 피로한데 모바일 서비스에 정보를 올리는 건 방에서 편하게 작업할 수 있어 수월합니다.

주최자

주최자 R 카톡 인터뷰

간단한 자기소개 부탁드립니다.

지금 세븐틴을 좋아한 지 1년 정도 되었고, 이벤트 주최는 이번 민규 생일 카페가 처음입니다.

평소에 다른 분들이 주최하시는 오프라인 팬 이벤트를 많이 참여하시는 편인가요?

평소 오프라인 팬 이벤트에 다니는 걸 너무 좋아해서 전시회, 상영회, 생일카페, 이벤트 카페 등등 행사에 열심히 다니는 편입니다. 그래서 이번 생일카페도 같이 하자는 제안을 받았을 때 한번 해볼까 하고 도전할 수 있었던 것 같아요.

행사 준비부터 마무리까지의 단계를 간략하게 말씀해주시겠어요?

작년 12월쯤 생카를 하려고 하는데 같이 해보겠냐는 제안을 받고 먼저 컨셉에 대한 논의를 많이 했었습니다. 영화를 메인컨셉으로 기획했어서, 카페의 전체적인 분위기를 잡는데 참고할 이미지를 많이 찾아보면서 가닥을 잡았던 것 같습니다. 그렇게 어느정도 컨셉이 잡히고 나서는 메인 영상 및 포스터 제작에 대해 논의를 하고 디자인이 필요한 부분들을 하나 둘 만들어 갔습니다. 그리고 두 달 쯤 전부터 제일 중요한 럭키드로우와 굿즈들을 제작했던 것 같아요! 이 부분이 시간이 제일 오래 걸리고... 고통의 시간들이었습니다..... 중간중간 카페 디피 관련 용품들도 계속 구입을 했고요! 카페 진행에 필요한 특전들과 굿즈가 전부 준비되고 나서는 엄청난 포장을 하며 카페측과 수량 및 마카롱 제작에 대해 논의를 했습니다. 이런 과정들을 거쳐 3월 말 쯤에 준비를 거의 마쳤던 거 같습니다. 그리고 이제 카페 오픈 전날 오후에 카페에 가서 밤을 꼴딱 새며 디피 및 준비를 하고... 카페를 오픈하게 되었습니다!

특전과 굿즈를 준비한 후, 카페 측과 메뉴 상의를 거쳐 준비

럭키드로우와 특전, 굿즈, 음료와 마카롱 등은 어떤 식으로 준비하고, 수량은 어떻게 결정되나요?

럭키드로우를 위해 카페에 방문하는 사람들이 많은 만큼 사람들의 욕망을 자극할만한 물품이어야 한다고 생각했습니다. 그래서 다른 카페들의 예시를 찾아보고 다른 팬들에게 럭키드로우를 한다면 뭘 뽑고 싶은지 물어보며 품목을 신중하게 정했었습니다! 물품 디자인들은 카페 컨셉을 정할 때 골라두었던 이미지들과 영화를 참고하며 자체적으로 제작했습니다.

특전의 경우에도 다른 카페들의 예시를 많이 참고하였고, 영화에 등장하는 상징적인 것들이 들어갈 수 있도록 신경을 많이 썼습니다. (경찰증, 비행기표, 수하물 택 등) 그리고 화서지몽이라는 카페를 자랑(?)하기 위해 카페 이름이 들어간 스티커들도 함께 제작해서 특전으로 넣었습니다 ㅎㅎ. 그림엽서의 경우에는 다른 분들께 협력을 부탁드려서 영화의 장면들에 민규를 넣어 제작을 했습니다. 영화의 분위기와 컨셉을 최대한 살리기 위해 특전 포장 종이부터 구성까지 엄청나게 고민했던 시간들이 떠오르네요...

굿즈는 럭키드로우와 선착 및 럭키넘버 위해 제작했던 것들이라 럭키드로우 내용과 같습니다!

마카롱의 경우 민규의 강아지 이미지를 생각하며 저희가 직접 그려서 도안을 카페 측에 부탁드렸고, 음료의 종류와 마카롱 수량은 카페 측과 논의하며 이전 카페들의 판매수량 및 요일 등을 고려하여 함께 정합니다.

별도의 수량조사는 따로 하지 않고 카페와의 상의를 통해서만 수량을 결정하신 건가요?

네 수량조사는 따로 진행하지 않고, 이전 카페들의 예시를 참고하여 카페와의 논의 후 결정됩니다. 사실 사전에 이정도 합시다~ 하고 논의를 하긴 했지만 그대로 하지 않고, 카페를 진행하면서 상황에 따라 추가하거나 줄였던 것 같습니다. 그 점은 조금 불편하긴 했어요. 미리 부탁드린 수량이 있는데도 그걸 유동적으로 하시길 원하시더라고요. 아마 재고 문제 때문이겠죠? 근데 이 부분은 카페마다 다른 것 같아요! 저희가 진행했던 카페가 그랬습니다.

카페(대관처)는 재고 문제에 민감

재고 문제를 말씀해 주셨는데, 특전과 음료 등을 준비한 만큼 참관객이 오셨나요? 공지 트윗의 알티 수에 비해서 얼마나 오신 편이라고 생각하시나요?

걱정한 것에 비해 관심을 많이 받고, 참관객도 많이 왔다고 저는 생각합니다! 물론 물량 자체를 넉넉하게 준비했어서 재고가 남기는 했지만, 공지 계정 알티 수나 관심에 비해 많이 오셨다고 느꼈습니다. 위치가 아무래도 생카들이 모여있는 메인 쪽과는 떨어져 있어서 걱정을 많이 했거든요…

행사 당일에 특전이 얼마나 나가는지 수량 파악은 어떻게 하시는 편인가요?

사실 일반 특전은 워낙 수량이 넉넉해서 다 나갈리 없다고 생각했기 때문에 따로 수량 파악을 하진 않았습니다. 음료 및 특전 제공도 다 카페에서 맡아서 하시기 때문에..

디저트 특전 같이 한정수량인 것은 하루치 물량을 미리 나누어 두었기 때문에 따로 파악을 하진 않고, 정해진 당일 수량이 다 나가면 품절을 붙이는 걸로 했습니다.

럭키드로우의 경우에도 매일 나갈 수량을 정해두어서 당일 수량이 다 나가면 종료를 했었습니다.

행사 당일에 럭키드로우 수량 파악, 음료+디저트 재고 확인(카페와 소통) 외에 또 하셨던 일이 있으실까요?

디저트와 음료 재고도 카페에서 확인하고 처리해주는 부분이라 저희는 수량을 추가할지 줄일지만 카페와 논의했습니다.

행사를 진행하면서는 럭키드로우 진행과 카페 내부 디피 및 진행에 이상이 있는지 확인 및 보수만 했습니다. 럭드 종료 후에는 혹시 모를 문제가 생길 수 있으니 대기조로 있는 느낌이었습니다.

진행하셨던 생카가 인기가 꽤 있었던 생카인 걸로 아는데, 참관객이 많을 때는 어떻게 대응하셨는지 궁금합니다.

카페 자체가 규모가 커서 많은 분들이 오셔도 크게 혼잡스럽거나 하지 않았던 것 같습니다. 그리고 참관객 분들께서 다들 질서를 잘 지켜주셔서 음료 구매나 구경하시는 부분에 대해서는 저희가 크게 신경쓸 부분이 없었습니다.

다만 럭키드로우에 사람이 많을 때는 한쪽 방향으로 줄을 설 수 있도록 안내를 하거나 스탭끼리 역할을 나누어서 입금 및 현금 확인, 뽑기 결과 확인, 경품 제공으로 역할을 나누어서 혼선 없이 빠르게 진행될 수 있도록 신경을 썼던 것 같습니다.

주로 질서 정리가 필요한 부분은 이벤트 부분인 거군요? 공지 계정을 보면 마카롱이나 럭드가 도중에 마감되기도 했는데, 참관객 분들이 재고가 들어올 때까지 기다리시는 편인가요, 협력 엽서 등의 특전만 받고 가시는 편인가요?

마카롱의 경우 카페측과 소통 문제가 있었던 거라 저희도 미리 안내를 드리지 못했어서.. 특전을 목표로 오신 분들은 대체로 제공된 일반 마카롱(민규 모양X)을 사고 특전을 받아가시기도 했지만, 마카롱을 구매를 하지 않는 분들도 계셨습니다.

럭드도 공지를 못 보고 오신 분들은 아쉬워하시며 음료 및 마카롱만 구매하고 가시기도 했는데, 구매를 하지 않고 그냥 가시는 분들도 계셨습니다. 느낌 상 럭드 마감 이후에는 좀 사람이 덜 오시는 것 같기도 했습니다.

이벤트 컨셉뿐 아니라 이벤트에서 제공하는 컨텐츠나 기념품도 다들 중요하게 생각하시는 것 같아요. 꼭 하나만 골라야 한다면 특전이 품절될 정도로 참관객이 줄을 설 정도로 많이 오시고 생카가 화제가 되는 게 좋을까요, 재고가 남더라도 감당할 수 있을 정도로만 오시는 게 좋을까요?

저는 많은 사람들이 저희의 결과물을 좋아하고 봐주시는 게 좋아서 특전이 품절될 정도로 참관객이 줄을 서는 핫한! 생카였으면 좋겠습니다. 길어야 3-4일 정도인데 성황리에 마무리 된다면 그정도는 감수할 수 일을 것 같습니다.

그렇다면 홍보도 많이 하시는 편인가요? 주로 어떤 식으로 홍보를 하시나요?

홍보는 트위터나 다른 sns를 통해 지인들을 대상으로 주로 했었습니다. 공식적으로보다는 주로 지인들에게 홍보를 했던 것 같습니다.

다수를 대상으로 하는 홍보는 트위터 계정에 글을 올리는 것 정도만 했습니다. 그리고 민규 생카 모음을 만들어주시는 분들의 힘을 믿었던 것 같습니다.

실제로 생카 모음 타래에 인용되고 나면 리트윗이 많이 되는 걸 체감하시나요?

팔로워가 많은 계정의 타래에 인용되거나, 팔로워가 많은 계정이 인용을 하거나 알티를 하면 리트윗이 되는 효과가 있었던 것 같습니다.

이벤트 후기가 많으면 좋은 점은 무엇이라고 생각하시나요? 이벤트가 끝난 뒤에 올라오는 후기도 의미가 있나요?

저도 다른 카페들을 방문하고 후기를 썼던 경험을 생각해보면, 후기는 쓰시는 사람에게도 카페에서 느꼈던 감정을 정리하고 그것을 남들과 함께 공유하며 추억할 수 있다는 점에서 의미가 있는 것 같습니다! 물론 후기 이벤트에 당첨될 시 상품을 받을 수 있다는 점도 있겠지만요ㅎㅎ

이번에 주최가 되어 후기 이벤트를 진행해보니, 오신 분들께서 저희 카페에서 느낀 점이나 좋았던 점 그리고 개인적인 생각들을 정성스럽게 예쁜 말들과 함께 써주시는 걸 읽을 수 있어 정말 행복했습니다! 끝나고도 종종 카페에 대해 생각할 때 해시태그를 타고 들어가서 읽곤 하는데, 추억할 수 있는 말들이 남아있다는 게 정말 좋았습니다. 이벤트 참여 목적이 아니더라도 남겨주시는 모든 후기들은 정말 너무 소중하고 감동적이라고 생각합니다! 정말 읽으면서 기뻤어요. 저희가 의도한 부분을 알아채주시고 그걸 적어주시면 그게 정말 기쁘더라구요 ㅎㅎ

이벤트 주최를 준비하는 분들이 알아둬야 할 점이 있다면 무엇일까요?

“사랑만으로는 될 수 없을 지도...”라는 생각이 드네요. 사실 모든 이벤트가 그렇지만 어떻게 하느냐에 따라 과정과 필요한 시간 및 돈이 많이 달라진다고 생각합니다. 정말 멋진 카페를 만들고 싶다! 는 욕심을 가지고 진행을 했던 터라 정말 많은 노력들이 들어가서 특히 힘든 점도 많았던 것 같습니다. 하지만 마음 맞는 사람들과 함께 준비하고 진행해서 정말정말 좋은 추억으로 남았습니다. 이벤트를 진행 하게 된다면 마음이 잘 맞는 사람들과 함께 하는 게 정말 중요한 것 같습니다! 그리고 생각보다 챙기고 신경써야 하는 게 정말 많다는 것. 가볍게 시작할 일은 아닌 것 같다고 느꼈습니다.

주최자K 육성 인터뷰

간단한 자기소개 부탁드립니다.

덕질은 평생 해왔구요, 세븐틴은 2년정도 좋아한 것 같고 이벤트 개최는 다과회나 교류회 정도(참관객 100명 이하 참여, 예약제로 운영)의 행사는 여러 차례 열어봤었고 생일카페 자체는 처음 열어봐요.

생일 카페 준비부터 마무리의 과정을 설명해주세요.

기획은 데이즈드 화보 보고 어 이거 중경삼림이랑 잘어울리겠다…누가 중경삼림으로 민규 카페를 열어줬으면 좋겠다고 생각하다가 결국에는 제가 열게 됐습니다. 생각했던 카페에 연락을 드렸는데 거기는 계속 대관중. 최대한 어울리는 컨셉, 어둡고 하얗지 않은 홍대 주변 카페를 찾다가 W 카페를 네이버 폼으로 구구절절 써서 대관신청서를 냈어요. 사장님이랑 온오프라인 미팅을 계속함. 굿즈를 어떻게 할것인지. 홍보영상 필요할 것 같아서 커미션 알아보고 짜집기. 디자인. 다른 카페들은 어떻게 선착굿즈나 럭키드로우를 진행하는지 사례와 주변 의견 수집. 굿즈보다 인테리어를 먼저 떠올린 편이라 인테리어에 좀 더 중점을 두고 싶었는데 특전을 대충 할 수가 없게 되었다;; 사방으로 일이 커짐. 저는 인테리어가 별로인 카페는 머리에 남지 않고 오래 머물지 않는다. 와서 사람들이 인형 데리고 사진 찍게 해주고 싶었다. 캠코더랑 TV 연결하는 아이디어. 자기 모습과 카페 인테리어를 같이 사진찍게.

특전, 음료, 마카롱 어떻게 준비하셨나요?

음료와 마카롱은 카페에서 해주시는 것. 사장님께 어떤 종류의 음료 할건지. 카페의 분위기랑도 어울리고 선택지도 넓은 음료. 마카롱 디자인. 민규는 강아지인데 어떤 강아지로 할 것이냐? 컬러감이 다른 강아지로 디자인. 디자인에 어울리면서도 사람들이 좋아할 맛 고르기. 갯수는 사장님과 상의. 카페 인지도, 지금까지 대관처에서 진행했던 사례 참고.

방문객 수는 공지 트윗 알티수와 많이 차이났던 편인가?

비슷하게 오신 것 같다.

알티 수를 참고해서 수량을 정하셨나요?

그건 아니다. 그 알티는 말그대로 알티라고만 생각. 온리전의 경우 수요조사를 해도 30% 정도밖에 판매가 안 된다. 작년에 민규 생일카페 열었던 친구들한테도 물어보고…작년에 비해서는 적게 온 편인 것 같다.

사람이 무조건 많이 방문하는 게 좋은가? 수용 가능한 정도로만 오시는 게 좋은가요?

넓은 카페에서 진행했던 거라 많이 오시면 좋다. 음료와 마카롱은 품절이 안되면 주최진들이 카페에 값을 물어줘야 한다. 품절돼도 주최진에게는 이득이 없지만 최대한 많은 분들 오셔서 사진도 찍고 후기도 남기고 그러는 게 마음이 좋긴 하죠.

사람이 많이 몰렸을 때가 있었나요? 어떻게 대응을 하셨나요?

저희는 상주 스탭이 3명이고 사장님과 알바도 있기도 하고, 카페가 넓어서 사람이 몰렸어도 주변에 피해가 가지 않았던 것 같다. 럭키드로우를 할 때도 줄을 세우는 정도? 좁은 카페에서 진행하는 분들은 힘들었을지도. 다른 민규 카페도 갔었는데 생각보다 좁은 카페가 많았어서 오래 구경하고 싶었는데 그러지 못했던 경우가 많다.

행사 당일에는 주로 어떤 일을 하는지?

본부석에서 할 일은 럭키드로우 정도. 음료나 마카롱은 사장님이나 알바생들이 맡아서 해주시는 거라서 럭키드로우를 중점적으로 관리. 품절난 상품 공지트윗 올리기.

품절됐다고 공지를 쓰면 참관객들이 적게 온다고 느끼셨나요?

럭키드로우가 끝나면 확실히 줄어요. 재개한다고 공지를 올렸을 때 확실히 다시 많이 오시기 시작.

이벤트나 특전 수량이 제때 안내가 되는게 중요하겠네요?

특전은 확실히 공지를 하는게 중요한 것 같다. 특전을 우편으로 보내준다는 카페가 있었는데 굳이? 하면서 안 가게 됨.

마카롱, 음료 등이 품절됐을 때 대응

디자인 마카롱이 품절됐을 때 일반 마카롱으로 교체해서 나간다는 공지를 올렸어요. 보통 마카롱보다는 특전을 받으러 오시기 때문에 큰 영향은 없는 것 같다.

후기가 많으면 어떤 점이 좋은가?

이벤트 도중에 후기가 올라오면 확실히 방문자가 늘어나는 것 같기는 하다. 홍대 메인 거리에서 동떨어져 있었는데, 몇 분이 오셔서 사진 올려 주시니까 우와! 하는 인용도 달리고.

많이 퍼지는 게 중요?

그쵸. 후기가 좋아서 안 가려다 가게 된 카페도 있어요.

이벤트 계정의 사진보다 후기 사진이 영향력이 크다고 생각하시나요?

그건 아닌 것 같아요. 만약에 진짜 팔로워가 많고 영향력이 있는 사람이 극찬을 하며 홍보를 하지 않는 이상은…타래를 보고 오는 사람들이 많으니까 첫 공지 트윗이 가장 중요.

방문자 사진은 홍보효과일 뿐.

대관처 정보는 어떻게 얻으시는지?

생일카페를 많이 가봐야 아는 것 같다. 저는 생카를 진짜 많이 돌아다니는 편. 요즘 대관해주는 카페들은 트위터 계정이 있고, 홍대 카페 대관 이런식으로 검색하면 많이 나옴.

대관처

* 대관처는 업무상 시간을 낼 수 없거나, 앱 타겟에 완벽히 맞지않아(대관 예약 기능 X) 추후 진행하기로 하였음.

인사이트 도출

많은 사용자가 실시간으로 이벤트 현황을 알고싶어 함
대부분의 이벤트는 홍대, 성수 및 대전, 부산, 대구 중 큰 곳 위주로 열리기 때문에 타지역에서 오는 참여자가 많음
해당 참여자들은 각 이벤트에서 제공하는 한정수량 특전(굿즈, 럭키드로우 상품)을 기대하며 방문하지만, 실시간으로 개수를 확인할 수 없어 동선을 낭비하는 경우가 발생 함
주최자 또한 이를 공지하려고 노력하나 모든 참여자에게 안내할 수 없는 점 존재
재고가 남을 경우 제품 값을 주최진이 내야하기 때문에 최대한 많은 사람들에게 홍보하길 원함
이벤트 진행 중, 진행 후 후기가 올라오거나 언급이 많을 경우 참여자에게 영향이 있다는 것을 인지
생일카페 주최 시 이전 사례를 참고하여 수량을 지정하나 관심도와 실제 방문률이 상이한 경우가 많음

[APP] 알뜰교통카드 서비스 뜯어보기

디자인 지지(ZII) — Sun, 19 Mar 2023 22:32:58 +0900

정말 오래만에 글을 쓴다.

UX 디자이너로 일을 시작한지 얼마 안된 것 같은데 다음 달이면 2년차가 된다는게 믿기지가 않음

내 첫 희생양은 알뜰교통카드 애플리케이션이다.

얼마 전 UI가 대대적으로 개편이 되며 불편한 점이 한 두가지가 아니었는데

실제로 UXUI가 개선이 됐는지, 단점이 있다면 어떤 점인지에 대해 간략하게 보도록하자.

기존 앱

AS IS

먼저 기존 앱을 살펴보자.

앱을 눌러 들어가면 제일먼저 얼마나 적립되어있는지 확인할 수 있다.
왼쪽 상단에 이번 달에 적립된 마일리지를 통해 쌓인 금액을 확인할 수 있다.
우측 스탬프 업데이트는 실효성이 있는지 모르겠으나, 오류가 있을 경우 새로고침을 할 수 있는 버튼이다.
가운데 슬라이드 페이지를 통해 적립 현황을 확인할 수 있고 빈 공간 숫자로 적립 횟수를 파악할 수 있다.
이벤트가 있는 날엔 나무 모양이 바뀌며 게임처럼 소소하게 지켜보는 재미를 준다.
하단에는 출발 / 도착 버튼이 엄지존에 알맞게 위치하고 있었다. 크기 덕분에 높은 주목도를 가져간다.

=> 내 정보와 관련된 탭을 더보기란에 두었으면 설정을 할 수 있다고 인식할 수 있었을 것 같다.

공지가 하단에 있어 오히려 버튼이 밑으로 내려오는 것이 오클릭을 덜 유발할 것이라 예상된다. 이용가이드를 따로 두는 것은 좋지만 하단 메뉴 구성을 일반적인 앱처럼 두었다면 하는 아쉬움이 있다. 가이드를 상단으로 올렸다면..?

그럼 바뀐 UI는 어떻게 되어있을까

메인화면

TO BE

먼저 눈에 띄게 바뀐 것은 메인 화면 구성이다.

하단에 있던 공지를 상단으로 옮겼다. 한 줄씩 보이기 때문에 자리를 많이 차지하지않을 수 있다.
나의 알뜰교통카드 탭에선 현재 사용 중인 카드 종류와 이번달 적립금액을 확인할 수 있다.
즐겨찾기는 원하는 정류장을 설정한 뒤, 카드를 찍지 않아도 자동으로 인식해서 적립되는 기능이다. 실제로 작동하는지 실험을 해보려했으나 안찍힐까봐 무서워서(?) 확인을 못했다.... 사회 초년생은 교통비를 아껴야한다.
바로 확인할 수 있던 적립내역을 달력 형태로 변경시켰다. 일주일 단위로 표시가 되며 하단엔 이번 달에 얼마나 사용했는지 보여준다.
바로 밑엔 공지외 알림, 이벤트 등을 확인할 수 있도록 유도하는 배너를 추가했다.
출발, 도착 CTA는 진짜 구려졌다. 항상 노출되어있도록 z-index 값을 높였는데 엄지존 - 우측에 출발 도착버튼을 위치시킨 것은 좋으나 버튼의 크기가 너무 작고 무엇보다 눈에 띄지않는다.
- 주변 배경색 등과 동일한 색상을 사용했기 때문에 색상 주목도가 너무 떨어진다.
- 즐겨찾기 기능을 활용하지않는 유저라면 '오늘은 다른 목적지에 갈래요' 라는 문구가 와닿지 않을 것이다.

세상에..

메인 화면에서 바로 볼 수 있었던 횟수는 밖으로 빼고 상세 내역은 전체 보기를 클릭해야 들어올 수 있다.
오늘 몇시에 출발 도착했는지 알 수 있는 것인데 유의미한 기능인지 잘 모르겠다.
그날그날 이용한 내역이 메인에서 보이는 횟수에 바로 반영되는 것이 아니기 때문에 정확한 확인을 위해 넣어둔 기능인 것 같다.
하단에도 출발 CTA를 넣어두었다.

=> 왜....승, 하차는 찍히지도 않는 항목인데 보이도록 해놓은 것인지 모르겠다. 심지어 상세보기, 전체보기를 누르면 하단 탭은 사라지기 때문에 새로운 화면이 펼쳐진다는 인식이 생겨버려 답답하다. 닫기가 있지만 뒤로 돌아갈 수 없을 것 같은 느낌을 주고, 바로 다른 항목으로 이동할 수 없기 때문이다.

하단 카드 모양의 메뉴를 누르면 현재 사용 중인 카드 내역이 나온다.

=> 이것도 왜,, 메인 메뉴에 넣어둔 것일까 라는 생각이 든다. 기존에도 있던 메뉴인데 사실 사용자 입장에서 카드 변경 등의 이용 관련 설정과 관련된 기능은 상세 메뉴로 빠지도록 은연 중에 기대하고 있을 것이라 생각한다. (이미 많은 앱이 그러고 있기 때문에) 혹은 하단 우측에 있던 프로필을 눌렀을 때 서브 항목으로 카드 앱 설정 / 내 정보 수정 등으로 나누었다면 좋았을 것 같다. (지금은 누르자마자 바로 내 정보 수정으로 들어가진다.)

이렇게 바뀐 UXUI에 대해 분노하고 있던 찰나,

일주일이 지나서 다시 들어가니 (보통 위젯만 활용한다.) UI가 한 번 더 바뀌어있었다.

메인 UI 구성과 라이팅이 바뀌었다는 것!!! (야호 ~!)

하나로 뭉쳐져있던 항목을 각각 카드+금액 / 마일리지 적립으로 구분시켜놨다.
상단에선 금액과 관련된 부분을, 하단에선 마일리지가 자동으로 적립된다는 것을 알릴 수 있도록 UX라이팅을 변경했다.
그리고 제일 중요한!!! 하단 출발 도착 버튼이 기존 앱과 유사하게 변경되었다는 사실

=> 버튼 구성 변경이야말로 환호해야할 부분이라고 생각한다. 유저들의 반응이 매우 나빴던 것인지 A/B test 도중이었던 것인지 아무튼간에 한 눈에 띄는 크기와 색상 변경으로 원래 기능의 위계를 찾았다!

그리고 하단 메뉴에 탭이 하나 더 추가되었는데

하단 마일리지M 버튼을 누르면 나오는 탭이다.
위의 달력 상세보기와 사실상 동일한 기능을 사용하고 있다.
특히 출발, 도착 시간이 찍히는데 위 달력에선 승, 하차도 리스트에 나와있지만 여긴 보이지않는 것으로 보아 차후 업데이트 할 예정이거나 보여주기식(...)으로 보인다.

=> 차라리 메인에서 달력 상세보기를 없애고 하단 메뉴를 통해서만 상세 내역을 보게 한다면 기능이 중복되지않을 것이라고 생각했다. 사용자가 직접 날짜를 설정해서 볼 수 있기 때문에 마일리지적립 탭이 더 유용하다고 생각하는데 왜 두 개를 분리해서 둔 것인가에 대한 의문이 있다.

전체적인 UI는 미니멀하게 바꾸려고 노력한 것이 보이나 초반엔 오히려 기존 앱보다 사용자경험이 더 떨어지는 문제가 발생했다.

버튼의 위계도 떨어지고 라이팅도 (띄어쓰기도,,) 사용성에 맞지않는 경우가 있었다. 그리고 지금도 기능상 왜..? 싶은 것도 있고 햄버거 메뉴를 펼치면 나오는 UI도 고칠 필요가 있지만 아무래도 사용자가 제일 많이 사용하는 부분에 대해선 빠르게 대처를 하려했다는 것이 느껴진다.

정부 앱이 계속해서 피드백을 받고 발전해나가기가 쉽지않다는 것을 알고 있기 때문에 이정도면 매우 긍정적으로 평가해줄 수 있을 것 같다.

상세하게 메뉴를 뜯어보지 못해서 아쉽지만.. 다음에 시간이 된다면 이 앱을 어떻게 고치면 더 좋은 UX를 가져갈지에 대해 직접 프로토타입을 만들어 포스팅해보려고 한다.

노답 메뉴.. 심지어 하단에 저건 푸터도 아니다.

UX/UI 디자인의 이해

디자인 지지(ZII) — Fri, 1 Apr 2022 02:21:37 +0900

커리어 쌓기 6단계

이론 공부 - 툴 익히기 - 경험 쌓기 - 네트워킹 - 멘토 찾기 - 채용 정보 찾기

유용한 사이트 & 설정

Medium : https://medium.com
Smashing : https://smashing.com
NNG(Nielsen Norman Group) : https://nngroup.com
Feedly : RSS Feed 제공
Alfred : 빠른 검색 기능 제공

UX, UI, Usability, UCD

UX : 전체
- User Experience(사용자경험)
- 사용자가 직, 간접적으로 느끼고 생각하게 되는 모든 경험
- 혹은 사용자와의 상호작용과 관련된 모든 측면

UI : 접점
- User Interface(사용자 인터페이스)
- 사용자가 특정 작업을 수행할 수 있도록 정보, 제어 수단을 제공하는 대화형 시스템의 모든 구성요소
- 다양한 형태의 Touch Point. ex) 제품, 소프트웨어, 가게의 점원, 공간 등

Usability : 측정
- UI의 사용성을 평가하는 품질 속성
- 사용성은 측정 가능해야한다.
- Jakob Nielsen : 10가지 사용성 평가 원칙

USD : 철학
- User Centered Design(사용자 중심 디자인)
- 철학적 접근 방법이자 디자인 사상이다.
- 사용자의 한계 능력, 상황에 맞춰 디자인 프로세스를 통해 사용자 중심으로 사고하여 제품을 만드는 것
- 다양한 디자인 접근 방법 : 시스템 디자인, 기능 중심 디자인, 직관적 디자인, 연구 중심 디자인

UX, CX, BX

UX와 BX는 약속된 경험을 제공해야한다.

UX
- 디지털 환경에 한정. 제약이 있음

CX
- Customer Experience(고객 경험)
- UX 보다 더 큰 범위

BX
- Brand Experience(브랜드 경험)
- CX 보다 더 큰 범위로, 고객이 아닌 대상에게도 전달하고자 함
- 기업이 고객이 느끼는 감정에 영향을 주기 위해 만든 종합적이고 체험적인 마케팅의 일종

Design Process

애자일 기반 프로세스가 대세지만 대부분의 회사는 폭포수 방식이다.

Waterfall(폭포수)
- 다음 단계로 넘어가기 전 모든 것을 문서화
- 문제정의 - 디자인 - 개발 - 검증 - 출시
- 단계 별로 모든 작업이 완료되기 때문에 상대적으로 쉬운 디자인 적용
- 문제에 빠르게 대응하기 힘듦

Agile(애자일)
- 폭포스 프로세스의 단점 보완을 위해 생김
- 작은 팀 규모, 가까운 물리적 위치, 팀원 간 엄격하지 않은 역할구분이 필요
- 문제정의 - 디자인 - 개발 - 검증을 쪼개서 반복

Lean UX(린 UX)
- 리서치를 통한 가설 같은 불확실성을 다루는데 최적화 된 애자일 프로세스
  - MVP(Minimum Viable Product, 최소 요건 제품) 검증시 사용
  - 고객에게 비즈니스 가치를 제공할 수 있는 최소한의 기능을 구현한 제품
  - 비즈니스 가설 검증을 목표로 함
- 아이디어(가설) - 구현 - 제품 - 측정 - 데이터 - 학습 반복

Design Sprint(디자인 스프린트)
- 구글에서 새로운 제품을 출시할 때 위험을 줄이기 위해 만든 프로세스
- 목표를 명확하게 정의 후 가정을 검증
- 개발 시작 전 제품 로드맵을 결정하는데 사용
- 5일간 Design Thinking을 수행
- 아이디어 - 개발 - 출시 - 학습 (학습과 아이디어 반복)

필요 역량
- 공감 능력 : 비즈니스와 사용자를 빠르게 이해하고 공감
- 다양한 방법론 : 다양한 방법론과 스킬을 목적에 맞게 사용
- 프로토타이핑 : 아이디어를 빠르게 시각화하고 검증

본 글은 패스트캠퍼스 강의를 토대로 작성되었습니다.

[자료구조 / Stack] 스택(Stack)

디자인 지지(ZII) — Fri, 19 Nov 2021 10:26:53 +0900

Stack

스택(Stack)

나중에 넣은 데이터가 먼저 나오는 LIFO 기반의 선형 자료 구조

구현 메서드
- 데이터 전체 획득 / 비어 있는지 확인: Stack.getBuffer(), Stack.isEmpty()
- 추가 / 삭제 / 마지막 데이터 조회 / 크기 확인: Stack.push(), Stack.pop(), Stack.peek(), Stack.size()
- 데이터 위치 / 존재 여부 확인: Stack.indexOf(), Stack.includes()

✔ Stack 구현 예제(1)

// Stack() : 생성자 함수로, 초기 데이터 설정
function Stack(array) {
  this.array = array ? array : [];
}

// 객체 내 데이터 셋 반환
Stack.prototype.getBuffer = function() {
  return this.array.slice();
};

// 객체 내 데이터 존재 여부 파악
Stack.prototype.isEmpty = function() {
  return this.array.length == 0;
};

let stack = new Stack([1, 2, 3]);

console.log(stack);

let data = stack.getBuffer();
console.log(data === stack.arry); // false
console.log(data); // [1, 2, 3]

console.log(stack.array); // false

console.log(Object.getOwnPropertyDescriptors(Stack.prototype));

✔ Stack 구현 예제(2)

젤 중요한 push(), pop()

Stack.prototype.push = function (element) { 
  // push(): 데이터 추가
  return this.array.push(element);
};

Stack.prototype.pop = function () { 
  // pop(): 데이터 삭제
  return this.array.pop();
};

Stack.prototype.peek = function () { 
  // peek(): 가장 끝 데이터 반환
  return this.array[this.array.length - 1];
};

Stack.prototype.size = function () { 
  // size(): 스택 내 데이터 개수 확인
  return this.array.length;
};

let stack = new Stack([1, 2]);

console.log(stack); // Stack { array: [ 1, 2 ] }
stack.push(3);
console.log(stack); // Stack { array: [ 1, 2, 3 ] }

console.log(stack.pop()); // 3
console.log(stack.pop()); // 2
console.log(stack.peek()); // 1
console.log(stack.size()); // 1

✔ Stack 구현 예제(3)

element 위치 확인, 데이터 존재 여부 확인

Stack.prototype.indexOf = function(ele, position = 0) {
  for (let i = position; i < this.array.length; i++) {
    if (ele === this.array[i]) return 1;
  }

  return -1;
};

Stack.prototype.inCludes = function(ele, position = 0) {
  for (let i = position; i < this.array.length; i++) {
    if (ele === this.arry[i]) return true;
  }

  return false;
};

let stack = new Stack([1, 2, 3]);

console.log(stack.indexOf(1)); // 0
console.log(stack.indexOf(1, 2)); // -1
console.log(stack.includes(1)); // true
console.log(stack.includes(1, 2)); // false

[자료구조 / Queue] 원형 큐(Circular Queue)

디자인 지지(ZII) — Thu, 18 Nov 2021 14:32:21 +0900

Circular Queue

원형 큐(Circular Queue)

원형 형태를 가진 FIFO 기반 선형 자료 구조

length보다 길게 넣을 경우 삭제 시키기(메서드 사용)
구현 메서드
- 데이터가 다 찼는지 / 비어있는지 확인: CircularQueue.isFull(), PriorityQueue.isEmpty()
- 데이터 추가 / 삭제 / 반환: CircularQueue.enqueue(), CircularQueue.dequeue(), CircularQueue.getBuffer()
- 첫 번째 데이터 / 사이즈 / 전체 삭제: CircularQueue.front(), CircularQueue.size(), CircularQueue.clear()

✔ Circular Queue 구현 예제(1)

// CircularQueue(): 초기 속성값 설정을 위한 생성자 함수
function CircularQueue(arr = [], size = 5) {
  this.arr = arr;
  this.size = arr.length > size ? arr.length : size;
  this.length = arr.legnth;
  this.head = 0;
  this.tail = arr.length;
}

// getBuffer(): 객체 내 데이터 셋 반환
CircularQueue.prototype.getBuffer = function () {
  return this.arr.slice();
}

// isEmpty(): 데이터 비어있는지 확인
CircularQueue.prototype.isEmpty = function () {
  return this.length == 0;
};

// isFull(): 데이터 꽉 차 있는지 확인
CircularQueue.prototype.isFull = function () {
  return this.length == this.size;
};

let cq = new CirculartQueue([1, 2, 3]);
console.log(cq);

console.log(cq.isEmpty());
console.log(cq.isFull());
console.log(Object.getOwnPropertyDescriptors(CircularQueue.prototype));

✔ Circular Queue 구현 예제 (2)

// enqueue(): 데이터 추가
CircularQueue.prototype.enqueue = function (element) {
  if (this.isFull()) return false;

  this.array[this.tail] = element;
  this.tail = (this.tail + 1) % this.size;
  this.length++;

  return true;
};

// dequeue(): 데이터 삭제
CircularQueue.prototype.dequeue = function () {
  if (this.isEmpty()) return undefined;

  let element = this.array[this.head];
  delete this.array[this.head];
  this.head = (this.head + 1) % this.size;
  this.length--;

  return element;
};

let cq = new CircularQueue([1, 2, 3, 4]);
console.log(cq);

cq.enqueue(5);
cq.enqueue(6);
console.log(cq);

console.log(cq.dequeue());
console.log(cq.dequeue());
console.log(cq);

cq.enqueue(6);
console.log(cq);

✔ Priority Queue 구현 예제(3)

const DEFAULT_SIZE = 5;

// front(): 가장 첫 데이터 반환
CircularQueue.prototype.front = function () {
  return this.length == 0 ? undefined : this.array[this.head];
};

// dataSize(): 큐 내 데이터 개수 확인
CircularQueue.prototype.dataSize = function () {
  return this.length;
};

// clear(): 큐 초기화
CircularQueue.prototype.clear = function (size = DEFAULT_SIZE) {
  this.array = [];
  this.size = size;
  this.length = 0;
  this.head = 0;
  this.tail = 0;
};

let cq = new CircularQueue([1, 2, 3, 4]);
console.log(cq);

cq.enqueue(5);
cq.enqueue(6);
console.log(cq.dequeue());
console.log(cq.dequeue());
console.log(cq);

cq.enqueue(6);
console.log(cq);
console.log(cq.front());
console.log(cq.dataSize());

cq.clear(10);
console.log(cq);

[자료구조 / Queue] 우선순위 큐(Priority Queue)

디자인 지지(ZII) — Sat, 13 Nov 2021 22:39:26 +0900

Priority Queue

우선순위 큐(Priority Queue)

우선순위를 고려하여 먼저 넣은 데이터가 먼저 나오는 FIFO 기반의 선형 자료 구조

우선순위 정렬 방식: 배열 기반, 연결리스트 기반, 힙(Heep) 기반 등의 정렬 방식 존재
구현 메서드
- 데이터 전체 획득 / 비어있는지 확인: PriorityQueue.getBuffer(), PriorityQueue.isEmpty()
- 데이터 추가 / 삭제: PriorityQueue.enqueue(), PriorityQueue.dequeue()
- 첫 번째 데이터 / 사이즈 / 전체 삭제: PriorityQueue.front(), PriorityQueue.size(), PriorityQueue.clear()

✔ Priority Queue 구현 예제(1)

// Element(): 데이터와 우선순위를 저장하기 위한 생성자 함수
function Element(data, priority) {
  this.data = data;
  this.priority = priority;
}

// PriorityQueue(): Element 관리를 위한 생성자 함수
function PriorityQueue() {
  this.array = [];
}

// getBuffer(): 객체 내 데이터 셋 반환
PriorityQueue.prototype.getBuffer = function () {
  return this.array.map((element) => element.data);
};

// isEmpty(): 객체 내 데이터 존재 여부 파악
PriorityQueue.prototype.isEmpty = function () {
  return this.array.length == 0;
};

console.log(Object.getOwnPropertyDescriptors(Element.prototype));
console.log(Object.getOwnPropertyDescriptors(PriorityQueue.prototype));

✔ Priority Queue 구현 예제 (2)

// enqueue(): 데이터 추가
PriorityQueue.prototype.enqueue = function (data, priority) {
  let element = new Element(data, priority);
  let added = false;
  for (let i = 0; i < this.array.length; i++) {
    if (element.priority < this.array[i].priority) {
      this.array.splice(i, 0, element);
      added = true;
      break;
    }
  }

  if (!added) {
    this.array.push(element);
  }

  return this.array.length;
};

// dequeue(): 데이터 삭제
PriorityQueue.prototype.dequeue = function () {
  return this.array.shift();
};

let pq = new PriorityQueue();

pq.enqueue("Alice", 1);
pq.enqueue("Bob", 2);
console.log(pq);

pq.enqueue("Tom", 1);
pq.enqueue("John", 3);
console.log(pq);

console.log(pq.dequeue());
console.log(pq.dequeue());
console.log(pq);

✔ Priority Queue 구현 예제(3)

// front(): 가장 첫 데이터 반환
PriorityQueue.prototype.front = function () {
  return this.array.length == 0 ? undefined : this.array[0].data;
};

// size(): 큐 내 데이터 개수 확인
PriorityQueue.prototype.size = function () {
  return this.array.length;
};

// clear(): 큐 초기화
PriorityQueue.prototype.clear = function () {
  this.array = [];
};

let pq = new PriorityQueue();

pq.enqueue("Alice", 1);
pq.enqueue("Bob"a, 2);
pq.enqueue("Tom", 1);
pq.enqueue("John", 3);

console.log(pq.getBuffer());

console.log(pq.dequeue());
console.log(pq.dequeue());
console.log(pq);

console.log(pq.front());
console.log(pq.size());

✔ Priority Queue 구현 예제(4)

// front(): 가장 첫 데이터 반환
PriorityQueue.prototype.front = function () {
  return this.array.length == 0 ? undefined : this.array[0].data;
};

// size(): 큐 내 데이터 개수 확인
PriorityQueue.prototype.size = function () {
  return this.array.length;
};

// clear(): 큐 초기화
PriorityQueue.prototype.clear = function () {
  this.array = [];
};

let pq = new PriorityQueue();

pq.enqueue("Alice", 1);
pq.enqueue("Bob", 2);
pq.enqueue("Tom", 1);
pq.enqueue("John", 3);

console.log(pq.getBuffer());

console.log(pq.dequeue());
console.log(pq.dequeue());
console.log(pq);

console.log(pq.front());
console.log(pq.size());

[자료구조 / Queue] 큐(Queue)

디자인 지지(ZII) — Mon, 8 Nov 2021 22:35:47 +0900

Queue

1) 큐(Queue)

먼저 넣은 데이터가 먼저 나오는 FIFO 기반의 선형 구조

구현 메서드
- 데이터 전체 획득 / 비어 있는지 확인: Queue.getBuffer, Queue.isEmpty()
- 데이터 추가 / 삭제: Queue.enqueue(), Queue.dequeue()
- 첫 번째 데이터 / 사이즈 / 전체 삭제: Queue.front(), Queue.size(), Queue.clear()

Queue 구현 예제(1)

객체 내 데이터 셋 반환, 존재 여부 파악

// Queue(): 생성자 함수로 초기 데이터 설정
function Queue(array) {
  this.array = array ? array : [];
}

// getBuffer(): 객체 내 데이터 셋 반환
Queue.prototype.getBuffer = function () {
  return this.array.slice();
};

// isEmpty(): 객체 내 데이터 존재 여부 파악
Queue.prototype.isEmpty = function () {
  return this.array.length == 0;
};

let queue = new Queue([1, 2, 3]);

console.log(queue); // queue { array: [ 1, 2, 3 ] }

let data = queue.getBuffer();
console.log(data === queue.array); // output: false
console.log(data); // output: [ 1, 2, 3 ]

console.log(queue.isEmpty()); // output: false

console.log(Object.getOwnPropertyDescriptors(Queue.prototype))

Queue 구현 예제(2)

데이터 추가, 삭제

// enqueue(): 데이터 추가
Queue.prototype.enqueue = function (element) {
  return this.array.push(element);
};

// dequeue(): 데이터 삭제
Queue.prototype.dequeue = function () {
  return this.array.shift();
};

let queue = new Queue([1, 2]);
console.log(queue); // Queue { array: [ 1, 2 ] }

queue.enqueue(3);
queue.enqueue(4);
console.log(queue); // Queue { array: [ 1, 2, 3, 4 ] }

console.log(queue.dequeue()); // output: 1
console.log(queue.dequeue()); // output: 2
console.log(queue); // Queue { array: [ 3, 4 ] }

Queue 구현 예제(3)

데이터 변환, 개수 확인, 초기화

// front(): 가장 첫 데이터 반환
Queue.prototype.front = function () {
  return this.array.length == 0 ? undefined : this.array[0];
};

// size(): 큐 내 데이터 개수 확인
Queue.prototype.size = function () {
  return this.array.length;
};

// clear(): 큐 초기화
Queue.prototype.clear = function () {
  this.array = [];
};

let queue = new Queue([1, 2, 3, 4]);

queue.dequeue();
console.log(queue.front()); // 2
console.log(queue); // Queue { array: [ 2, 3, 4 ] }

console.log(queue.size()); // 3
queue.clear();
console.log(queue); // Queue { array: [] }
console.log(queue.size()); // 0

2) 큐 최적화

방식 개선: enqueue/dequeue방식을 push/shift에서 index로 변경(shigt는 O(n), index는 O(1))

function Queue(array) {
  this.array = array ? array : [];
  this.tail = array ? array.length : 0;
  this.head = 0;
}

Queue.prototype.enqueue = function (element) {
  return (this.array[this.tail++] = element);
};

Queue.prototype.dequeue = function () {
  if (this.tail === this.head) return undefined;

  let element = this.array[this.head];
  delete this.array[this.head++];
  return element;
};

let queue = new Queue([1, 2]);
console.log(queue); // Queue { array: [ 1, 2 ], tail: 2, head: 0 }

queue.enqueue(3);
queue.enqueue(4);
console.log(queue); // Queue { array: [ 1, 2, 3, 4 ], tail: 4, head: 0 }

console.log(queue.dequeue()); // 1
console.log(queue.dequeue()); // 2
console.log(queue); // Queue { array: [ <2 empty items>, 3, 4 ], tail: 4, head: 2 }

3) benchmark(성능 측정)

enqueue/dequeue 성능 비교: push/shift를 사용한 queue_1과 index를 사용한 queue_2로 성능 비교

let queue_1 = new Queue_1();
let queue_2 = new Queue_2();
const count = 100000;

function benchmark(queue, enqueue) {
  let start = Date.now();
  for (let i = 0; i < count; i++) {
  enqueue ? queue.enqueue() : queue.dequeue();
  }
  return Date.now() - start;
}

console.log("enqueue queue_1: " + benchmark(queue_1, 1) + "ms"); // queue_1: 8ms
console.log("enqueue queue_2: " + benchmark(queue_2, 1) + "ms"); // queue_2: 6ms

console.log("dequeue queue_1: " + benchmark(queue_1, 0) + "ms"); // queue_1: 5695ms
console.log("enqueue queue_2: " + benchmark(queue_2, 0) + "ms"); // queue_2: 9ms

통 속의 뇌

[독서일기] 사용자를 끌어들이는 UX/UI의 비밀 :: 인터페이스는 삶을 더 쉽게 만들어야 한다.

서문 :: 인터페이스는 삶을 더 쉽게 만들어야 한다.

[Web] 오프메이트 서비스 분석하기

메인화면

자주 묻는 질문

프로필

회원가입/로그인

아티스트 검색

핵심 기능 (찜, 지도 및 이벤트 상세정보)

내일채움공제 2년형 만기 후기 :: 타임라인, 만기 퇴사, 기업기여금

Timeline

1. 퇴사 언급​

​2. 포도알 24개 채우기와 취업지원금, 기업기여금

3. 고대하던 만기신청

[Loveseek] 생카 애플리케이션 개발을 위한 시장조사 및 사용자 리서치

사용자는 어떻게 이벤트를 확인하나

문제 정의 및 목표 분석

1) 온라인 설문조사 :: 구글폼

사용자 연령층

팬 이벤트 참여 시 불편했던 경험

팬 이벤트 앱에 기대하는 점

2) 비대면 인터뷰 (참여자, 주최자, 대관처)

참여자

주최자

대관처

인사이트 도출

[APP] 알뜰교통카드 서비스 뜯어보기

기존 앱

메인화면

UX/UI 디자인의 이해

UX, UI, Usability, UCD

UX, CX, BX

Design Process

[자료구조 / Stack] 스택(Stack)

Stack

스택(Stack)

✔ Stack 구현 예제(1)

✔ Stack 구현 예제(2)

✔ Stack 구현 예제(3)

[자료구조 / Queue] 원형 큐(Circular Queue)

Circular Queue

원형 큐(Circular Queue)

✔ Circular Queue 구현 예제(1)

✔ Circular Queue 구현 예제 (2)

✔ Priority Queue 구현 예제(3)

[자료구조 / Queue] 우선순위 큐(Priority Queue)

Priority Queue

우선순위 큐(Priority Queue)

✔ Priority Queue 구현 예제(1)

✔ Priority Queue 구현 예제 (2)

✔ Priority Queue 구현 예제(3)

✔ Priority Queue 구현 예제(4)

[자료구조 / Queue] 큐(Queue)

Queue

1) 큐(Queue)

Queue 구현 예제(1)

Queue 구현 예제(2)

Queue 구현 예제(3)

2) 큐 최적화

3) benchmark(성능 측정)

1. 퇴사 언급

2. 포도알 24개 채우기와 취업지원금, 기업기여금