uxui

TIL 53일차

UXUI0 — Mon, 10 Feb 2025 22:30:25 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- 최종프로젝트

- 리액트 튜터링

오늘은 어떤 것을 배웠나요

- 최종프로젝트

오늘요약

0.취향 성향 테스트 UI 완성

먼저 취향 성향 테스트를 하기 위한 질문지를 작성을 했다.

질문지를 작성할때 튜터님의 피드백을 생각하며

어떤 “기준점”으로 질문을 던지고, 질문을 통해 “어떤 유형들로 분류할 것인지?” 을 중심으로 질문지를 작성을 하였다.

그다음 UI를 디자인하였다. 여기서 가운데 일러스트는 팀원중 한명이 제작을 담당하였다.

버튼과 프로그래스바 , 질문 선택지를 배치하였고, 배치를 할 때 선택지같은경우 최대한 사용자가 보기편하고 누르기 쉽게 넓게 버튼을

디자인하였다.

이것은 성향 결과 화면으로 여러 레퍼런스를 참고해서 최대한 브랜드 분위기와 어울리게 디자인하였다.
캐릭터는 팀원분 한명이 담당해주었다.

1.팀원들과 상의해서 고칠부분 상의함

디자인을 한 후 팀원들과 상의후 수정이 필요한부분이나 팀원의 의견이 필요한 부분들은 수정을 거쳤다.

대부분 자잘한 ui수정이나 글씨를 수정하였다.

2.팀원이 한것중 일회성모임페이지의 다른모임섹션 수정을 맡음

단기 모임 페이지에서 아직 수정전인 다른 모임추천란을 디자인을 진행하였다.

일단 글씨크기가 너무 작아 수정을 하였고, 최대한 전체 분위기와 비슷하게 가져갔고, 필요없는 부분은 빼는 식으로 디자인하였다.

일단 모임추천란에 필요한정보는

카테고리, 모임이름,모임인원,날짜가 가장 필요한부분이므로 원래 내용을 그대로 가져갔으며,

글씨크기만 더 크게 변경하였다. 또한 책커버같이 표현하기위해서 본문을 블러처리를 하였다.

3.어떤 “기준점”으로 질문을 던지고, 질문을 통해 “어떤 유형들로 분류할 것인지?” 을 정리하는걸 맡음

이건 아까 앞에서 정한 기준을 토대로 튜터님에게 피드백을 받을때 솔루션화면과 같이 설명글을 정리를 맡았다.

오늘 배운것

1. 성향 테스트를 할때에는 기준점을 확실히 잡고 기준점을 기반으로 결과를 연결지어야 한다.

- 리액트 튜터링

오늘은 프로그래스바 개발을 맡았다.

일단 저번에 만든 태그를 깃허브에 올려 메인에 적용시킨다음 다시 프로그래스바를 만들기위해 브랜치를 생성하고 만들었다.

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

TIL 52일차

UXUI0 — Thu, 6 Feb 2025 22:08:31 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- 최종프로젝트

- 리액트 튜터링

오늘은 어떤 것을 배웠나요

- 최종프로젝트

오늘요약

1.브랜드보이스를 만들었다.

브랜드보이스 본문 설명은 리서치를 통한 근거를 통해 내가 작성하였고,

그외 키워드는 팀원들과 함께 정해서 친근하고, 부담없고, 일상적인 분위기의 서비스로 결정을 하였다.

2.스타일가이드만듬

우린 메인컬러를 파란색계열로 잡고 세컨더리를 하늘색 그리고 포인트컬러를 노란색으로 잡았다.

각 색의 의미는

파랑:
신뢰와 안정감: 파랑은 신뢰와 안정감을 주는 색으로,
사용자가 편안하게 소통하고 책을 읽을 수 있는 신뢰성 있는 환경을 강조합니다.
노랑:
따뜻함과 친근함: 노랑은 활기차고 따뜻한 색으로, 소통의 자유로움과 편안한 분위기를 전달하는 데 좋습니다.
사용자가 부담 없이 대화하고 의견을 나누기 위한 환경을 만듭니다.

그외 폰트와 곡률, 그림자 등도 팀원과 같이 정하고, 색깔 확장팔레트도 만들어 스타일에 적용시켰다.

3.취향질문지에서 어려움을 겪음

취향질문지를 만들때 어려움을 겪엇다. 이것을 그냥 질문하나에 결과하나로 매칭을 할건지 ,

아니면 어떤 방법을 사용해서 할건지 고민을 하다가 그냥 단순하게 질문하나에 결과하나로 결정을 하였고 질문지를 각자 작성한후

그중 가장 무난한 내거로 정규 피드백을 받으러갔다.

4.튜터님 정기피드백 받으러옴

튜터님께서는 일단 우리팀이 브랜드보이스가 우리 서비스성향과 잘맞다고 해주셨으며,

그다음 우리가 고민하던 유형 테스트에 관해서는 지금 해온것은 브랜드성향은 친근하고 부담없지만 지금 테스트는 너무 헤비한것같고 선택지도 많다고 하셨다. 그래서 질문도 재미있고 가벼운 유형 테스트같은 방향으로 가는것이 좋다고 피드백해주셨다.

또한 질문을 할때도 어떤 기준점으로 질문을 던지고 질문을 통해 어떤 유형들로 분류 할것이다 라는것을 설계해야한다고 하셨다.

5.취향질문지를 디벨롭함

피드백을 받고 취향관련 레퍼런스를 각자 찾아보았다.

우린 튜터님의 피드백과 여러 레퍼런스를 보고

1. A.B 총 2개의 선택지

2. 질문에는 질문에 어울리는 이미지나 그림을 추가

이렇게 2가지를 정한후 취향질문지를 만들기로 결정하였다.

취향지 결론도 수정을 하였다. 일단 독서모임과 책장르는 그저 추천해주는것이고 독서성향은 개인적인것이므로 이것을

가장 먼저보여주고 그외에는 아래로 빼는것으로 결정하였다.

이제 틀을 정했으니 질문을 다시 수정할 차례이다.

우린 일단 기준점과 결과유형을 설정을 하였다.

기준은 먼저 크게 3가지로

먼저 독서성향,장르,소통방식을 잡을것이고,

그다음 여기서 mbti처럼 2가지를 기준으로 잡아보았다. ex) 감성적vs 이성적

기준을 크게잡고 결과 유형도 서비스와 맞게 잡았다.

그리고 와이어프레임또한 기존의 대충 했던것을 일단 우리 서비스의 분위기와 맞게 다시 손을 보기위해

각자 와이어프레임 정해서 하기 나는 오늘 피드백받은 취향결정단계를 담당 하기로 하였다

오늘 배운것

