Untitled

[240824] 14주차 WIL

kuichana — Fri, 30 Aug 2024 21:34:47 +0900

️ 이번주에 한 일

✅ 중간 발표

✅ 추가 설문조사, 인터뷰

✅ 문제 재정의

✅ 가설 설정, 솔루션 도출

중간 발표

지금까지 진행해 온 내용을 기반으로 중간 발표를 진행했다. 문제 정의 이후에 너무 급하게 주말 내에 솔루션, IA, 와이어프레임까지 발표용으로 진행을 하다시피 진행하여 부족한 부분이 너무 많았다.

후기를 전달 받는 사람의 입장에서만 너무 진행되어 후기를 쓰려는 사람의 동기부여 요소가 부족하다는 점과 핵심 기능의 차별점과 경쟁력이 부족하다는 튜터님들의 피드백을 전달 받았다. 이러한 점들을 고려하여 정의한 문제를 다시 점검하고 솔루션을 도출하는 과정에서 글을 쓰는 사람들의 니즈와 페인포인트를 조금 더 구체적으로 알아봐야 겠다는 결론에 이르러, 다시 설문조사와 인터뷰를 진행하기로 했다.

추가 설문조사, 인터뷰

저번 인터뷰 겨로가, 평소에 후기를 작성하는 분들에 대한 파악이 제대로 안된 부분이 있는 것 같아서 다시 한번 설문조사를 진행하고 설문조사 대상자 분들을 대상으로 인터뷰를 진행했다. 그 결과, 새로운 페인포인트를 파악할 수 있었다. 매번 느끼는 것이지만 처음에 진행하는 단계부터 꼼꼼하게 진행해야 피봇하는 일이 적어진다는 것을 다시 한번 깨닫게 되었다.

문제 재정의

그 결과, '사용자는 타인과 공감하여 소통하고 싶어하지만 자유로운 의견 공유를 하지 못한다.' 라는 문제를 재정의했다.

가설 설정, 솔루션 도출

위의 결과를 기반으로 다시 가설을 설정하고 솔루션을 도출했다. 방향성을 좀 픽스하고 진행하다 보니 이전보다 어려움이 적었다. 무언가 전보다 서비스로서의 방향성이 보이게 된 것 같아서 다행이었다.

발표 이후에 약간 또 다시 방향성이 흔들렸지만 그래도 어느정도 진행이 되고 있는 느낌이 들어서 다행이다. 일정이 많이 미뤄져서 불안하지만, 계획을 좀 더 꼼꼼하게 설정하고 다음주 안에 꼭 마무리할 수 있도록 해야 겠다.

[240824] 13주차 WIL

kuichana — Sat, 24 Aug 2024 02:52:12 +0900

️ 이번주에 한 일

✅ 문제 정의

✅ 가설 설정, 솔루션 도출

IA,플로우차트

문제 정의

처음부터 진행이 더디고 잘 되고 있다는 생각은 들지 않았지만 생각 이상으로 잘 되지 않은 부분들이 있었다. 인터뷰에서 빈 부분들이 많았고, 처음부터 유저의 니즈와 페인포인트를 제대로 파악하지 않고 진행했던 탓인지 문제가 정확하게 정의되지 않는 문제가 있었다. 그래서 부족한 부분을 위해서 계속하여 빈 부분을 채우기 급급하여 문제 정의만 일주일이나 더 걸렸다.

가설 설정, 솔루션 도출

문제 정의가 제대로 되지 않은 상태에서 진행하다 보니, 가설 설정도 솔루션 도출도 제대로 되지 않았다. 아무래도 이전 단계부터 제대로 진행하지 못한 부분이 계속하여 문제 상황으로 나타나다 보니, 속도가 계속하여 더뎌졌다.

IA, 플로우 차트

아직도 진행 중..

이번주에 와서야 느꼈지만 초반 단게부터 제대로 하지 못한 부분이 많았던 것 같아서 아쉬웠다.

기초 데스크 리서치부터 더 제대로 하거나 서비스 선정 단계에서 좀 더 프로젝트로 진행하기에 적합한 분야를 선택했으면 어땠을까 라는 생각도 들었다.

[240816] 12주차 WIL

kuichana — Fri, 16 Aug 2024 21:39:59 +0900

️ 이번주에 한 일

✅ 데스크 리서치 보강

✅ 인터뷰 진행 및 정리

✅ 문제 정의

발표 장표 정리

데스크 리서치 보강

문화 예술 분야로 과제를 진행하려고 했지만 쉽게 방향성을 정하지 못했었다. 그래서 '문화예술의 경험으로서의 소비를 도와 자아실현 달성을 돕는다' 라는 방향성을 먼저 잡고 문화 예술 분야의 경험 소비에 대한 데스크 리서치를 보강했다. 이전까지는 모아 놓은 리서치 자료들을 어떻게 해야할지도 몰랐었는데 방향성을 잡고 다시 데스크 리서치를 진행하고 나니까 어느정도 정리가 되었다.

인터뷰 진행 및 정리

저번주에 이어 인터뷰를 진행했고, 설문조사에서 발견한 니즈를 기반으로 사용자의 페인포인트를 도출하고자 노력했다. 그래서 우선 인사이트를 도출한 후, 각 니즈 별로 친화도 분석(Affinity Diagram)을 진행했다. 처음에는 니즈 별로 정리할 생각을 못하고, 친화도 분석을 진행하다 보니 방향성을 잡지 못했었는데 튜터 님들의 의견을 듣고, 친화도 분석을 계속하여 다시 진행하면서 페인포인트 도출까지 무사히 진행할 수 있었다. 이 과정에서 모든 진행 상황에서 시간이 오래 걸리거나 모르겠다 싶을 때는 팀원들에게 바로 바로 이야기하고 튜터님께 질문을 해보는 것이 좋을 것 같다는 생각이 들었다. 이 부분을 해결하고 가지 않다 보니, 아무것도 진행하지 못한 채 시간이 소요되는 경우도 있고, 팀원들끼리 서로 생각하고 있는 방향이 다른 경우가 있었던 것 같다.