1.유형 테스트를 할때에는 그 서비스의 분위기와 맞게 작성을 해야함. ( 심플, 진지 등...)

2.브랜드보이스는 우리가 생각한 코어 단어만 뽑는것이 좋다. 수행을 한다는것 자체에 접근하는것은 좋지않다.

- 리액트 튜터링

오늘은 우리가 전에 개발컴포넌트에 사용할 것들을 미리 정해놓고 갔다.

오늘은 그것들중 먼저 만들 컴포넌트를 튜터님께서 정해주셨고, 그것을 만들었다

나는 그중 태그 컴포넌트를 만들기로 하였다.

이 컴포넌트는 유저의 성향이나 그런것들을 태그형태로 보여주기 위한 UI이다.

그래서 이것을 리액트로 일단 만들기로하였으나, 오늘은 셋팅하는데 시간이 다가서 본격적으로 만들지는 못하고 끝났다.

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

오늘은 취향 유형테스트를 만들면서 이 질문을 어떤식으로 해야할지 문제를 겪었다.

이게 어떻게 질문을 주고 그게 어떻게 이런 유형으로 할건지 많이 복잡했다.

튜터링을 받은후 이제 유형테스트를 만들때는 서비스분위기와 맞게 하고, 그 기준과 유형을 먼저 작성을 한 후 질문을 작성해야하는식으로 해야겠다.

TIL 51일차

UXUI0 — Wed, 22 Jan 2025 00:22:08 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- 최종프로젝트

- 리액트 튜터링

오늘은 어떤 것을 배웠나요

- 최종프로젝트

오늘요약

1.튜터님 정기멘토링 및 후 피드백 반영

먼저 발표장표정리는 중간중간마다 하는것보다는 결과물이 다 나왔을때 해서 마지막 하루이틀 잡고하는것이 좋다.

그 이유는 장표정리목적이 중간발표회일텐데 중간발표회의 목적은 발표그자체가 아니라 중간에 다같이 피드백을 받아보는것이 목적이므로 중간마다 발표장표를 정리하는것은 좋은방향이 아니다.

물론 파이널때는 보여주는 형식도 중요하니깐 그때는 이런방식으로 하는것이 맞다.

다음 서베이 대상자 기준을 정할때 우리가 기준으로 잡은 "독서 플랫폼을 한번이라도 써봤는지" 라는 기준은 기준점으로 잡기에는 힘듬

그이유는 과거에 한 번이라도 사용한 경험만으로 해당되기 때문에, 서비스의 주기적 이용 여부나 독서량·독서 관심도와는 연관성이 낮음. 즉 기준점을 다시 잡기는 힘들고 대체를 해야하는데 그것을 여기서 독서량에 대한 질문으로 잡을수가 있을것같다.

즉 한달에 1~2권을 읽는 사용자가 매우 많은데 실제로 2030세대 평균 독서량은 연13권이 나옴

즉 2030세대의 평균독셔량통계와 비슷한 그룹이 가장 많은 분포도를 차지하고있으므로 이것을 기준점으로

3그룹으로 나누어서 결과를 분석하는 방향으로 진행을 하게됨

그래서 우리 팀은 가끔한다를 기준으로 그아래 매우 가끔한다와 그위에 자주한다까지의 통계로 3그룹으로 나누어서

엑셀표를 보고 각각 질문에 대해 어떤답변을 하였는지 분류 하는작업을 진행하였다.

팀원분들이 열심히 분류를 해주신 엑셀자료

마지막으로 인터뷰 타겟설정은 위에 기준점으로 잡은 독서량과을 1차로 자격요건으로 잡고 그후 그안에 그룹을 팀원끼리 회의후 나누는방향으로 가면 좋을것같다로 피드백을 마쳤다.

출처 - 내배캠 UXUI 김소윤튜터님의 피드백내용정리까지 해주셨다. 매우 감사했습니다.

피드백으로 배운것 요약

1.효율적인 발표 준비와 피드백 활용: 발표 장표 준비는 목적에 따라 효율적으로 진행해야 하며, 중간발표는 피드백을 극대화하는 방향으로 활용해야 한다.

2.명확한 기준 설정: 데이터를 분석하거나 타겟을 설정할 때, 기준은 대상의 행동 패턴(예: 독서량)과 연관성을 고려해야 한다.

2.인터뷰 타겟설정후 배포후 데이터모으기

최소 자격요건을 설정후 그안에서 그룹을 2그룹으로 나눈후 각각 설문지를 작성하여 배포

하지만 여기서 그룹B에서는 "아래 사진처럼 둘다 사용을 해본그룹" ,"커뮤니티만 이용해본 그룹", "큐레이션만 이용해본그룹",

아니면 "이용해보지못한 그룹"에서는 또한번 "이용하고싶지만 못한 그룹"과 "이용할 필요성이 없는 그룹"으로 나눌수가 있었는데

이부분은 팀원중에서 마인드맵처럼 가지형식으로 먼저 구분을 하는것이 좋다고 하여 모두 동의후 그렇게 진행을 하게됨.

또 각자 맡게 되므로 질문의 방향성이 달라질수있게 될수도있으니깐

기준점을 1. 서비스 인식 2. 서비스 이용 페인포인트 3. 서비스 이용 니즈 4. 서비스 도입에 대한 기대 이렇게 4가지로 잡고 진행을

하였다

여기서 나는 커뮤니티를 이용해본그룹과 큐레이션을 이용해본그룹을 맡았다.

모두 진행을 하고 보니깐 니즈와 서비스 도입에 대한 기대는 겹치는 부분이 많아 그냥 두 부분은 통일하는방향으로갔다.

설문지까지 나눠서 작성을 마친후 우리는 팀원분이 너무 잘 작성해주신 인터뷰대상자 모집 포스터를 이용하여 배포를

하였다.

출처 - UXUI내배캠 서희령 팀원

그후 인터뷰를 진행하고 각자 진행한 데이터를 일단 모아놓고 내일 정리하는것으로 마무리하였다.

3.내일 스케줄 확인

일단 우리는 진도가 살짝 느려 튜터님과 상의후 중간발표회까지는 정기멘토링말고 중간마다 피드백을 받기로 결정을 하였다. 그래서 내일은 일단 피드백을 받을만한 것까지는 해야하므로 문제정의까지는 최소한 하기로 리마인드하고 퇴근하였다.

- 리액트 튜터링

오늘은 팀프로젝트 생성하는 법과 그후에 브랜치를 생성하여 여러 사람들이 동시에 다양한 작업을 할 수 있게 만들어 줄수있게 하였다.

여기서 브랜치는 1.01 1.02같은 버전을 생성하는것이며 원본과 분리된 작업 영역에서 변경된 내용을 나중에 원래버전과 비교하여 넣을수있으므로 오류가 있을때 합쳐지는것을 방지할수가있다.

이후 merge를 연습까지 할려고 하였으나 중간중간 에러나 시간이 지체되어 여기까지만 하게되었다.

리액트 튜터링 요약

1.팀 프로젝트 생성하기

레파지토리 생성: 팀장님이 새로운 프로젝트를 만들고 관리할 공간(레파지토리)을 만들기
팀원 초대:
- 레파지토리 설정(Settings) → 협업자(Collaborators) 클릭 → Add people 버튼을 눌러 팀원의 GitHub 이메일로 초대

2. 브랜치란?

브랜치는 각각 독립적으로 작업할 수 있는 공간이다

예를 들어, 여러 사람이 동시에 코드를 수정해도 서로 영향을 주지 않는다.
나중에 각자의 작업을 합쳐서 하나의 결과물로 만들 수 있다

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

오늘 사용성 테스트를 할때 우리는 그룹a와 그룹b로 나누어서 최대한 시간이 안겹치게 진행을 하였다.

그 이유는 사용성테스트는 처음원본을 계속 가지고 가는것보다는 인터뷰를 하면서 계속 수정을 하는것이 좀더 의미있는 인사이트를 가져갈수있는데 여기서 문제가 발생했다. 원래 그룹b로 온사람이였는데 처음에 질문을 하다보니 그룹a였던것이다.

그래서 원래 그룹a와 그룹b를 동시에 진행했었는데 어쩌다보니 그룹a를 동시에 진행을 하게되었다.

즉 이로인해 사용성테스트 질문지를 업데이트할수가 없었다.

문제가 뭔가 살펴보았더니, 우리는 일단 큐레이션 서비스의 범위를 검색을 통하여 그대로 전달을 하였는데 이것이 범위가 너무 넓었던것이다. 그래서 앞으로는 이러한 사용성테스트에서 그룹을 나누었다면 테스트하러오시는분들이 헷갈리지 않도록 처음부터 설명을 작게 하거나 아니면 범위를 팀이 한번더 설정을 해야할것같다.

TIL 50일차

UXUI0 — Tue, 21 Jan 2025 00:15:04 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- 최종프로젝트

- 리액트 튜터링

오늘은 어떤 것을 배웠나요

- 최종프로젝트

오늘요약

1.튜터님 피드백

사용자 설문지를 만들고 이대로 올려도 되는지 튜터님 컨펌받고

"설문지는 괜찮으나 타겟설정이 앞에서 리서치한 결과와 연결이 되지않았다"라는

피드백과 그외 피드백들을 받았다.

2.설문지폼 배포

그후 근거를 통한 타겟 설정후 설문 참여 대상 내용과 첫번째 질문으로 타겟의 특성 체크할수있는 질문 설문지폼 마무리후 배포

3.스케줄작성

다음주 월요일까지의 디테일한 스케줄 작성

4.심층인터뷰 질문지작성

심층인터뷰는 그룹A 와 그룹B로 나누어서 진행할 예정이다.

그룹A : 독서 커뮤니티를 이용중인 사람

그룹B : 독서 커뮤니티를 이용하고 싶지만, 아직 사용하지 않는 사람

5.내일 할 스케줄확인

- 리액트 튜터링

오늘은 깃을 설치하고 가입후 실제로 깃과 깃허브를 Push까지 하는 단계까지 진행을 하였다.

1. 깃과 깃허브는 각각 로컬에서 코드를 관리하는 도구와 클라우드 기반 저장소 역할을 한다.

2. 깃허브를 통해 팀원들과 함께 작업할수있다.

push는 쉽게 로컬에서 작업한 코드를 원격 저장소(예: GitHub)에 업로드하는 명령어이다.

이 과정으로 협업,백업,버전관리,배포등을 할수가있는것이다.

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

지금 하는 최종 프로젝트는 결국 우리가 실무에 투입시 바로 1인분을 할수있게 만드는것이 목적이다.

하지만 지금 우리는 디테일한 스케줄없이 큰틀로만 프로젝트를 진행하고있어서 중간중간 붕뜨는 시간도 있고, 효율적으로 시간을 사용하지 못했던것같다. 일단 튜터님의 피드백으로 우리는 전보다 디테일한 스케줄을 작성하였고,

스케줄을 최대한 목표를 지키도록 정말 더 열심히 해야겟다.

TIL 49일차

UXUI0 — Fri, 17 Jan 2025 00:11:49 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- 최종프로젝트 문제발견

- UX집중반

오늘은 어떤 것을 배웠나요

- 최종프로젝트 문제 발견

오늘은 전날 도서 라는 도메인을 선정후 시장조사, 경쟁사조사,타겟사용자 조사,트렌드조사를 끝내고 인사이트를 정리를 한 후

튜터님에게 피드백을 받으러갔다.

우리가 정한 문제

독서의 필요성은 알지만, 접근하기 힘든 사람들

시장조사

최근 10년간 종합 독서율은 하락하고 있지만 독서의 중요성은 강조되며 이는 여전히 필요한 활동임을 보여줌

현대인의 인식

독서의 유용성을 인정하면서도 문해력 수준이 낮아지고 있는 현실은, 독서의 필요성을 인지하고 있음에도
실제로 이를 실천하는 행동으로 이어지지 않고 있음을 시사한다. 이는 현대인의 생활 패턴이나 독서 환경에 실질적인 제약이 있음을 반영한다.

그러면 왜 어려울까

독서는 시각적인 자극이 적고 이해가 요구되는 과정이 많아 현대의 빠르고 간편한 정보 소비 환경에 적응한 사람들이

어렵게 느낄 수 있다.
특히 학생 시절 경험한 난해한 독서 경험과 독서가 의무화된 환경이 성인이 된 후 책에 대한 흥미와 접근성을 낮추는

주요 요인으로 작용하며, 독서 습관 형성에 방해가 되고 있다.

전자책 시장은 성장

2023년 국내 전자책 시장 규모가 전년 대비 1% 성장해 약 1조3000억원에 이르렀고,
전자책 매출 또한 전년 대비 14% 증가한 약 1조1000억원을 기록했다.
업계에서는 2028년 국내 전자책 시장 규모가 2조원을 돌파할 것으로 내다보고 있다.
이제 온라인에서 읽던 e북은 도서 콘텐츠 플랫폼으로 변화하고 있다.

타겟 리서치

이러한 전자책 시장에서

전자책 서비스 “밀리의 서재"와 “리디 북스"의 이용층 조사및 2021년 국민 독서실태 조사 결과를 통해 저희가 해결해야할 문제에 대한 타겟으로 20~30대 디지털 네이티브 세대인것을 파악