문제 정의

도출한 페인포인트를 기반으로 문제를 정의했다. 문제 정의 과정에서 도출한 페인포인트를 확인하고, 인터뷰 내용도 다시 확인해 보았다. 이전에도 문제 정의는 해 보았지만 팀원들과 진행하는 과정에서 정신이 없다보니 기본적인 방법조차 잊어버리고 진행하게 되었다. 그래서 1차 문제 정의 시에 명확한 니즈를 파악하지 않고 문제를 모호하게 정의했었다. 최대한 왜 이런 페인포인트를 가졌는지, 어떤 상황에서 어떤 이유로 어떤 불편함을 겪었는지 파악하면서 문제를 정의할 수 있도록 해야 한다는 것을 기억해야할 것 같다.

발표 장표 정리

문제 정의 이전까지 방향성이 모호했고, 저녁 시간 이전에 하루에 진행할 일들을 마무리하지 못해서 담당 튜터님께 자주 찾아가지 못하다 보니 지금까지 진행한 내용을 제대로 전달하지 못한 부분이 있었다. 그러다 보니, 튜터님께서도 지금 우리 조가 진행하고 있는 프로젝트의 내용을 정확히 이해하지 못하신 부분이 있었다. 그래서 우선은 문제 정의 이후에 팀원들끼리 전체 내용의 흐름을 정리를 해보는 시간을 가졌다. 그 이후에야 원하는 대로 방향성을 명확히 설명할 수 있는 정도가 되었다. 그리고 이전까지 튜터님께 명확하게 전달하지 못한 부분이 어느 부분인지 알 수 있었다. '오프라인 문화 예술을 즐기는 과정으로써의 타인과의 소통'을 핵심 행동으로 삼고 프로젝트를 진행하고 있었지만 이 부분을 팀원들 모두 제대로 인지하지 못하여, '사용자가 오프라인 문화 예술에 참여하게 하는 것'을 핵심 행동인 것처럼 전달하고 있었다. 이 부분을 발견하고 앞의 내용과 연결성을 확보하고 나서야, 발표 장표 정리 과정을 진행할 수 있었다. 시간이 많지 않다보니, 마음이 급해서 다음 단계를 진행하기에 급급했지만 앞으로는 진행하는 과정에 있어서 이전 단계와의 연결성을 반드시 생각하면서 진행해야 겠다는 생각이 들었다. 또한, 지금까지 진행한 과정은 기획자의 입장에서 명확히 설명할 수 있는 정도로 이해할 수 있어야 한다는 점도 다시 한번 생각하게 되었다.

[240809] 11주차 WIL

kuichana — Fri, 9 Aug 2024 21:15:22 +0900

️ 이번주에 한 일

✅ 시장 조사

✅ 관련 블로그 리뷰 분석

✅ 설문조사 진행

인터뷰 진행/ 인터뷰 내용 정리

시장 조사

팀원들끼리 의견을 나눈 후, 공통 관심사였던 문화/예술 시장의 상황에 대해 리서치를 진행했다. 그 결과, 오프라인 문화 예술 시장의 수요가 급증했으며 매출이 상승하고 있다는 점을 확인할 수 있었다.

관련 블로그 리뷰 분석

시장 조사 이후, 실제 사용자의 의견을 알아보고자 뮤지컬, 연극, 콘서트, 전시 분야로 나누어 블로그 리뷰를 통한 VoC 분석을 진행했다. 그리고 이 과정에서 사용자들이 어떤 플로우로 오프라인 문화 예술 행사에 참여하고 있는 지 파악할 수 있게 되었다.

설문조사 진행

데스크 리서치와 VoC 분석 내용을 기반으로 사용자의 니즈에 대해 알아보기 위해 설문조사 진행했다.

실제 사용자가 예상했던 니즈를 가지고 있는지를 파악하고자 했고, 총 78명이 참여해 주셨다. 조사 결과, 실제 예상했던 니즈와 부합해서 다행이라고 느꼈다.

인터뷰 진행

설문조사 내용을 기반으로, 실제 사용자의 의견을 듣기 위해 인터뷰 진행 중이다.

[11주차 WIL]

FACTS(사실, 객관) :
- 데스크 리서치, 블로그 리뷰(VOC 분석), 설문조사, 인터뷰 진행

FEELINGS(느낌, 주관) :
- 단계 진행에서 어떤 방향성으로 가고 있는지 모르겠어서 답답했다.

FINDINGS(배운 것) :
- 팀원들과 함께 속도를 맞추어 방향을 잡아가는 것이 중요하다는 생각이 들었다.

FUTURE(미래) :
- 조급해하지 말고 생각해보는 것이 좋을 것 같다.

[240802] 10주차 WIL

kuichana — Fri, 2 Aug 2024 20:56:42 +0900

️ 오늘 한 일

✅ UX 프로젝트 내용 정리
✅ 쫑파티
✅ 우리 서비스는 어떤 앱 유형으로 서비스해야 할까? 특강

[UX 프로젝트 내용 정리]