타겟의 니즈

1.왜 2030대들이 전자책을 읽을까?
조사결과로 전자책의 주된 이용 이유는 ‘보관 및 휴대의 편리성' 인것을 파악.

2.지적성장과 자기계발에 관심이 많을까?

조사결과 독서의 목적이 마음의 성장을 위해서가 24.6%, 책 읽는 것이 재미있어서가 22.5%,

자기 계발을 위해서가 21.4%로 나타났다.

타겟리서치 인사이트

독서율이 감소하는 상황에서도 전자책 시장은 꾸준히 성장하고 있고,
전자책의 주요 소비층은 2030임을 확인
2030은 마음의 성장과 재미, 자기 계발을 목적으로 독서를 함.

타겟으로 정한 2030 세대들을 공략한 새로운 접근 방식의 필요성

요즘 트렌드인 '텍스트 힙(Text Hip)' 문화는 짧고 간결하면서도 감각적인 텍스트를 통해 독서를 새로운 방식으로 경험할

가능성을 열어주고 있다는 것은 수요가 있다고 봄

예시로 한강의 노벨문학상 수삭이후로 도서앱결제액이 2배 급증한 사례, 스티커 붙이고 북커버 씌우고 책을 읽기만 하는게 아닌 장식,도서자체를 굿즈로 보거나, 도서전등의 경험을 기록하고 공유하는것 등

이외의 북톡,북스타그램등 여러 트렌드로 인하여 독서시장이 활발해진것을 파악

내가 새롭게 해결해주는 사용자 문제인가 (기존 시장에 없는 서비스인지?)

전자책 시장은 기술적 발전을 이루었지만, 여전히 독서 심리 장벽 해소와 디지털 세대 맞춤형 UX/UI 설계가 부족
이 문제를 쉽고 친근한 독서 경험책에 대한 부담감을 줄이고 재미와 트렌디함을 강조한 독서 접근 방식 공략하면 기존 시장에 없는 서비스를 만들 수 있다.

UX/UI의 솔루션으로 해결할 수 있는 문제인가요?

그리고 사실 독서율 감소가 사회현상이라 해결하기 어려운데 이것을 설득하는 근거를 찾기 살짝 힘들었음.

독서는 오랜시간을 걸쳐 반복되는 습관

이를 지속하기 위해서는 사용자 맞춤형 기술을 적용해 동기를 부여해야함
시중에 독서 습관 형성을 위한 독서기록 관리를 하는 앱이있음.

공통적으로 독서 목표를 설정하게 한 후 , 사용자가 기록을 한 독서 내역을 통계로 보여주며, 사용자가 의식적인 노력을

할 수 있도록 독려함.
이와 비슷하게 책에 대한 부담감을 줄이고 재미와 트렌디함을 강조하는 접근 방식은 사용자가 독서에 대한 흥미를

잃지 않도록 돕는 중요한 역할을 할 수 있다.

튜터님의 답변요약

수요조사는 좋다. 하지만 다만 가져온 자료는 “전자책 시장”이 크고 있다는 자료.

따라서, 전통적인 독서 방식이 아닌 “전자책”시장과 “텍스트 힙”과 연결성 있도록 방향성 고려하기

보완할 부분: 타겟층 관련 추가할 트랜드 보완해보기 (갓생 트랜드 등)

그후 우리는 추가적으로 아래를 진행함.

1.트렌드 조사를 2030에 관한 것들 보완하기

2.데스크리서치는 계속 온고잉
3.내일 피드백에서는 사용자 리서치에 대한 것을 위주로
(어떤 사람들에게 어떤 질문을?)
4.도메인 방향성을 정할 것 - 2개로 (ex. 우리는 커머스나 커뮤니티 쪽으로 가겠다!)
-> 해당 방향의 경쟁사 분석

내배캠 UXUI 김소윤 튜터님 피드백 내용

여기서 난 전자책시장과 트렌드를 조사했다.

트렌드는 텍스트힙에서 파생된 여러 트렌드 , 문화가 나옴 북톡, Text hip,도서전방문,북스타그램 등

또한 밀리의서재 이용패턴을 분석한 결과

밀리의서재 측은 "아침에는 '갓생'을 위한 자기계발에, 밤에는 '꿀잠'을 위한 휴식과 사색에 집중하는 라이프스타일을 추구하고 있음을 엿볼 수 있다"고 분석함.

- UX집중반 ( UX 프로젝트)

오늘은 발표대본만 작성한 후 발표시간재보니깐 퇴실 시간이 다됐다..

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

오늘은.. UXUI적으로 해결하기 어려운 문제를 해결하려할때 어떻게 해결해야할지 시장조사와 트렌드조사를 엮어

최대한 고민해본것같다.

전자책이라는 도메인에 진입을 했지만 현재 커머스는 사실 UXUI로 해결하기가 어려운부분이고,

그외 커뮤니티,큐레이션,모임,습관형성등으로 가야하여 일단 커뮤니티와 큐레이션쪽으로 생각을 하고 조사를 진행함.

근데 우리는 텍스트 힙 등의 트렌드 를 이용하여 mz세대가 독서란것 자체를 어떠한 방식으로 소비하든 즐겁게 해주는 방향으로 대략

가고있는데, 그럼 결국 전자책 서비스를 제공해야하는건지 아닌지 팀원과 함께 고민에 빠짐..

일단 우리가 처음 정한 제품적가치는 변하지 않으므로 이걸 토대로 어찌어찌 해야될것같다.

제품적 가치
쉽고 친근한 독서 경험: 책에 대한 부담감을 줄이고 재미와 트렌디함을 강조한 독서 접근 방식을 제공합니다.
이로써 디지털 세대가 책을 다시 친근하게 느끼고, 독서를 통해 개인의 성장과 즐거움을 찾을 수 있도록 돕는 것을 목표로 합니다.

TIL 48일차

UXUI0 — Thu, 16 Jan 2025 00:27:05 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- 최종프로젝트 문제발견

- UX집중반

오늘은 어떤 것을 배웠나요

- 최종프로젝트 문제 발견

오늘 달성한거 :우리가 해결할 문제를 정하는 과정에서 다음 단계로 넘어갈때 단계, 순서를 이상하게 진행 하고 있었던것을 깨달음

내일 할일 :문제설정의 기준에 부합한지 다시 리서치조사

오늘 우리는

긴 출퇴근으로 인하여 직장인들이 우울증을 겪는다. 라는 문제점을 발견을하고

그것에 대한 시장조사, 트렌드조사, 근거를 찾았다.

조사데이터를 토대로 우리는 이것이 정말 사용자의 진짜 문제인지, 문제를 UXUI 솔루션으로 해결할수있는문제인지,

사용자리서치를 통해 검증할수있는 불편함인지, 문제를 해결함으로써 어떤 가치를 창출할수있는지를 대입하고 정말

제대로 문제설정이 된지 확인을 하였다.

위에 내용을 요약하자면

1. 출퇴근 시간으로 많은 시간을 소요하는 직장인들

출퇴근길로 인한 스트레스 발생 ( 원인으로는 지하철 자체의 환경, 시간빈곤 등)

2.사람들은 스트레스를 받는사람들도 있지만 약간 받거나 보통인 사람들도 있다.

이유는 스마트폰

즉 스마트기기로 여러 활동들이 가능해지면서 차내에서도 의미 있는 시간(생산적인 시간)을 보낼 수 있게 됐다는 점이 큰 변화라고 생각.

3.이러한 문제를 해결한다면 근로자들의 삶의 질을 개선을 할수있고, 그로인하여 스트레스를 완화할수있을것으로 기대

4.하지만 이러한 출퇴근시간에 이용하는 서비스 (유튜브 ,밀리의서재, 게임앱 등)이 있으나

출퇴근으로 인한 스트레스를 완화하는 서비스는 없다.

5.즉 직접 경쟁사가 없고 출퇴근인구는 약 2,500만명(통계청 자료) 으로

시장 잠재성은 출퇴근 시간 동안의 유휴 시간을 활용하려는 콘텐츠 시장은 지속 성장 중이므로 수익창출이 가능할것으로 판단

그리고 이것을 토대로 다시 튜터님에게 피드백을 받으러갔다.

일단 문제정의 접근방식이 잘못됌.

출퇴근 시간에 사용하는 앱은 특정 앱으로 정해져있지 않음. 그것 자체가 제품 아이디어가 될 수 없음.
문제 정의인 “출퇴근 시간이 스트레스이다”를 해결해주는 경쟁사 예시(음악앱, 게임앱, 자기개발앱 등)들이 간접적인 해결은 될 수 있으나 직접적으로 해결해줄 수 있는 문제로 보이지 않음.

근본적인 출퇴근 시간을 줄여주거나 출퇴근 관련 서비스(예시-교통 정보 파악, 교통편 예약)이 아니고서야 여가시간에

쓰는 앱이 현재 정의한 문제를 직접적으로 해결해주는 방향성이라고 보기 어려움.

예를들어 게임앱, 명상앱은 애초에 출퇴근 시간 스트레스를 풀어주고자 나온 앱이라 보기 어려움.

따라서 내가 진짜 제품을 통해 해결해주고 싶은 문제가 무엇인지 생각해보아야 함.

우리는 피드백을 듣고 우리는 다시 시장조사, 트랜드 조사, 타겟 사용자 조사를 하고 그 안에서 찾은 내용을 기반으로

문제 정의하기 과정을 거쳤다. 그 결과 우리는 팀원과 회의후 "출퇴근시간으로 인한 우울증" 이라는 문제는 여러 요소로

인하여해결하기가 어렵다고 판단후, 다른 문제를 찾기 시작함.

먼저 처음부터 돌아가기로함 각자의 관심사를 마인드맵으로 적고 그중에서 공통적인 부분을 찾음

크게 헬스케어, 자기개발,교육,취미생활로 공통적인부분이 좁혀졌으며 그안에서 주제를 각자 투표를 함

결과로 독서, 기록이 선정이 돼었다.

그후 우리는 먼저 도서 라는 도메인을 선정후 시장조사, 경쟁사조사,타겟사용자 조사,트렌드조사를 진행을하였다.

그중 나는 타겟사용자 조사를 하였으며,

통계자료를 위주로 자료를 찾아왔으며 독서에 관한문제는 독서를 하고싶지만 못하는쪽으로 크게 설정하여

독서 장애 요인및 연령대별 독서율과 독서에 대한 타겟사용자의 인식을 조사하였다.

그후 우리는 이것을 제대로 문제설정을 했는지 체크를 하였다.

체크는 앞서했던 긴 출퇴근시간우울증 문제에서 사용했던 방식과 동일하다.

요약하자면

사용자 관점에서 사용자의 진짜 문제인가요?

=결론적으로, 독서의 가치와 유용성을 사람들이 인지하고 있음에도 불구하고,
장애 요인들이 독서율을 저하시키는 문제가 지속되고 있다는 점에서 개선이 필요한 영역으로 보입니다.

트렌드에 맞추어 성장할 수 있는 앱인가?

=주춤하던 독서 시장이 텍스트 힙과 책꾸 등 새로운 트렌드로 인해서 다시 활발해지고 있다.

UX/UI의 솔루션으로 해결할 수 있는 문제인가요?

=이미 여러 독서 앱이 있으며, 독서라는 것을 여러방면으로 도와주는 앱이 다수있으므로 이것 자체가 UXUI적으로 해결할수있다는 증거

사용자리서치를 통해 검증할 수 있는 불편함인가요?

=독서는 접해본 사람이 다수 있으며, 정성적 리서치와 정량적 리서치로 검증가능할만한 불편함이다.

문제를 해결함으로써 어떤 가치를 창출할 수 있을까요?

= 2024년 독서 문화는 단순한 책 읽기를 넘어 개인의 취향을 표현하는 문화로 자리 잡으며, 관련 출판 및 용품 시장도 크게 성장했다.
트렌드가 여러 방향으로 성장함에 따라 독서의 유용성은 알지만, 접근하기 힘든 사람들의 문제를 해결함으로써
외부고객의 유입을 늘릴 수 있을 것이다..

비지니스 창출이 가능한 문제 사이즈인가요? (마켓 리서치)

=광고수익,프리미엄모델(구독 서비스),제휴마케팅,파트너쉽,컨텐츠판매 등으로 창출이 가능하며,

마켓리서치로 다른 경쟁사앱들도 이러한 비즈니스모델을 가지고있는것으로 판단

이러한 이유로 문제 설정이 제대로 되었다고 판단..하지만

독서량 감소라는것자체가 사회적문제인데 이것을 정말 해결할수있을지 고민이 든다...

- UX집중반 ( UX 프로젝트)

오늘은 와이어프레임으로 제작한 솔루션으로 프로토타입을 제작하였다.

1.내 예약페이지의 실시간 주차가능면 안내 및 반납 장소 근처 주차장 찾기 UI 추가

2.반납장소근처 주차장 찾기를 누를시 나오는 다른 주차장 찾는 화면

리스트에서 카드로 바뀌는 프로토타입

주차잔여석의 새로고침을 누르면 실시간으로 업데이트가 되며 업데이트가 몇분전에 되었는지 알려줌

장소찾기를 클릭하면 지도와 리스트를 보여주며 클릭시 맵이 확대대며 핀도 크기가 다른핀보다 커짐

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