프로젝트로 진행했던 내용을 포트폴리오로 쓰게될 지도 모르겠다는 생각이 들어서 내용을 정리해보기로 했다.
처음에는 이전에 발표했던 흐름대로 정리를 해보려고 했는데, 내용을 줄여야 하기 때문에 그보다는 새로운 스토리라인을 짜보는 게 나을 것 같다는 생각이 들었다. 아직 다 정리는 못했지만, 개선 이후에 프로토타입으로 사용성테스트를 다시 진행해서 개선 효과까지 확인한 만큼 잊어버리기 전에 제대로 정리를 해보는게 좋을 것 같다.

[쫑파티]

위-정훈님, 왼쪽-나, 아래-원서님, 오른쪽- 명주님

이번 챕터 팀원들과 챕터 마무리 겸 랜선 회식을 진행했다. 서로 챕터에서 좋았던 점을 이야기하고 마무리할 수 있어서 좋았다. 4주동안 함께 하면서 다른 팀원들에게서 배울 점이 많았던 것 같다.
마지막으로 케이크커팅(by Figma)까지 진행했다.

[우리 서비스는 어떤 앱 유형으로 서비스해야 할까? 특강]

모바일 웹 / 웹 앱 / 하이브리드 앱 / 네이티브 앱의 4가지 앱 유형과 각각 어떨 때 쓰이는 지에 대해서 알게 되었다. 아직 MVP 서비스 선정을 하지 않았지만 서비스를 선정하게 된다면 어떤 유형으로 진행할지도 고민을 해봐야 할 것 같다.

✅ 모바일 웹
PC 페이지를 모바일 화면에 맞게 구성한 웹(반응형 웹)
- 빠른 개발/ 별도의 업데이트 필요 X/ OS 구분이 없어서 비용 절감
- 접근 방식(URL 입력, 검색)이 불편/ OS 기능 구현이 어려움/ 부자연스러운 애니메이션
- OS 기능이 전혀 필요 없는 경우/ 리소스가 부족한 경우에 사용함

❓OS 기능
카메라, 푸시 메세지, 블루투스, 위치기반 서비스, 주소록 연동, sns 로그인, 인앱 결제 등

풀 브라우저 방식(Full Browsing)
리로드(Reload) 시, 화면 전체의 내용을 서버에서 다시 받아와야 해서 속도가 느림

✅ 웹 앱
모바일 웹처럼 브라우저를 통해 접속하지만, 구동 방식은 앱과 같은 웹페이지
- 빠른 개발/ 별도의 업데이트 필요 X/ OS 구분이 없어서 비용 절감
- 접근 방식(URL 입력, 검색)이 불편/ OS 기능 구현이 어려움/ 부자연스러운 애니메이션
- 리소스 충분한 경우/ 지속적인 업데이트가 필요한 경우에 사용함

단일 페이지 방식(SPA : Single Page Application)
리로드(Reload) 시, 필요한 데이터만 서버에서 받아와 렌더링 하기 때문에 빠름

✅ 하이브리드 앱
웹 앱 + 네이티브 앱의 장점을 살려 개발한 앱. 겉보기에는 앱이기만 실제로는 웹 페이지를 불러오는 형식
- 모바일 웹보다는 빠른 속도/ OS 기능 구현 가능
- 네이티브 앱 대비 적은 비용 및 시간
- 네이티브 앱보다 제한적인 기능과 느린 속도/ 브라우저의 성능과 비례하는 성능/ 스토어의 심사 과정 필요
- 리소스 충분한 경우/ 지속적인 업데이트가 필요한 경우에 사용함 (쇼핑몰에 많이 사용됨)

✅ 네이티브 앱
모바일 기기에 최적화된 네이티브 언어로 개발된 앱
- 모든 OS 기능 구현 가능/ 높은 사양의 그래픽과 애니메이션 구현 가능/ 빠른 속도와 안정적인 퍼포먼스
- 개발 비용, 시간이 많이 필요/ 플랫폼 제한(iOS, Android)/ 스토어 심사 과정 필요
- 리소스가 충분한 경우/ 지속적인 업데이트가 필요하지 않은 경우에 사용함 (게임, 카메라 어플, 지도 어플, 메신저 등 기능 중심 서비스에 많이 사용됨)

✅ 크로스 플랫폼
IOS, Android 에서 동일한 소스코드를 사용하여 개발한 앱
- 개발 비용, 시간 절감 가능/ 일관된 디자인/ 높은 범용성
- 네이티브 앱 대비 빠른 개발 속도/ 적은 성능 차이
- 크로스 플랫폼, Android, iOS에 대한 이해도 필요

✅ Sass
서비스형 소프트웨어
- 별도의 업데이트 필요X/ 쉬운 접근성/ 개발 비용, 시간 절감/ 확장성
- 네트워크 의존성/ 데이터 보안 취약성/ 서비스 제공 업체 의존성

✅ 백 오피스(어드민 페이지)
사용자에게 노출되지 않는 관리자 화면
- 참여율에 따라, 최소한의 디자인만 하는 경우도 있고 전체 페이지를 디자인하기도 함
- 스마트 스토어에서 관리자 화면 참고 가능

[10주차 WIL]

FACTS(사실, 객관) :
- 기초 코딩 강의 및 특강 수강. 이전 특강 및 강의 내용 복습.

FEELINGS(느낌, 주관) :
- 명확히 할 일이 주어지지 않은 주차라서 지금 당장 할 일이 주어지지 않아서 어색했다.

FINDINGS(배운 것) :
- 강의 수강 및 이전 강의 내용을 복습 하면서 기초를 잘 다져야 다음주부터 진행할 MVP 프로젝트를 잘 진행할 수 있을 것 같다는 생각이 들었다.