오늘은.. 문제설정에서 아직 벗어나지못했다.

이유는 우리가 자꾸 특정 기사 몇개로 바로 사용자 문제 정의로 접근하는것같다

해결책은 일단 이번주는 튜터님의 말씀대로 시장 조사, 트랜드 조사, 사용자 조사에 집중하고 어떠한 문제나 산업에 집중할지

근거를 기반으로 좁히는데에 집중해야 할것 같다

TIL 47일차

UXUI0 — Tue, 14 Jan 2025 23:06:04 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- 최종프로젝트 문제발견

- UX집중반

오늘은 어떤 것을 배웠나요

- 최종프로젝트 문제 발견

오늘은 어제 다 듣지 못한 의견들을 전부 보았고,

그후 일단 과정을 정리후 1차 피드백을 받으러 출발함.

피드백내용

일단 문제를 발견하기 위해 여러 아이디어를 내고 그것중 몇개를 골라서 구체화 하였으면,

고려해야할것은

1.문제 중요성및 가치측면
2.비즈니스측면

이며, 이를 위해서는 일단 시장조사와 경쟁사 분석 타겟사용자분석을 진행해야한다고 피드백을 받았다.

사실 피드백을 받기전부터 우리는 문제가 있었다.

바로 해결하고싶은문제를 발견하는 단계에서 벌써 솔루션까지 생각을 하고 그것을 기준으로 시장조사, 타겟사용자, 경쟁사분석을

한것이다.

이렇게 될경우 다양한 아이디어를 고려할 기회를 놓칠수가 있고, 문제의 정확한 근본적인 문제를 얕게 파악한 상태로 만들수가

있기 때문에 결국 사용자 경험을 개선하는데 실패할 가능성이 높아지는것이다.

그래서 우린 이 문제를 그대로 가지고 모른채로 다시 피드백을 받으러갔다.

당연하게도 튜터님은 이 문제를 찾으셨고, 문제점을 지적해주셨다.

지금은 가치보다는 방법이 앞서있으며, 어떤 가치를 위해서 서비스를 만들것인지를 먼저 정해야한다.

그리고 피드백을 받을때는 설득될정도로 근거가 확실해야하고 솔루션에대한것이 아닌 문제에 대한 (비즈니스, 가치, 중요성, 새로움, 경쟁사,시장조사자료,) 그 스토리가 설득이 될만한지가 중요하다.

지금은 이전에 했던 프로젝트와 달리 새 서비스를 가져오는것인데 이럴경우 시장자체가 중요하며 그외 타겟사용자,

트렌드조사(미래는 어떻게될까,,등등)또한 중요하다고 하셨다.

즉 어떤 타겟 사용자의 문제를 해결해주면 비즈니스 창출을 할수있을까의 아이디어와 근거를 충분히 찾아야한다!

오늘 달성한거 :우리가 해결할 문제를 정하는 과정에서 다음 단계로 넘어갈때 단계, 순서를 이상하게 진행 하고 있었던것을 깨달음

내일 할일 :문제설정의 기준에 부합한지 다시 리서치조사

- UX집중반 ( UX 프로젝트)

오늘은 어제 받은 질문지에서 나온 피드백을 반영하여 답변을 작성하였다.

그중에서 피드백을 반영할 것들(장표에 넣을것들)을 선정하였다.

첫번째로 혼잡도 기준이 어떻게 정해진건지에 대한 피드백을 반영하였다.

피드백 반영 결과 전 후

혼잡도 기준을 서울 지하철 혼잡도 분류 기준을 참고하였다 정확한 기준이 안나와 있어서 그것은 팀원과 상의후 주차 가능 면적과 도달시간을 고려하여서 선정을 하였다는 것을 반영하였다.

두번째로 사용자가 중요하게 생각하는 가치가 모르는사람이 봤을때 한눈에 알수 있을정도로 녹여내기

피드백 반영 결과 전 후

위에 장표에서 핵심가치를 설명하고있지만, 사람들은 그저 통계자료를 설명하고있구나로 이해를 하고있는 경향이 있는것같아서 핵심가치 라벨을 달아서 한번에 이해할수있게 하고 워딩을 앞장의 장표와 연결지어서 좀더 핵심가치가 이거구나를 알수있게 반영하였다.

장표관련은 여기까지 완료를 하였고, 내일부터는 와이어프레임으로 제작한 솔루션을 프로토타입으로 제작할 예정이다.

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

원래 있던 서비스에서 문제를 찾고 정의를 하는것이 아닌 이번프로젝트는 처음부터 서비스라는 틀없이

문제 그 자체를 찾는것부터 시작하다보니 뒤에 해결해야할 순서를 앞 당겨 하거나 헷갈리는 문제들이 발생하였다.

그래서 일단 발견한 문제에 대해 문제설정이 제대로 되었는지 확인을 정확히 해보고 만약에 이 문제가 해당기준에 부합하지않다 판단하면 팀원과 합의후 다른 문제를 발견하는 쪽으로 방향을 틀었다.

그러한 기준들은 튜터님의 피드백과 발제내용을 다시 자세히 보면서 진행을 해야할것같다.

TIL 46일차

UXUI0 — Mon, 13 Jan 2025 23:19:07 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- 최종프로젝트 발제듣고 문제찾기

- UX집중반

오늘은 어떤 것을 배웠나요

- 최종프로젝트 발제듣고 문제찾기

오늘부터 최종프로젝트가 시작함

최종프로젝트는 MVP를 기획하고 디자인하는거임

일단 우리는 리더와 부리더를 정한후 간단하게 아이스브레이킹 후 계획설정을 하였다.

오늘은 첫날로 팀원과 상의하여서 해결하고 싶은 문제를 찾기위해 각각 의견을 내면서 진행하였다.

먼저 1차로 각자 다양한 의견을 냈다.

먼저 의견을 낼때는 UXUI 솔루션만으로 해결하기 어려운 사회현상에 따른 문제보다 해결할 수 있는 문제와 검증할 수 있는 불편함을 위주로 의견을 냈다.

그중 내가 낸 아이디어

소셜 미디어,

중고거래 사기,

온라인 쇼핑 중 상품의 크기나 색상이 실제와 다른 문제,

영양제 챙겨먹는거 도와주는앱,

각자의 일정에 맞는 최적의 만남 시간정해주는 앱,

새로운 취미 찾기 어려움: 취미 매칭 서비스,
여러 개의 온라인 계정을 관리할 때 비밀번호를 기억하기 어렵다.

도박방지

여행 준비를 할 때 필요한 물품 목록을 작성하는 것이 번거롭다,

스트레칭 및 휴식 알림,

개인 자기계발 과정의 지속성 유지가 어렵다,

혼자 식사하는 외로움 함께 식사하는 가상 캐릭터,

여행 중 안전한 경로를 찾기

여기서 한번더 공통적인 문제를 묶어보았다

여기서 고령화로 노인을 위한 플랫폼도 의견이 나왔는데 이것은 UT를 진행할때 실제로 노인분들을 대상으로 진행하기에는 힘들것

같다는 팀원들의 의견으로 협의후 제외하였다.

이것을 바탕으로 나온 해결하고 싶은 문제 키워드가 아래 4개로 좁혀졌다.

해결하고 싶은 문제

1인 가구
긴 출퇴근 시간
여러 플랫폼의 다양한 패스워드를 기억하지 못함
장시간 앉아있는 사람들의 자세 교정

이후 각각 해결하고 싶은 문제들을 디벨롭하는 시간을 가졌다.

이미있는 앱과 자료 등을 찾으면서 각자 디벨롭을 하였고, 그 후에 서로 찾아온 자료들을 보면서 토론을 진행하였다.

일단 오늘은 시간부족관계로 전부의 의견을 보지못하였고, 내일다시 진행 할 예정

- UX집중반 ( UX 프로젝트)

오늘은 조별 우수케이스 선정및 각 조들에게 질문지를 작성하는 시간을 가짐

일단 우리조가 우수케이스중 한조로 선별이 되어서 기쁘지만, 발표를 준비해야해서 막 기쁘진 않았다.(하지만 좋다)

오늘은 그래서 우수케이스 선정및 질문지를 작성하는 시간으로 집중반이 끝이났다.

발표는 금요일에 진행하므로 그전에 받은 질문지로 피드백을 반영하여 보완하거나 프로토타입제작후 UT까지 진행하고 싶다.

시간이 된다면...

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

오늘은 최종프로젝트 시작일이다.

지금까지 프로젝트를 해오면서 느낀것이 첫단추가 가장 중요한것같다.

첫단추을 잘못끼면 지나고 나면 계속 후회를 한다.

그래서 플젝기간동안 죽어라 해야겠다...

WIL 11주차 (UX집중반)

UXUI0 — Fri, 10 Jan 2025 23:54:26 +0900

- FACTS(사실, 객관) :이번 일주일 동안 있었던 일, 내가 한 일

1. props,state 복습

2. 리액트 숙련강의+리액트 미니과제

Styled component , react-router-dom , useNavigate 사용법

3. UX집중반 가설과 솔루션 도출 과정에서의 디자인씽킹

- FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

일주일동안 미니과제도하고 솔루션도출도했는데 정말 얻은것이 많은것같다

- FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

리액트강의 + 미니과제

1. Styled component

사용이유와 사용방법을 배워서 스타일을 조금 더 쉽게 줄수가 있다.

그중 스타일에 조건식을 쉽게 줄수있다는것이 좋은것같다.

2.react-router-dom

웹사이트에서 페이지를 바꾸는 길 안내 지도라고 생각하면 된다.

Home에서 포트폴리오의 알바천국을 클릭하면 알바천국포트폴리오 페이지로 이동하는 모습

3.useNavigate

원래는 주소창에 path를 입력해야 그페이지로 넘어간다. 하지만 일반사용자는 그렇게 넘어가지않는다

뭐든간에 클릭해서 넘어간다. 이건 그것을 해결해주는 기능이다. 위에 처럼 포트폴리오를 클릭해서 알바천국포트폴리오페이지로 이동하는것처럼 이동된다.

UX집중반

오늘 가설과 솔루션 도출에 대한 튜터님의 피드백으로 배운것.

1. 디바이스 이동의 우려

첫 번째 우려는 두 개의 디바이스 이동이 필요하다는 점이다.

차량 내비게이션에서 안내 문구가 나타나며, 소카 앱에서 확인하라는 메시지가 표시된다.

이로 인해 운전 중 디바이스를 이동해야 하는 불편함이 발생할 수 있다.

2.운전 중 정보 확인의 불편함

운전 중에 정보를 확인하는 것이 생각보다 편리하지 않을 수 있다.

운전자가 핸드폰을 꺼내서 정보를 확인해야 하므로, 즉각적인 정보 접근이 어렵다.

3.내비게이션 화면의 정보 과부하

내비게이션 화면에서 제공하는 정보는 운전 중 상황과 화면 크기를 고려해야 한다.

제공되는 정보가 과도할 수 있으며, 운전자가 읽기 어려운 상황이 발생할 수 있다.

4.정보 간소화 필요성

운전 중에는 전방 주시가 필요하므로, 제공되는 정보의 양을 줄여야 할 필요가 있다.

예를 들어, 주차 자리 유무나 앱으로의 이동 여부를 간단히 안내하는 것이 바람직하다.

5.내비게이션 기능 활용 제안

내비게이션에서 정보를 제공하기보다는, 기존의 알림 기능을 활용하는 것이 좋을 수 있다.

예를 들어, 카카오톡 알림을 읽어주는 기능을 활용할 수 있다.

이러한 접근은 운전 중 안전성을 높일 수 있는 방법으로 제안된다.

3주동안 종합적으로 배운것들

결국 튜터님께서 피드백을 종합해보면 자동차를 운전하면서 앱을 사용하는것처럼

사용자 환경(지금의 경우는 운전 상황)에 맞는 UX/UI 설계를 통해 안전성과 편의성을 높이는것에 초점을 두는것이

중요하다고 말씀하시는것 같다!

그리고 장표를 만들때 솔루션이든 핵심문제든 그 과정을 구체적으로 하되 이해가 쉽도록 추가를 무조건 해야 이걸 보는 사람들이 자연스러운 흐름으로 한번에 알수 있을것 같다. 왜냐하면 다른 팀원들 피드백중에서 이것이 왜 이렇게 선정이됬는지 왜 이렇게 됬는지 궁금해하는 사람들이 많았다.

그리고 개선을할때 무작정 AI기술을 사용해서 어떠한 문제를 해결했습니다. 라는것보다는

나도 쏘카를 찾아보면서 정밀위치안내시스템이라든지, 소피아앱이라든지, 공공데이터포털이라든지 그러한 AI기술이나 데이터를 이용한 API가 있었는데 이러한 실제 존재하는 것들을 이용하여 개선을 했다는 근거가 있어야 한다.

그외 튜터님의 피드백

장표를 구성할때는 어떤과정을 겪엇다보다는 이과정으로 어떤결과를 얻었는지가 가장중요함

솔루션은 문장만으로 이걸 어떻게 해결할거구나를 떠올릴만큼 해야된다. 너무 간결해도 안됌