FUTURE(미래) :
- 배운 내용을 잊어버리지 않고 잘 적용할 수 있도록 노력해야 겠다.

[240801] 웹개발 기초 강의, 특강 복습

kuichana — Thu, 1 Aug 2024 19:13:37 +0900

[UX 기획 및 리서치 강의]

5주차

Github를 이용하여, 프로그램을 배포하는 법과 파이썬 기초에 대해서 배웠다.
파이썬은 학교 필수 교양 강의 이후로 5년 만에 다시 보는 것 같은데 다시 보니 새로운 느낌이다.

[디자인 씽킹 특강 복습]

이전에 들었던 특강이지만, 밍글링 이후에 제대로 집중을 하지 못했던 강의이기도 하고, MVP 프로젝트 이전에 디자인 씽킹 단계를 복습해 보고 싶어서 다시 듣게 되었다.

✅ 디자인 씽킹

디자이너의 관점에서 사용자가 겪는 문제를 발견하고 솔루션을 도출해내는 방법론.

생각하는 방식이자 혁신을 이끌어내는 방법론.

그 중, 특강에서 주로 다룬 단계는 공감하기와 문제 정의하기

✅ 공감하기

깊이 있는 사용자 이해를 위한 단계.

1️⃣ 데스크 리서치

배경/ 사례 조사를 통해 시장 동향, 사용자 정보, 트렌드, 사용자의 요구사항 등을 이해하는 작업.

이후 단계에서의 깊이 있는 질문과 분석에 도움을 주는 단계.

목적: 서비스의 맥락, 서비스 영역, 사용자 특성을 분석하여 프로젝트의 목표와 타겟을 설정하기 위함.

- 서비스 배경, 서비스의 현황, 영향을 주는 기술, 경쟁 서비스, 사용자 등을 조사.

- 언론 자료, 인터넷 자료, 조사 업체(서베이 업체) 자료, 관련 연구 및 도서(논문) 자료 등을 참고.

2️⃣ 사용자 리서치

설문조사나 심층 인터뷰는 많이 활용하는 편이지만, 포커스그룹 인터뷰, 컨텍스츄얼 인터뷰, 카드 소팅 등은 서비스의 상황에 따라, 선택적으로 이용하는 편.

▶️ 설문조사

- 대상 사용자와 얻고자 하는 인사이트를 명확히 정하고 질문 작성.

- 데이터를 정리하기 용이한 구글 서베이를 많이 이용.

▶️ 심층 인터뷰

- 유저의 구체적인 니즈를 확인하기 위한 목적.

- 구체적인 경험에 대해 명확하게 질문하고, 답변을 유도하지 않아야 함.

▶️ 포커스 그룹 인터뷰

- 다양한 사람들을 대상으로 진행.

- 경제적인 관점으로, 종합적인 답변을 얻어야 하는 경우에 적합함. 다양한 관점을 얻어야 한다거나, 심층적으로 지속적인 꼬리 질문이 필요한 경우의 프로젝트를 진행할 때 적합함.

▶️ 카드 소팅

- 정보구조도 작성 후에 사용자에게 제시한 후, 기능적인 질문을 통해 인사이트를 얻는 방법.

- 이 버튼이나 요소가 어떤 그룹에 속할 것 같은지, 이 그룹들 중에 어떤 게 가장 중요하고, 어떤 게 덜 중요할 것 같은지 등의 질문을 던져볼 수 있음.

ex. 리모콘에 들어갈 버튼을 만들기 이전에 어떤 게 어디에 들어갈지 정하는 상황에서 활용.

질문 작성 팁

ChatGPT의 틀을 이용하여 질문 작성/ 이미 작성한 질문을 첨삭.

3️⃣ AEIOU

Activity (활동), Environment (환경), Interaction (상호작용), Objects (사물), Users (사용자)로 나누어 사용자를 분석하는 기법.

✅ 문제 정의하기

명확한 문제 정의를 위한 방법론.

1️⃣ 친화도 분석

데이터와 아이디어를 그룹화하여 핵심 문제를 도출하는 방법.

- 그룹화한 데이터에 헤더를 설정하여, 문제를 정의함.

- 최상위 헤더는 사용자의 성격이 들어가는 것이 좋음.

2️⃣ 5 Whys

문제의 근본 원인을 찾아내 구체적인 문제를 정의하고 효과적인 솔루션을 도출하는 방법.

- 왜? 라는 질문에 대한 답변에 계속하여 이유를 묻는 꼬리 질문을 이어 나가 근본적인 원인 찾아냄.

3️⃣ 페르소나

UX 디자인 프로젝트에서 진행한 페르소나를 기반으로 작성

사용자 대표 유형을 설정하여 사용자에 대한 깊이 있는 이해를 통해, 문제를 정의하는 방법.

- 사진, 사용자의 신상 정보, 기술 숙련도/ 이용경험수준, 시나리오, 이용 행동, 니즈 등이 포함될 수 있음.

4️⃣ 시나리오

사용자의 제품 이용 맥락을 이해하고 테스트를 준비함으로써 디자인의 방향을 설정하는 과정.

- 행동의 씬 별, 혹은 행동 단계 별로 정리 가능.

강의를 모두 듣고 무엇을 할지 고민하다가 MVP 이전에 디자인 씽킹 단계를 복습하기 위해 특강을 다시 듣고 정리를 했다. 이번주가 가장 할 일이 많지 않은 때인데 MVP 이전에 준비를 많이 해야할 것 같다.
명확히 무엇을 할지 몰라서 면담 때, 오은화 튜터님께 여쭤보았더니 좋은 디자인에 대한 레퍼런스를 조사하는 일이 가장 중요하다고 말씀해 주셨다. 보는 눈을 높인 상태로 프로젝트에 임해야 작업 퀄리티가 높고 낮음을 판단할 수 있을 것 같다.
질문을 많이 준비하지 못하기도 했고, 너무 긴장해서 면담을 길게 하지는 못했지만 다음 기회에 서비스 선정이나 업계 분야 등에 대해서도 여쭤봐야 겠다.

[240731] 웹개발 기초 강의

kuichana — Wed, 31 Jul 2024 17:38:07 +0900

[UX 기획 및 리서치 강의]

3주차

01. JQuery 활용 실습

- JQuery를 이용하여 열고 닫기

영화 기록하기 버튼을 눌러, 포스팅 박스 열기

추억 저장하기 버튼을 눌러, 포스팅 박스 열기

function openclose() {

$('#postingbox').toggle();

}

로 함수를 만든 후,

에 함수를 넣어 클릭하면 함수가 실행될 수 있도록 함.

- JQuery를 이용하여 카드 추가하기

사진 정보 입력하여 카드 추가하기

영화평 입력하여 카드 추가하기

float label과 card 열에 ID 값을 부여한 후,

let image = $('#image').val();

let title = $('#title').val();

let comment = $('#comment').val();

let star = $('#star').val();

로 value 값 정의하기

let temp_html = `

<img src="${image}"

class="card-img-top" alt="...">

<h5 class="card-title">${title}</h5>

<p class="card-text">${comment}</p>

</div>

</div>`;

로 정의한 값을 변수로 임시 저장하기

$('#card').append(temp_html);

로 카드 열에 추가하기

* 해당 데이터는 서버에 저장된 것이 아니므로, 새로고침 시에 추가한 정보가 다시 사라짐.

02. 클라이언트 - 서버 개념 이해하기

✅ JSON

Key:Value로 이루어진 형태.

ex.

RealtimeCityAir(키 값): 딕셔너리 형 value/ 그 안에 row(키 값) 리스트형 value

✅ GET 요청 이해하기

서버가 은행 지점이라면 API는 은행 창구와 같은 것이라고 이해할 수 있음.

예를 들어, 우리 은행 강남역지점이 서버라면, 강남역 지점 안에 있는 창구가 API라고 할 수 있음.

https://www.lottecinema.co.kr/NLCHS/Movie/MovieDetailView?movie=21258

위의 롯데시네마 영화 정보에서

* 서버 주소: https://www.lottecinema.co.kr/NLCHS/Movie/MovieDetailView?movie=21258

* 영화 정보: movie=21258

로 나눌 수 있음. 영화 정보에서 숫자를 바꾸면 다른 영화 정보로 이동이 됨.

03. Fetch 이해하기

fetch를 이용하여 데이터를 불러와서 적용할 수 있음.