매출상승기대효과는 우리가 알기 힘드니깐 사용자중심적효과로 하는게 포폴에 넣기 좋음

UI개선할때는 UI가가진 특징과 환경 목적을 알아야함

오늘 피드백도 그렇고 전체적인 3주차동안의 다른 조원들, 튜터님의 피드백을 토대로 다시 장표에 추가할 내용이나 틀을 만들고 일요일날 따로 만나서 더진행하기로 합의를 하였다.

결과적으로, 현재 나의 상태는 어떻게 되었지?

음...대충..리액트로 자기소개페이지정도 만들수있을것같다..ㅎ

ux에 대한것은 좀더 각 단계마다 중요하게 생각해야하는것들이 무엇인지, 장표를 구성할때의 어떤것을 고려해야할지를 알게되었다.

이 상태에서 다음 일주일을 더 잘 보내려면 무엇이 필요할까?

일단 리액트숙련강의 들으면서 코딩지식이 날아가지않게하기

TIL 45일차

UXUI0 — Fri, 10 Jan 2025 00:11:59 +0900

TIL (Today I learned)

오늘 나는 무엇을 했나요

- React 숙련강의

- React 미니 과제

- UX집중반

오늘은 어떤 것을 배웠나요

-React 숙련강의

미니과제에 필요한 강의가 아직 전 강의를 못들어서 일단 노션자료와 그외 검색으로 공부를 먼저 하였다.

react-router-dom를 배웠다.

1.사용방법

yarn add react-router-dom

터미널에 패키지설치

2.이동시킬 페이지 컴포넌트생성후 안에 내용을 채운다.

ex) cafe.jsx , webtoon.jsx

3.우리가 만든 페이지 컴포넌트로 이동하게끔 컴포넌트를 만든다

Router.jsx를 생성후 아래 코드 입력

import React from "react";

import { BrowserRouter, Route, Routes } from "react-router-dom";

import Home from "../pages/Home";

import About from "../pages/About";

import Contact from "../pages/Contact";

const Router = () => {

return (

{/*

Routes안에 이렇게 작성합니다.

Route에는 react-router-dom에서 지원하는 props들이 있습니다.

path는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.

element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.

*/}

</Routes>

</BrowserRouter>

);

};

export default Router;

이때 중요한점은 경로를 잘 적어서 import를 해야함

ex) "../pages/Contact";

5.그후 App.jsx에 Router.js를 import한다.

import Router from "./shared/Router";

App.jsx에 import하는이유는 결국 어떤 컴포넌트든지 app.jsx를 거치기때문이다.

6. 이제 브라우저에 path를 입력하면 이동이 잘되는것을 알수있다.

react-router-dom 사용하는이유

1.여러 페이지를 왔다갔다 할수있다.

예시로 네이버메인에서 네이버카페로 갈수있거나 네이버웹툰으로 갈수있다.

useNavigate

하지만 여기까지만들어도 보통 이용자는 주소창에 저렇게 path를 입력하지않는다.

버튼이나 무언가를 클릭해서 넘어가는게 보통이다.

이를 위해 useNavigate 가있다.

간단하게 클릭 이벤트를 이용해 클릭을해서 다른 페이지로 넘어갈수있게 쉽게 도와주는것이다.

사용방법은 간단함

// src/pages/home.js

import { useNavigate } from "react-router-dom";

const Home = () => {

const navigate = useNavigate();

return (

<button

onClick={() => {

navigate("/webtoon");

}}

works로 이동

</button>

);

};

export default Home;

위에처럼 useNavigate를 import하고 navigate("/webtoon ");처럼 보내고자하는 URL을 적으면 됨

여기서는 같은 pages폴더에 있는 webtoon으로 가기 위해서 /webtoon으로 작성

-React 미니 과제

오늘은 도전과제중 페이지 라우팅, Styled-Components 활용을 하였다.

먼저 페이지 라우팅은 포트폴리오를 클릭하면 포트폴리오페이지로 넘어가게 하고싶었는데 시간이 부족했다.

그래서 일단 path입력해야 넘어갈수있게 하였다.

안에 내용도 시간이 없어서 못채움

일단 path를 넘어가면 메인에있는 화면은 안보이게하고 넘어간 부분에 화면만 나오게 함

페이지 라우팅

Styled-Components 활용

css파일에 있는부분을 styledComponent로 변경을 하였다.

import React from 'react'

import { useState } from 'react';

import { Portfolios } from '../Portfolios';

import styled, { createGlobalStyle } from 'styled-components';

import SkillList from '../SkillList';

import { HobbyList } from '../HobbyList';

const GlobalStyle = createGlobalStyle`

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

font-size: 14px;

background-color: #f4f4f4;

}

// 헤더 스타일

const Header = styled.header`

background-color: #1a1a1a;

color: white;

padding: 20px 0;

text-align: center;

// 메인 콘텐츠 스타일

const Container = styled.div`

padding: 20px;

max-width: 1200px;

margin: auto;

background-color: white;

- UX집중반 ( UX 프로젝트)

오늘은 저번에 아이디어 도출을 끝내고 팀원들과 함께 만든것을 토대로 장표를 만들었다.

먼저 기존문제현황에 대한 아이디어도출한것으로

사용자는 결국 주차자리현황을 바로 알수없다는것과, 만차시의 반납과정이 번거롭다는 문제에 대한 아이디어를 도출후

이로인한 전체적인 해결방안과 그에대한 기대효과를 인사이트로 뽑았다.

쏘카 반납에 대한 솔루션 플로우차트이다.

플로우차트를 먼저 그린후 그것을 보면서 와이어프레임을 진행을 하였다.

여기서 와이어프레임은 분업해서 하였는데 나는 그중 주차장에 대한 상세정보 와이어프레임을 맡았다.

일단 바뀐 핵심은 다른 주차장들의 자리현황을 앱에서 쉽게 알수가 있어서 만약 기존의 주차장자리가 만차라면

기존주차장을 갈필요없이 바로 다른주차장을 찾아 길안내를 받은후 주차를 할수가있다.

그외는 UI적인 부분에서 지도의 핀이나 전기차 충전가능여부, 필터등을 개선을 하였다.

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

3주동안 진행을 하면서 정말 많은 어려움이 있었던것같음.

리서치를 했지만 필요한정보가 계속 나와 리서치를 계속진행을하거나

리서치중에서도 잘못된정보가 있어서 중간에 수정을 하거나 했다. 그리고 항상 할때마다 느끼는거지만

이게 정말 최선인지 모르겠다. 리서치든, 문제해결이든, 아이디어도출이든 뭔가 정보는 많이 나오지만

중간에 건너띈 단계도 있는것같기도하고 없는것같기도하고 암튼 계속 해보면서 경험을 쌓는게 중요한듯..