이 때, $(document).ready(function() { } 을 적용하면

별도의 동작을 하지 않고도 미리 적용을 할 수 있음.

버튼을 누르면, 미세먼지 지수가 업데이트 되도록

$(document).ready(function () {

let url = "http://spartacodingclub.shop/sparta_api/seoulair";

fetch(url).then(res => res.json()).then(data => {

console.log(data);

})

와 같이, 코드를 작성하면, 서울시의 미세먼지 데이터를 이용가능함.

04. Fetch 활용 실습

추억 저장 사이트/ OTT 서비스에 미세먼지 지수와 서울시 기온 추가하기

각각 추가한 코드

실제 추가된 부분 - 현재 미세먼지 상태와 기온이 반영되어 표시됨.

3주차 과제

조건에 부합하도록 헤더, 포스팅박스, 카드를 포함하여 사이트 구성하기

4주차

01. 데이터베이스 개념 이해하기

여러 사람이 함께 데이터를 저장하고 관리할 수 있는 데이터 모음. 관계형 데이터베이스와 비관계형 데이터 베이스로 나뉨.

- 관계형 데이터 베이스는 정형화된 형태로, 명확한 구조적 틀 안에 정보 값을 입력하게 되어 있음. 새로운 값을 입력하기 위해서는 새로운 데이터 타입이 필요함.

-비관계형 데이터 베이스는 비정형화된 형태로, 구조적인 틀 없이 값을 모두 입력함.

02. Firebase 이해하기

구글(Google)이 개발한 데이터 베이스. 백엔드 인프라 구축 과정 없이 이용 가능함.

정해진 사용량을 초과하지 않는 범위 내에서 무료.

파이어 베이스

03. Firestore Database 이용하기

파이어스토어 데이터 베이스 = 구글의 클라우드 기반 NoSQL 데이터베이스.

1. 파이어 베이스 설정하기

파이어 베이스 이용 전, 스크립트의 타입을 "module"로 설정하고 파이어베이스 적용에 필요한 정보를 불러오기.

2. 입력 데이터를 저장하는 함수 추가

클릭하면 파이어스토어에 데이터가 저장이 될 수 있도록 함수를 추가하기.

2. 모듈 타입에 적합한 함수로 수정

스크립트 타입을 모듈로 바꾸게 되면, onclick="함수()"의 형태로 사용할 수 없게 됨.

이에 따라, id를 설정한 후, 불러와서 함수를 적용할 수 있는 형태로 변경하기.

이전에 유니티로 게임을 만들었을 때에는 event manager와 playerpref을 이용해서 가장 간단한 수준에서 데이터 저장을 했었는데, 파이어베이스를 이용하는 방법을 배우게 돼서 좋았다.

[240730] 웹개발 기초 강의

kuichana — Tue, 30 Jul 2024 13:55:31 +0900

[UX 기획 및 리서치 강의]

1주차

01. 웹 브라우저 작동 원리

웹 브라우저(클라이언트)가 API로 요청을 보내면 서버에서 HTML을 전달해주는 것.

02. HTML 기초

HTML과 CSS의 개념

✅ HTML

웹의 뼈대가 되는 형태.

✅ CSS

CSS는 HTML을 통해 작성된 뼈대에 디자인을 가미하는 역할.

✅ Javascript

디자인까지 완료된 형태에 움직임을 부여하는 역할.

- head 안에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 포함하여 코드 작성.

- Shift + Option(Alt) + F를 누르면 코드 자동 정렬.

- Option(Alt) + B를 눌러, 실행.

03. 로그인 페이지 만들기

VS Code로 만들어본 로그인 화면

1. Body 영역에 <h1> 을 이용해 타이틀 생성.

2. Body 영역에 <input>을 이용해 아이디/ 패스워드 텍스트필드 생성. 이때, <p>를 이용해, 단락을 구분함.

* <hr>을 이용하면, 라인으로 단락 구분 가능.

3. Body 영역에 <button>을 이용하여 로그인 버튼 생성.

4. Body 영역에 <div class="클래스 이름">으로 묶은 후, Head 영역에 <style>을 추가하여 꾸미기

04.자주 쓰는 CSS

h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding

margin과 padding

margin은 바깥 여백, padding은 안쪽 여백 설정.

각각

margin: 50px auto 0px auto; /* 좌우 기준 가운데 정렬 */

padding: 50px;

이런 식으로 이용. 왼쪽부터 상좌하우의 순. 값을 하나만 입력 시 상하좌우에 동일한 값이 적용됨.

가운데로 옮기고 싶을 때 사용하는 코드

display: flex;

flex-direction: row; /* row, column에 따라 배열의 상하, 좌우가 결정됨 */

align-items: center;

justify-content: center;

05. [구글폰트] 가져다 쓰기

1. 구글 폰트에서 폰트 찾기

2. Get Font 버튼 클릭

3. Get Embeded Code 클릭

4. @import 선택 후, 코드 복사

5. Head 영역 <style> 안에 폰트 정보 붙여넣기

ex. noto sans KR

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

* {

font-family: "Noto Sans KR", sans-serif;

}

06. [부트스트랩] 가져다 쓰기

css를 모아둔 것. 코드 소스를 이용해 일부만 수정하여 적용 가능.

부트스트랩 링크

부트스트래핑을 이용한 예제 실습

2주차

01. [스파르타플릭스]프로젝트

1주차에서 배운 내용을 기반으로 OTT 화면 구성.

02. Javascript

프로그래밍 언어 중 하나로 브라우저에 움직임을 부여하는 역할.

✅ 변수

값을 정의하여 저장. let으로 정의.

ex. let a = '사과';

✅ 리스트

여러 개의 데이터를 순서대로 저장.

ex. let b = ['사과', '배', '감', '수박']

✅ 딕셔너리

여러 개의 데이터를 별칭을 부여하여 순서대로 저장.

ex. let c = {'name':'Bob', 'age': 35, 'gender': 'Man'}

✅ 리스트 + 딕셔너리

두 가지를 결합하여 사용 가능.

ex.

let people = [

{ 'name': '서영', 'age': 24 },

{ 'name': '현아', 'age': 30 },

{ 'name': '영환', 'age': 12 },

{ 'name': '서연', 'age': 15 },

{ 'name': '지용', 'age': 18 },

{ 'name': '예지', 'age': 36 }

]

✅ 반복문

forEach를 이용하여, 동일한 형태의 일을 반복적으로 실행할 수 있도록 함.

✅ 조건문

만약 ~하다면, ~하라는 조건을 달아, 프로그램이 명령을 시행하도록 함.

ex.

ages.forEach(a => {

if (a < 20) {

console.log("청소년입니다.");

}

else if(a >=20 && a < 60){

console.log("성인입니다.");

}

else

{

console.log("노인입니다.");

}

});

03. JQuery

Javascript를 더 쉽게 사용할 수 있도록 한 것.

자바스크립트

document.getElementById('hello').innerHTML = '안녕';

에서

JQuery

$('#hello').html('안녕');

로

JQuery 예시 따라해보기

1. 기본형

코드/ 실행 화면 버튼 누르기 전, 후

2. 응용 - 사다리타기 프로그램

코드/ 실행 화면 버튼 누르기 전, 후

- 랜덤 값을 불러오는 함수를 추가하여 사람을 한명 고를 수 있게 함.

한 파일 안에서 형식이 다양하다는 게 좀 신기했다. Javascript와 HTML/CSS 부분이 전혀 다른 방식으로 코드를 작성하는 것 같다. 개발 분야에 대해서는 거의 아는 바가 없기는 하지만, 개인적으로 Javascript는 자바나 C언어와 비슷한 느낌인데 HTML은 전혀 다르다고 느껴졌다.

[240729] UX 디자인

kuichana — Mon, 29 Jul 2024 21:41:34 +0900

[UX 디자인]

- 최종 발표

- 개선안 사용성 테스트

- 와이어프레임 개선

- 팀 KPT

[UX 디자인 프로젝트 발표 피드백]

성공적으로 진행한 부분

1. 핵심행동으로 선정한 근거, 사용자가 어플을 설치하여 서비스를 이용하는 이유 등 데스크리서치를 치밀하게 준비하여, 객관적인 데이터가 자료의 신뢰도를 높여줌.

2. 사용성 테스트를 통한 인사이트를 도출하여, 정확한 문제를 정의함.

3. 경쟁사 및 시장 분석을 통해, 다른 서비스를 참고하여 솔루션을 잘 도출함.

4. 도출한 인사이트를 기반으로 우선순위를 도출하여 중요도가 높은 문제를 도출해 냄.

개선이 필요한 부분

1. 와이어프레임에서 사각형만 이용하기보다는 좀 더 다양한 키트를 이용해, 직관적으로 수정하는 것이 좋을 것 같음.

2. 발표 장표의 솔루션 부분에서 어떤 부분이 수정이 된 것인지, 왜 수정이 된 것인지, 유저가 어떤 불편을 겪었는지 텍스트로 적는 것이 좋을 것 같음.

3. 개선된 플로우에서 재고조회의 진입점이 2가지였는데 이 부분이 잘 드러나게 표시를 해주는 것이 좋을 것 같음.

4. 솔루션이 제대로 작동을 하는지 추가적으로 테스트 해보는 것도 좋을 것 같음.

[개선안 사용성 테스트]

프로토타입을 기반으로 새로운 사용자를 만나 사용성 테스트를 진행.

총 6명을 진행한 결과,

개선 전 기존 어플의 사용성 테스트 성공률은 33%[1/3] (성공한 한 명의 경우도 사용경험이 있어서 성공하였고, 처음 사용 시에 실패한 경험이 있음.) 였던 반면, 수정안의 성공률은 67%로 성공률이 2배가 되었다.

또한, 기존 어플에서는 테스트 참가자가 모두 진입점을 찾지 못하여 재고 조회에 실패한 반면, 개선안에서는 모든 사용자가 진입점을 찾는데에 성공하였다.

또한, 기존 어플에서는 모든 테스트 참가자가 개선안에서는 상품을 찾는 과정이 어렵다는 의견을 전달한 반면, 개선안에서는 모든 참가자가 단번에 상품을 찾아냈다.

다만, 상품을 찾은 이후, 바텀시트를 올려 지점을 확인하는 데에 어려움을 겪은 참가자가 두 명이 있었는데 이는 모바일 프로토타입을 PC로 테스트를 진행하다 보니 바텀시트의 조작법이 헷갈린 이유가 있었다.

이러한 결과로 보아, 개선안이 기존보다 재고 조회 기능을 이용하는데에 효과적임을 확인할 수 있었다.

[와이어프레임 개선]

발표 피드백을 통해, 와이어프레임을 좀 더 직관적으로 수정할 필요성을 느끼게 되어, 플러그인을 이용해 형태를 수정해보았다.

푸터 부분이 조금 아쉬운데 나중에 다시 수정해보도록 해야 겠다.

사용한 플러그인

1. Content Reel

- 사진, 아이콘, 텍스트 등 와이어프레임에 이용할 이미지를 불러올 수 있는 플러그인

2. Wireframe Designer

- AI에게 화면 정보를 입력하면 와이어프레임을 그려주는 플러그인. (ChatGPT와 같은 방식으로 이용 가능.)

- 유료 플러그인으로 계정 당 10회만 무료로 이용 가능.

3. Autoflow

- 프레임끼리 선으로 이어주는 플러그인.

- 파일 당 50개까지만 무료.
- 개인적으로는 하나 꺼내서 만들고 그냥 도형을 수정하면서 사용하는 것이 더 사용하기 편리함.

[KPT]

Keep

1. 돌아가며 튜터님께 의견 여쭤보기

팀 KPT에도 작성한 내용이지만, 튜터님께 의견을 여쭤볼 때, 팀원들이 번갈아 가면서 차례대로 전달을 하니 모든 팀원이 진행하고 있는 내용을 동일한 수준으로 이해하고 있는지 판단하기에 좋았다.

2. 근거를 통한 의견 제안하기

- 모든 의견에는 근거가 필요하다. 다른 사람에게 의견을 전달할 때, 근거가 있어야 그 사람을 설득할 수 있다. 이러한 방식을 통해, 서로 감정 상하지 않고 프로젝트를 이어갈 수 있었다.

3. 정해진 시간 약속을 잘 지키기

- 신뢰의 기본은 시간 약속이라고 생각한다. 늦을 것 같을 때는 미리미리 연락을 하고, 가능한 일정을 맞추려고 하는 태도가 팀원 간의 신뢰를 만들 수 있는 것 같다. 앞으로도 절대적으로 시간을 준수할 예정이다.

Problem

1. 함께 진행하는 과제

- 팀원들과 함께 하는 과제임에도, 급한 성격과 일이 늦어질까봐 하는 우려의 콜라보로 일부 클론 디자인을 먼저 진행해서 가지고 온 부분이 있었다. 그러다 보니, 이 부분은 함께 하지 못했던 것 같아서 조금 아쉽다.

2. 사람 앞에서 소극적이었던 태도

- 사람을 대하는 일에 두려움이 있어서 적극적으로 나서지 못한 부분이 있었다. 번갈아 가면서 튜터님께 내용을 전달하기도 하고, 팀원들이 각자 사용성 테스트를 한번씩 진행하기는 했지만 태도가 소극적이었던 부분이 있어서 아쉽다. 같은 부분을 계속해서 어려워 하고 있지만 더 노력해야 겠다.

Try

1. 함께 성장하기

- 팀원들과 함께 성장할 수 있는 기회인 만큼, 일정이 급해도, 성격이 급해도 서로 신뢰를 가지고 같이 해보는게 좋지 않을까?

2. 밍글링 2차 질문지 의견 나눠보기

- 사람들이 어렵지만, 그래도 최종 프로젝트를 진행할 팀원들과는 서로를 알아가는 시간을 가지고 함께 일하기 좋은 환경을 갖추어 나가도록 노력해야 겠다.

오늘 저녁 시간에 바로, 팀원들에게 연락을 해서 모인 후에 밍글링 2차 질문지의 질문에 대해 의견을 나누어 보았다..!

[240726] 9주차 WIL

kuichana — Fri, 26 Jul 2024 21:06:36 +0900

[UX 디자인]

Step 1. 앱(APP) 서비스 선정 및 데스크 리서치를 진행해 주세요.

Step 2. 팀원들과 함께 문제를 정의합니다.

Step 3. 경쟁사를 분석합니다.

Step 4. 문제에 대한 솔루션을 도출합니다.

Step 5. 디자인 개선을 진행합니다.

UX 디자인 프로젝트 마무리

팀장 님의 엄청난 노력으로 발표 장표까지 완성 되고 발표 이전에 최종적으로 마무리!

UX 기획 및 리서치 개인 과제 피드백

1. 명확한 목적 설정이 부족

- 과제에 제출해야할 부분이 공고문부터라서 이전의 과정을 제출하는 것을 깜빡한 것 같다.

- 이 점을 고려하더라도, 목적이 수행할 테스크와 적합한지, 그리고 테스크를 통해 정의한 문제와 인과관계가 성립하는 지는 다시 생각해봐야할 문제로 보인다.

2. 테스크의 테스트 범위가 너무 넓음

- 테스크를 선정하는 과정에서 너무 넓은 범위의 테스크를 요구한 것 같다.

- 기획자의 입장에서 유저가 집중하면 좋을 것 같은 정보의 우선순위를 나누어서 정리한 후, 테스크를 쪼개어서 진행하면 좋을 것 같다고 피드백해 주셨다.

동일한 앱을 선정한 다른 조 탐방하기

점심 시간 즈음에 동일한 어플로 개선을 진행한 조의 A/B 테스트도 참여한 후, 그 과정이 궁금해졌다.

그래서 팀장 님의 주도 하에 해당 팀 분들께 양해를 구한 뒤, 팀원들과 함께 피그마 페이지를 확인해 보았다.

다른 조가 진행한 내용을 보니, 겹치는 부분도 많았고 그렇지 않은 부분들도 있어서 비교할 수 있는 기회가 되었다.

사용성 테스트의 경우, 아예 동일한 테스크를 진행했음에도 결과가 달라서 확실히 단순 테스크는 테스트의 과정이며, 어떻게 기획하고 진행하냐에 따라서도 결과가 달라질 수 있다는 걸 느낄 수 있었다.

또한, 동일한 문제에 대해서도 서로 다른 솔루션을 제시했다는 점에서도 인상 깊었다. 우리 조의 경우, 아이콘 영역에서 챗봇을 재고조회로 대체하고(1) 검색 탭에 기능을 추가하는 방안(2)으로 재고조회의 접근성을 높이고자 했었다. 그러나 해당 팀의 경우, 홈 화면의 UI 배치를 기존과 다르게 한 것, 그리고 FAB로 있던 챗봇의 아이콘을 변경하여 강조한 점이 눈에 띄었다.

이전에 챗봇을 재고조회을 대체하면서 FAB가 있으니까 없애도 된다고 생각했지만 챗봇의 접근성을 낮춘 만큼 FAB를 강조해야 겠다 라는 생각까지는 하지 못했던 것 같아서 아쉽다.

다른 조와 서로 확인을 할 수 있어서 너무 좋은 시간이었다.

[9주차 WIL]

FACTS(사실, 객관) :
- UX 디자인 팀 프로젝트 진행. 핵심행동의 문제를 찾고 앱을 선정하는 과정에서 약간의 어려움이 있었지만, 이후에는 팀원 분들과 큰 문제 없이 프로젝트를 마무리 했다. 또한, 그 과정에서 각 진행 사항마다 튜터 님께 설명 드리고, 피드백을 받아 개선하면서 프로젝트의 방향성을 확실히 할 수 있었다.

FEELINGS(느낌, 주관) :
- 이전 팀 프로젝트 과정이 생각보다 쉽지 않았어서, 이번 팀 프로젝트가 시작되기 이전에도 조금 불안한 느낌이 있었다. 그런데 막상 진행해보니까 팀원 분들도 다 좋은 분들이었고, 서로 각자 진행할 부분을 잘 진행하고 소통 과정에서도 큰 문제가 없어서 다행이었다. 팀원 분들 덕분에 잘 마무리할 수 있어서 좋았다.

FINDINGS(배운 것) :
- 서로 이야기를 나누고 협의를 하며, 모두가 이해할 때까지 의견을 나누고 맞췄던 것이 서로 트러블 없이 좋은 의견을 뽑아낼 수 있는 과정이라는 생각이 들었다. 또한, 팀원들과 소통을 많이 해서 서로에 대한 신뢰가 있었기 때문에, 각자 맡은 부분을 진행하면서도 불안감이 없었던 것 같다.

FUTURE(미래) :
- 앞으로 진행될 MVP 팀원들과 아직 많이 친해지지는 못했지만, 서로 신뢰를 가지고 의견을 많이 나눌 수 있는 프로젝트 환경을 만들 수 있도록 노력해야 겠다.