moonddang

포트폴리오에 도움되는 내용

moonddang — Wed, 25 Oct 2023 22:09:42 +0900

https://brunch.co.kr/@renajang/8

이런 포트폴리오는 떨어집니다 (1)

포트폴리오 만들 때 가장 많이 하는 실수 | 포트폴리오를 준비하며 많은 이들에게 피드백을 받았다. 모두 하는 일은 달랐으나, 같은 부분을 지적했다. 그리고 놀랍게도 받았던 지적의 상당수는

brunch.co.kr

https://brunch.co.kr/@ny0303/79

꾸준한 포트폴리오 관리의 중요성

이직 시 나에게 주어진 기회를 잡기 위해 꼭 필요한 팁들 | 최근에 커피챗에서 포트폴리오 멘토로 활동하게 되면서, 정말 포트폴리오와 관련된 다양한 고민이 있다고 생각했고 많은 분들이 '포

brunch.co.kr

https://brunch.co.kr/@renajang/9

절대 하지 말아야할 포트폴리오 실수

포트폴리오 만들 때 가장 많이 하는 실수 | 1편에서는 포트폴리오 구성에서 많이 하는 실수를 알아보았다. (궁금하다면 1편으로) 이번에는 더 구체적으로, 포트폴리오에 어떤 내용을 어떻게 넣

brunch.co.kr

포트폴리오 팁

* 너무 많이 고민한다고 해서 최상의 포폴이 나올수없다. 굉장히 어려운 일이다

그래서 짧은 시간에 조금이라도 여러 번 만드는게 중요하다. 버전 1, 버전 2,,

<포폴 순서>

1. 플젝 선별

* 가장 중요한건 처음의 임팩트

한두개 플젝만 봐도 잘하는지, 못하는지 알 수 있음, 본인의 기여도도 알 수 있음.

* 플젝의 개수는 의미가 없고 1~2개에 내가 가장 많이 참여하고 구체적으로 말할 수 있는 플젝을 가장 앞에 배치

2. 레퍼런스 참고

* Mobbin, awward 사이트 참고해서 요즘의 유행, 트렌드 파악하기

레퍼런스 보고 그게 왜 예쁜지 분석하고 참고

내가 왜 그 아웃풋을 냈는지, 내가 어떤 생각으로 그런 아이디어를 냈는지 말하는게 중요

포폴 레퍼런스는 레이아웃을 참고해서 내꺼를 대입하기, 템플릿이라고 생각하고 내 프로젝트와 맞는 것을 짜집기하기

-예를 들어 컨셉, 서비스가 비슷한 포폴의 레이아웃을 참고해서 쓰면 된다.

이 이미지 안에서도 컨셉이 보일 수 있게 해야함

-분석이 무조건 선행되어야 한다.

포폴 방향성 -디지털 또는 귀여운 디저트에 대한 앱-> 그거에 대한 레퍼런스

3. 디자인은 끝이 없다

반복만이 답이다.

포폴은 다듬으면 다듬을수록 완벽해진다.

면접관은 포폴에서 보는 눈, 분석력, 구현능력이 있는가를 본다.

**그외 팁

-사이즈는 자기 마음대로

-팀플젝에서 내 기여도는 7~80프로 이상이여야 한다.

-왜 이걸 만들었어요?, 이아이디어를 어디서 가져왔어요? 이런 내용들어가게

-기획단계는 함축해야 한다.

-3~4장 정도에 한 플젝 포폴을 끝내야한다.

-한~두장안에 기획, 한~두장에 디자인 산출물 넣기

- pdf만들어서 링크로 전달, 웹사이트를 pdf로 만들어서 제출하는 방법이 있다.

<구성>

1) 커버-오버뷰(기획의도), 기간, 기여도, 이름, 강력한 비주얼, 내가 왜 기획했는지, (프로토타입링크 넣으면 좋음(있으면 좋음)-기획이 중요할 때)

2) 기획에 있어서 가장 큰 강점은 뭘까?: 플젝의 특성, 내가 제일 밀고 싶은 기획, 내가 이걸 유엑스적으로 어떻게 풀어낼건지 과정을 한페이지에 담아주기

** 텍스트가 많은 정보는 짧게 보여주기

3) UI디자인 부분

0927 오늘 본 아티클

moonddang — Wed, 27 Sep 2023 13:50:40 +0900

https://brunch.co.kr/@cliche-cliche/194

뉴 디자인싱킹이 필요할 때

디자인싱킹이 낡았다는 생각이 든다면 | 디자인싱킹(Design Thinking)은 오랫동안 혁신적인 문제 해결을 위한 프로세스로 사랑받았다. 이름 그대로 디자이너들의 문제 해결 방식을 모방해 만든 방법

brunch.co.kr

https://eopla.net/magazines/7046#

Saas의 핵심은 "파이프라인을 대체하는 것"에 있다

#아이템 선정 #사업전략 #프로덕트 Saas의 핵심은 "파이프라인을 대체하는 것"에 있다 길을 걷던 중, 누군가 갑자기 마이크를 들이밀며 이런 질문을 한다고 상상해보자. “Saas가 도대체 뭔가요?”

eopla.net

https://brunch.co.kr/@button/29

[업데이트] T맵; 다채로움이 더해진 업데이트

'내비'에서 '이동'으로 폭을 넓히다 | 이번에 다룰 업데이트는 T맵 서비스이다. 티맵의 이번 업데이트에서는 홈 화면과 전체적인 구성이 바뀌었고, 새로운 기능이 추가되었다. 꽤 큰 변화가 있었

brunch.co.kr

https://brunch.co.kr/@grit-han/23

쿠팡이츠 리뷰수, 어떻게 하면 늘릴 수 있을까

쿠팡이츠 리뷰수를 늘리기 위한 개선안 테스트 | 리뷰는 유저를 구매로 이끄는 결정적인 요소입니다. 요기요에서 유저 129명을 대상으로 설문한 결과, 유저가 매장을 고를 때 가장 중요하게 생각

brunch.co.kr

0926 오늘 아티클 ; 마이크로인터랙션에 관하여, 커뮤니케이션, 프로덕트 디자이너가 하는 일

moonddang — Wed, 27 Sep 2023 10:04:48 +0900

https://brunch.co.kr/@watergru/13

마이크로인터랙션 (1) 트리거

마이크로인터랙션 사례로 보는 UX 디테일 | 마이크로인터랙션이란 흔히 UX는 직관적이어야 한다고 말한다. ‘사용자를 생각하게 하지 마!’라는 책 이름처럼, 아무 생각 없이도 쓸 수 있는 UX가

brunch.co.kr

마이크로 인터랙션은 사용자가 아무생각없이도 쓸 수 있게 하는걸 가능하게 하는 디테일

: 제품에서 짧은 순간, 혹은 한 가지를 수행하는 작은 기능

예) 비밀번호를 입력할때 어떻게 입력하게 할것인지 정하는 것도 마이크로인터랙션

비밀번호를 입력한다는 이 한가지 행위에서의 사용자와 제품의 상호작용

마이크로 인터랙션을 하기 위해서는 사용자에 대한 이해와 대상 인터랙션의 맥락을 파악해야한다.

경쟁이 심한 시장의 경우 마이크로 인터랙션은 더욱 더 중요함

<마이크로 인터랙션의 네가지 요소>

1) 마이크로 인터랙션을 시작하는 트리거

-버튼, 입력박스, 바텀시트의 핸들과 같은

-사용자가 하고자 하는 작업의 내용, 시기, 주기 등 사용자의 필요에 따라 어포던스, 접근성, 지속성이 결정된다.

2) 마이크로 인터랙션이 어떻게 동작하는지를 결정하는 동작규칙

사용자는 제품의 상호작용에서 제품이 어떻게 동작될지 이해하길 원한다.

예) 검색창에 글자를 입력하면 추천 검색어가 나타난다

3) 마이크로인터랙션의 동작 상황을 표시하는 피드백

-시각, 청각, 촉각, 진동 등 여러형태로

4) 마이크로 인터랙션에게 영향을 미치는 상휘규칙인 순환 LOOPS와 모드MODE

트리거-상호작용을 시작하게 하는 무언가

-수동트리거: 사용자가 직접 누르거나 입력하는 등 조작하게 하는 트리거

-시스템트리거:특정조건이 충족되면 자동으로 구동되는 트리거

트리거 디자인 원칙

1) 트리거는 사용자의 니즈가 발생하는 순간, 그곳에 등장해야한다.

-전원스위치처럼 항상 쓸 수 있어야하고, 사용자가 특수한 모드에 들어가 있을 때만 나타나야 할 수도 있다.

-사용자의 니즈가 언제, 어떤 상황에서 발생하는지 이해하고 트리거를 배치해야한다.

2) 같은 트리거는 언제나 똑같은 행동을 해야한다.

-사용자가 정확한 멘탈모델을 만들 수 있도록 해야한다.

3) 마이크로인터랙션에 포함된 정보를 미리 표시하여, 굳이 클릭하지 않고도 필요한 정보를 얻도록 한다.

4) 시각적 어포던스를 깨지말라. 잘못된 어포던스를 제시하지 말라.

5) 자주 사용하는 마이크로인터랙션의 트리거일수록 찾기 쉬워야한다.

-예) 장바구니, 탐색, 하단바

6) 트리거 자체만으로 제공할 수 없는 정보일때만 레이블을 추가하라.

7) 모든 시스템 구동 트리거는 수동으로 관리하거나 비활성시킬 수 있어야 한다.

예) '앱진입시 광고 팝업 노출' 트리거 발동-> '오늘 더이상 보지않기'같은 선택지 주기/ 앱푸시알림끄기

모든 트리거가 눈에 잘띄면 안된다.

사용자가 해당 크리거가 필요한 상황이나 타이밍을 잘 고려하여 트리거를 디자인해야한다.

<사용자가 트리거를 발견하게되는 경우>

-트리거가 움직이거나 소리로 주의를 끌어서

-무언가를 찾고있는 목적 지향적 상태일때

<발견하기 쉬운 순서대로 나열한 트리거들>

-움직이는 물체(예:반복해서 움직이는 아이콘)

-문자 이름이 붙어있고 어포던스를 갖는 물체(예:레이블이 있는 버튼)

-문자 이름이 붙어있는 물체(예:레이블이 있는 아이콘)

-물체(예: 아이콘)

-보이지 않는 트리거(예:pull to refresh)

https://brunch.co.kr/@watergru/16

마이크로인터랙션 (2) 동작 규칙

사용자를 생각하게 하지 않는 UX를 위한 디테일 | 마이크로인터랙션 https://brunch.co.kr/@watergru/13 먼저 이 글은 위에 링크된 글의 아주 늦은 후속 시리즈임을 밝힌다. 마이크로인터랙션은 제품에서

brunch.co.kr

동작규칙: 마이크로인터랙션이 어떻게 동작하는지를 결정하는 규칙

동작 규칙은 일종의 규칙이지만 규칙처럼 느껴지지않아야한다. 극히 자연스러운 나머지 필연적으로까지 느껴지게 만들어야한다.

동작규칙은 다음 사항들을 결정한다.

-트리거가 활성화될때 마이크로 인터랙션이 어떻게 반응할지

-마이크로 인터랙션이 진행되는 동안 사용자가 무엇을 직접 조작할 수 있을지

-일련의 동작을 위한 순서와 타이밍(예:사용자가 검색창에 뭔가 입력하면 -> '검색'버튼이 활성화됨

-위치, 날씨, 시간 등 특정정보에 의해 동작한다면 그 정보는 어디에서 받아오는지

-관련된 알고리즘의 구성과 변수

-어느 단계에서 피드백을 제공하며 어떻게 제공할지

-마이크로인터랙션이 반복되어야하는지, 한다면 얼마나 반복되는지

-마이크로 인터랙션이 종료될 때 어떠 일이 생기는지

<동작 규칙 설정하기>

-설정 전, 마이크로인터랙션의 목표를 단순명료하게 정의할것

목표: 일련의 과정 중 하나가 아닌 사용자가 원하는 최종적인 상태

예) '로그인'의 목표는 '로그인해서 앱에 들어가기'

-목표를 정했다면 규칙을 설계할 차례. 쉽게 떠올릴 수 잇는 일반적인 규칙부터 적은 후 구체화 시키는게 좋음(우선순위가 높은것부터)

https://brunch.co.kr/@watergru/15

디자인 과제를 앞둔 취준생들을 위해

‘해결 할 프로덕트 디자인’을 읽고 | 디자이너로서 취업하기 만만치 않다 다른 직무는 안 그렇겠냐만은, 디자이너의 취업 과정이 다른 이들보다 좀더 부담스러운 것은 사실이다. 포트폴리오

brunch.co.kr

https://brunch.co.kr/@watergru/12

UI 디자이너에서 프로덕트 디자이너로

그리고 에이전시에서 스타트업으로 이직한 썰 | 최근 이직을 위해 면접을 보다 보니, 매번 똑같이 듣는 질문이 있다. 왜 에이전시에서 스타트업으로, UI 디자이너에서 프로덕트 디자이너로 오게

brunch.co.kr

https://brunch.co.kr/@watergru/8

프로덕트 디자이너가 데이터 기반으로 일하는 법

데이터 드리븐 디자인은 대체 뭘까 | 몇 년 전부터 슬금슬금 올라오던 데이터에 대한 이야기는 이제 완전히 새로운 업무 역량 중 하나로 자리 잡았다. 데이터 리터러시나 데이터 드리븐 디자인(D

brunch.co.kr

https://brunch.co.kr/@watergru/14

UX 디자이너의 실전 커뮤니케이션 스킬

‘당당한 디자인 결정을 위한 9가지 방법’을 읽고 | 훌륭한 디자이너는 훌륭한 의사소통자다 디자이너로 일하는 시간이 길어질수록 커뮤니케이션 스킬이 디자인 스킬 못지 않게 중요하다는 것

brunch.co.kr

0923

moonddang — Sun, 24 Sep 2023 00:47:37 +0900

https://brunch.co.kr/@rlatjrwn9086/78

고객 문제 발견하기, UX 리서치

UX 리서치란 무엇인가? | 쿠폰북을 아시나요? 동네 상가, 가게의 쿠폰을 하나로 모아 놓았던 잡지 입니다. 올해 5명의 사람들과 함께 쿠폰북 서비스를 만들었습니다. 문제정의와 가설수립, 검증

brunch.co.kr

UX리서치를 하는 이유-고객문제, 니즈를 파악하고 여기서 얻은 고객 인사이트를 공유해 고객을 이해하는 시작점이다.

자연스럽게 리서치 방법 사용, 인사이트도출 등의 능력이 필요함

리서치는 근거있는 설계와 계획된 목표 아래 진행돼야한다.

이 서비스가 정말 사람들이 사용하는 서비스가 될것인가 알기 위함

https://news.coupang.com/archives/3455/

쿠팡 UX리서처가 말하는 리서치

어떤 문제든, 답은 고객에게 있어요.

news.coupang.com

쿠팡의 리서치의 대상은 쿠팡이라는 회사와 쿠팡서비스의 여러 기능들과 어떻게 상호작용하는지, 나아가 물건을 사는 쇼핑이라는 행위 전반, 고객의 일상까지도 리서치의 대상임

-고객의 구매행태에 대한 인사이트:선행리서치

-UX의 문제점과 그것들 간의 우선순위를 파악하는 리서치

https://brunch.co.kr/@dhlee702/30

좋은 사용자 경험의 4요소

UX 디자인 기본 | 사용자 경험(UX, User Experience)이란 사람(유저)이 디지털 제품을 사용하거나 사용 상황을 예상하면서 갖게 되는 모든 감정, 지각, 인지적 결과를 의미합니다. 연관 개념으로 HCI(Human

brunch.co.kr

좋은 사용자 경험의 4가지 요소

-유용성 : 사람이 하고자 하는 일(목표)을 실제로 달성하는데 도움이 돼야함.

-사용성 : 사용자가 제품이나 서비스를 사용하는 과정이 효율적이어야 한다. 그렇기 위해서는 무엇보다 사용자가 시스템의 목적을 명확히 이해하고 또 사용하기 쉽다고 느껴야한다.

-감성 : 디자인은 사용자가 생각하고 느끼는 점을 반영하고 그들과 긍정적인 유대감을 형성해야 한다.

여기서 감성이란 어떤 시스템을 보고 느끼는 미적, 정서, 또는 대상에 대한 개성을 모두 포함하는 개념

-공정성 : UX디자이너는 사용자의 배경, 성별, 인종이나 능력에 관계없이 모든 사람들에게 높은 품질의 경험이 전달될 수 있도록 해야한다.

https://brunch.co.kr/@dhlee702/20

서비스 분석 스터디_1

본격 분석 루틴 만들기 | 한 교육 프로그램에서 만난 분과 함께 스터디를 만들어 쭉 진행 중이다. 스터디의 틀을 만들기 위함이 목적이었던 첫 서비스, 배달의 민족 분석 루틴이 저번 주 끝났다.

brunch.co.kr

서비스 분석시 할 질문

1. 이 서비스는 어떤 문제를 해결하려고 했는가?(=해결하려는 문제에 대한 정의)

-그렇게 발견한 차별화 컨셉을 어떻게 제품으로 풀어 발전시켰는가?

=> 서비스가 왜 존재하는지에 대한 질문에서 시작

예) 배민

ㄴ초기목표:전단지를 온라인화해서 배달산업을 발전시키는 것

ㄴ자영업자가 소비자에게 전단지를 뿌리는 일방향 커뮤니케이션-> '리뷰' 사용, 평판이 중요한 쌍방향 커뮤니케이션으로

-차별화포인트: AI,AR,VR과 같은 신기술의 도입, 차별화된 UIUX, 공격적인 프로모션, 브랜딩

2. 정의한 문제에 대한 해결책(=그렇게 발견한 차별화 컨셉을 어떻게 제품으로 풀어 발전시켰는가?)

-유저플로우, IA 정책, UI설계를 고려한 스토리보드 등

해결책 조사 시 질문

ㄴ어떤 데이터를 어떻게 수집했는가? 이 데이터를 어떤 방식으로 사용자들에게 보여주고자 했는가?

ㄴ다른 서비스와 비슷한 경험(UI)과 다른 경험은 무엇인가?

ㄴ차별화된 경험은 구체적으로 어떤 점에서 그런가?

https://brunch.co.kr/@11design/8

생성형 AI 미드저니를 활용한 오픈마켓 프로모션 디자인

새로운 기술, 변화의 파도 자동화, 챗 GPT, AI, ... 이제 우리 일상에서 흔하게 들을 수 있는 말들입니다. 이를 바라보는 시각에는 긍정적, 부정적 아니면 그 둘 시각 가운데 어디 즈음일 텐데요.

brunch.co.kr

0908 오늘 본 아티클

moonddang — Sat, 9 Sep 2023 09:11:15 +0900

https://toss.tech/article/interaction

인터랙션, 꼭 넣어야 해요?

빠른 속도를 중요시하는 토스에서 어떻게 팀원들을 인터랙션에 공감하게 하고 슬릭한 제품을 만들어나갈 수 있었는지 소개할게요.

toss.tech

인터랙션은 왜 필요한가?

-심미적인 가치 뿐만 아니라 유저에게 더 명확한 피드백 전달 가능, 유저가 어떤 행동을 해야되는지 더 직관적으로 보여줄 수 있음, 화면안에 어떤 일이 일어나고 있는지 쉽게 전달 가능

-스타트업 용어

-사일로 : 스타트업 세계에서 사일로는 회사 내 팀이나 부서가 분리되어 있는 것을 의미한다. 사일로는 커뮤니케이션, 협업, 혁신을 방해할 수 있기 때문에 스타트업에서는 부정적인 현상으로 여겨진다.

사일로는 스타트업 내 각 팀이 자신의 업무가 회사 내 다른 팀에 미치는 영향을 고려하지 않고 각자의 목표와 목적에만 너무 집중할 때 발생한다.
출처 : 스타트업엔(StartupN)(https://www.startupn.kr)

인터랙션에서 터치 이펙트

인터랙션 디자이너가 되기 위해 필요한 역량과 프로그램

-동적인 디자인만이 낼 수 있는 임팩트를 고민하는 역량

정적인 UI로도 전달할 수 있는 가치라면 인턴랙션은 good to have 가 된다.

인터랙티브하게 표현했을 때 어떤 임팩트를 낼 수 있는지 설득할 수 있는 능력이 필요하다.

-인터랙션은 구현이 까다로운 만큼 내 디자인이 정확하게 구현될 수 있도록 개발가이드를 잘 만드는 것도 중요한 역량

인터랙션 디자이너의 시스템적 사고역량에 따라 개발가이드의 퀄리티가 달라지고 그만큼 개발자의 효율과 구현 퀄리티도 달라진다.

프로그램:protopie

https://brunch.co.kr/@rididesign/19

작가를 위한 리디만의 웰컴키트 -1-

리디의 애칭 ‘파란 집’에서 시작된 블루하우스 키트 | Summary 오직 작가를 위한 웰컴키트인 작가키트. 올해는 조금 특별한 2가지 컨셉의 작가키트를 제작해 보았어요. 그중에서 이번에 소개

brunch.co.kr

드디어,,,머테리얼 디자인 가이드 본다,,

https://m3.material.io/

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

https://yozm.wishket.com/magazine/detail/1022/

구글 머티리얼 디자인의 변화로 본 인사이트 | 요즘IT

구글의 머티리얼 디자인(Material Design)은 구글의 제품의 디자인 기본 원칙으로 고안되어 안드로이드 스마트폰에 적용하면서 널리 퍼진 개념입니다. 머티리얼이라는 말이 붙은 것처럼 물리적으

yozm.wishket.com

머터리얼 디자인은 안드로이드 최적화디자인 시스템으로 2014년 당시에는 대담하고 아름다우면서 일관적인 디자인에 초점을 맞췄다면 18년에는 조금 더 통합적이고 적응성을 높인 시스템으로 업데이트 되었다.

사용자 지정 색, 서체, 레이아웃 등을 지원해 이전보다 사용자 관여도를 높여갔다.

https://brunch.co.kr/@margrit74/119

좋아 보이는 UX Writing의 비결 3

3. 간결한 글 | 이전에 정리한 "좋아 보이는 UX Writing의 비결 1, 2" 시리즈가 글의 형식에 대해 정의했다고 하면 이번 글부터는 글의 내용에 대해 다뤄보려고 한다. 닐슨 노먼 그룹은 Concise, SCANNABL

brunch.co.kr

MZ세대를 위한 무신사의 맞춤형 사용자 경험 (feat. 무신사 스타일판)

무신사는 올해 4월에 자체 모바일 커뮤니티인 '패션톡' 서비스를 론칭했습니다. 커뮤니티 기능으로 스타일에 관심이 많은 사용자의 참여를 높이기 위한 전략이라고 하네요. 무신사 서비스는 요

chaeyeon-chaeyeon.tistory.com

우리는 사람들이 행동하길 원하는 방식으로가 아니라 사람들이 행동하는대로 디자인해야한다.

사람들은 사용하는 제품이 눈에 잘 보이고 부드러운 유도와 기능 강제가 이루어지며 선명한 그림 또는 문자와 적절한 피드백이 제공될수록 적합하게 행동한다.

올바른 행위를 자연스럽게 유발할 수 있도록 약간의 제약두기

기능을 강제함으로써 적절한 행동을 유도하면 직접 문제를 해결하거나 의사결정을 해야할 필요가 줄어든다.

훌륭한 디자인은 사용자로 하여금 자연스럽고 편안하게 올바른 선택을 하도록 해준다.

복잡함은 인생의 불변의 진리다. 때문에 여기에 대처할 방법을 익혀야한다.

인생의 복잡함을 잘 해결할 수 있도록 행동을 조율한다. 어떤 도구든 상관없다. 원형스티커,기능강제, 안내문 붙이기 등

세상에 공개된 지식을 활용해 복잡함을 조절하라.

https://chaeyeon-chaeyeon.tistory.com/84

실무에서는 2023년도 그래픽 디자인 트렌드를 얼마나 반영하고 있을까?

연초가 되면, 디자인 트렌드에 대한 많은 글들이 쏟아지고 여기저기서 다양한 의견을 내놓습니다. 저 또한 디자인 트렌드에 대해서는 매년 관련 자료를 읽고 동향을 파악하며 정리하고 있지만

chaeyeon-chaeyeon.tistory.com

0827 요즘에 드는 생각들

moonddang — Sun, 27 Aug 2023 09:31:11 +0900

내가 아직 어른이 덜 됐다는 생각이 많이 든다.

지난 2년동안 우울과 싸워이기면서 그래도 나름대로 어른이 됐다고 생각했는데

아직 말하고 행동하는 것 보면 멀었다.

팀원들에게 면접에 대해서 찡찡거리고 조언을 꼰대로 받아들이고 단점만 찾아내기 바쁘다.

그 당시는 내 감정에만 치우쳐 내가 얼마나 어리석고 어른스럽지 못한 행동을 했는지 몰랐는데

지금 와 생각해 보니 정말 부끄러운 짓이었다.

내가 조금 더 생각하고 감정을 추스를 시간을 가졌다면 내 대응이 조금은 달라졌을 텐데 맨날 생각으로는 알지만 기분은 안그러니까 행동으로 옮겨지지 않는다.

아직 어른이 되려면 멀었다.

어른이 되는 과정은 정말 고통이다. 고통을 겪어야만 어른이 되는 것 같다.

---

나의 공백기가 이렇게 큰 걸림돌이 될지 몰랐다.

후회된다.

후회되지만 후회만 한다고 해서 달라질 것도 없는거다.

후회할 시간에 다른 할일을 찾아보겠다고 권하겠다.

이 후회와 아쉬움을 어떻게든 일적으로 풀어낼 생각을 해야겠다.

0721 퍼블리싱 기초 수업

moonddang — Sun, 23 Jul 2023 21:07:09 +0900

디자이너가 퍼블리싱을 하는 이유?
-개발자의 언어로 이야기하고 싶을때
-포트폴리오 사이트 만들기 위해서
-디자인도 하고 개발도 하는 멀티인간이 되기 위해

1. 코딩공부할 때 참고하는 사이트

W3Schools : 온라인으로 웹 기술을 배우는 교육용 웹 사이트

기본적인 개발언어들에 대한 튜토리얼을 볼 수 있어 공부할 때 참고, 문법을 볼때 요 사이트 참고하면 됨

https://www.w3schools.com/

W3Schools Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

생활코딩 : 개발 공부를 시작할때 제일 많이 접하는 사이트

https://www.opentutorials.org/course/1

생활코딩

hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그

www.opentutorials.org

클라이언트 메뉴에서 들으면 됨

TPCSchool : 기본적인 이론을 공부하고 싶을 때 참고(동영상 강의보단 텍스트로 되어있음)

http://www.tcpschool.com/

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

2. html / css / javascript의 개념

html, css는 시간만 투자하면 다 할 수있다.

html: 웹문서를 만드는 기본언어 (구조)
css: 거기에 디자인을 입히는 것, 화면을 꾸미는 것, (표현)
javascript : 동적인 움직임을 만드는 것 (동작)_ JAVA랑 다르다

3. SPA / jQuary의 개념

SPA (Sinagle Page Aplication) : 단일 페이지로 구성된 웹 애플리케이션

React, Vue/Angular 가 있다.
위의 세개 언어(html, css, js)를 같이 전체 하나의 프레임워크로 묶어서 페이지를 맏드는 것 (조금 더 어렵다)
프론트 엔드에서 많이 쓰는 추세
컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념이다.
페이지 깜박임도 없고 컴포넌트를 이용해서 페이지를 더 원활하게 이동 할 수 있게 한다.
유저의 입력이 데이터 베이스에서 원활하게 처리될 수있게 스파가 생김
한국에서는 리액트가 점령함

jQuery : 자바을 조금더 쉽게 만드는 것

-> 기본적으로 자바에서 파생된 라이브러리

자바를 모르고서는 할 수 없다.

코딩을 위한 세팅을 해보자.

1. visual studio code 다운로드 하기

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

2. 플러그인 다운로드 하기 " Live server / color highlight "

3. File > open file > 파일 추가 아이콘을 눌러서 생성하기

** 파일명은 영문+숫자로만 가능 / 특수문자는 _ - 만 가능 (한글안됨)

**문서 확장자는 .html / .css / .js

-> 본인은 ' 01.html ' 이라고 적었음

기본형식을 가진것을 기본태그라고 한다.

---

글자를 크게 만든다 할때 그 요소에 여러속

0721 퍼블리싱 기초 수업 #3. css ,기초

moonddang — Sun, 23 Jul 2023 21:06:56 +0900

css 적용하는 방법 3가지

-내부 css / 외부css /인라인css
주로 할 방법은 외부css

외부와 내부는 파일로 나누어서 저장을 하냐 아니면 <head>사이에 저장을 하냐에 따라 나뉨

css쓰는 방법

: 선택자{속성:값 ; 속성:값 ; 속성:값;;,} (속성 여러개 적을 수 있음)

내부 스타일 시트

<head>

<style>

</head>

우리가 알아야할 속성

-문자관련 속성

-배경관련 속성

-마진, 패딩

-보더, 외곽선

-마우스 오버시 색바뀜, 이미지 커짐과 관련된 가상 선택자

-트랜스폼, 트랜지션 관련 속성

-레이아웃 속성(float, position, flex, grid)

<문자 관련 속성>

(두 단어가 연결될땐 대시로 연결함)

color:문자색
- hex코드: #ff0099(둘씩 반복될때는 #f09로 축약해서 써도됨)
- rgb : (255,255,255(흰색))~(000,000,000(검정))
- rgba : rgb + 마지막은 투명도를 나타냄 (0(0%)~1(100%)까지)
  - 예) (255,255,255,0.5(0안붙이고 '.5'로도 가능))-투명도 50%
font-size : 문자크기
- 스타일을 적용하지 않을때 폰트사이즈는 기본이 16px이다.
font-family :서체지정
- 브라우저마다 기본서체가 다르다. 사파리, 크롬의 기본 서체로 렌더링된다.
- 폰트를 지정할 수있는데 내 컴퓨터에 없는 서체로 지정하면 렌더링이 안되고 기본서체로 렌덩링된다.
- 그래서 대부분 구글폰트를 사용한다. 구글폰트는 서버에 있는 서체를 가지고와서 쓸 수 있어서 렌더링 가능
font-style : italic, normal
fint-weight : 서체두께
- bold
- 두께종류- 400,500,600,700,800 (폰트에 따라 있는게 다르다)
line-height : 행간
- 스타일 적용이 안된 폰트의 행간은 기본 1.2
- 픽셀로 넣거나(24px) 혹은 배수로 입력 (1.5)
letter-spacing : 글자사이 간격 (예) -1px
word-spacing : 단어사이 간격(거의 쓸일이 없음)
text-decoration: unerline(밑줄)

<style>

/* CDN(content delivery network) */

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

h1{

color:#27c2ff;

font-size: 20px;

font-weight:normal;

font-family: 'nanum gothic', sans-serif;

}

text-decoration:underline;

color:#666;

}

h2{font-family:"궁서"}

.list{color: aqua;}

#login{

color: #666;

font-size: 24px;

}

</style>

선택자{ 속성값 }

-선택자: 태그의 이름을 선택자로 준다.

**h1은 기본적으로 bold로 들어간다. 그게 싫다면 font-weight를 normal로 속성 바꿔주기

요소 검사에서 사용자 에이전트 스타일-h1에 디폴트로 있었던 값이 표시됨

text-decoration:underline;

color:#666;

}

**줄수가 길어지면 파일용량이 커져서 보통 붙여서 씀

https://fonts.google.com/

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

체계는 폰트마다 다르다

**보통 구글 폰트에서 가져오진 않고 직접 다운로드 한다

1) 내가쓸 폰트두께를 선택한다.

2) link와 import의 차이

-link :html로 불러오는 것, import: css안으로 불러들이는 것(스타일 태그 안에 함)

-둘중 아무거나 사용해도 무관

3) 복사하기>붙여넣기

<style>

/* CDN(content delivery network) */

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

h1{

얘를 불러올려면 이렇게 폰트 패밀리를 불러야한다는 규칙

카피해서 붙여넣기(혹은 직접 nanum gothic이라고 써도 됨)

font-family: 'nanum gothic', sans-serif;

이 서체가 없을 시 콤마 뒤에 산세리프로 렌더링 하기라는 명령

***CDN: contents delivery network

-만들어진 코드를 붙여넣기해서 연결해서 쓰는 것

---

<선택자 종류>

태그 선택자: 해당 태그의 이름을 쓰면 됨
class 선택자 : 중복되는 태그에서 특정요소만 / 여러 요소에 사용가능
- 클래스의 이름을 줄때는 영문이나 숫자, 영문+숫자로 주면됨, 숫자로는 시작못함
- 호출시: .클래스명
id : 딱 하나의 요소에만 사용가능
- 호출시 : #아이디명

<ol>

li에서 리스트1,2만 색깔을 주고싶다

.list{color: aqua;}

2) 로그인에만 색과 폰트 사이즈를 주고싶다

<dl>

</dl>

스타일 태그로 가서

#login{

color: #666;

font-size: 24px;

}

----

내가 작성한 태그가 문법에 맞는지 알고싶다면?

https://validator.w3.org/#validate_by_input

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

url이나 다이렉트로 코드 넣

error:문법상 틀린것, warning : 권고사항

----------------

이미지를 가져올 때는 삽입이라는 개념이 없고 경로에서 가지고 오는 개념밖에 없다.

이미지를 가져오는 방법
-절대 경로 : 서버에 있는 이미지를 가져오는 것 -URL적기, 경로를 설정하는 것
-상대 경로 : 내 컴터에 이미지가 있어서 불러오는 것(서버에 올려져있는게 아닌)

<img src="주소(경로)" alrt="이미지 설명문"> (img는 단독태그)
- alt:대체 텍스트(없으면 문법에 어긋남)

0721 퍼블리싱 기초 수업 #2. html 기초

moonddang — Sun, 23 Jul 2023 14:40:50 +0900

태그 : 웹문서에 표시하려고 하는 내용을 전달하는 언어

대부분의 태그는 여는 태그와 닫는 태그가 한 쌍으로 이루어져 있다. : <N>____ </N>
여는 태그만 있는 단독 태그도 있다. <N>
태그에는 property와 value 값을 넣을 수있다. (예를들어 폰트 태그 안에 컬러나 행간값을 줄 수있음) 그 요소에 여러 속성들을 부여해주는 것.

html 문서의 기본 구조

< ! doctype html > : 'html5 버전으로 작성된 문서' 라고 명령하는 태그
< html > ~</html> : 웹문서의 시작과 끝. 그 안에서는 크게 <head> 태그와 <body> 태그로 나뉜다.
- <head>~</head> : 문서의 정보를 정의하는 부분, 웹문서에서 사용하는 언어나 문서 제목, 키워드, 제작자 등 여러가지 문서와 관련된 정보(메타데이터)들을 나열하는 부분 / 웹브라우저가 알아야할 문서 정보를 지정한다. (메타데이터: 데이터를 설명하는 데이터)
- <body>~</bady> : 실제 웹브라우저 화면에 표시할 내용들이 들어감

< html lang="ko" > : 문서에서 사용할 언어를 지정하는 것 (en: 영어) / 언어를 지정하지 않으면 언어를 제한해서 검색할때 검색이 되지 않을 것,
- ' 이 문서는 한국어에요. ' 라고 웹브라우저에 알려주는 것. 만약 이 문서를 영문 브라우저에서 열면 '번역하시겠습니까?' 가 뜬다.

<head> 태그에 들어갈 내용

<title> 태그 : 문서제목을 입력하는 것. 웹브라우저의 제목표시줄에 표시됨

요렇게 나옴. 옆의 아이콘은 파비콘이라고 함

- 파비콘은 이미지 파일이 아닌 아이콘 파일이다. ISO파일로 만들어야함. 파비콘사이트에 가서 만들면 쉽게 만들 수 있음

<meta> 태그 : 기본적인 정보들은 메타라는 태그에 넣어준다. 메타태그안에는 여러가지 속성들을 지정할 수있다.
- <meta keyword> : 검색엔진에 검색할 때 키워드로 검색하면 나올때 그 키워드를 집어넣을 수있음(필수는 없음)
- <meta charset> : 필수로 넣어야 할것. 이 문서에서 사용하는 문자 set이 뭔지,
  - UTF-8: 다국어 버전, 모든 문자가 지원이 된다.
  - EUC-kr :한국어만 지원하는 버전이라 다른 문자들이 깨지게 된다.

단축키 VScode에서만 되는 단축키

emet : 플러그인의 한 종류 (vs code에는 기본적으로 깔려있음) 모든 에디터에 다 설치할 수 있다.

젠코딩: 빠르게 코딩하는 것, 빠르게 코딩하기 위해 단축키를 사용하는 것들

젠코딩을 가능하게 하는 것이 emet ,

vs코드가 가장 효율적으로 사용가능

vs코드에서는 emet이 설치되어있기 떄문에 설치하지않아도 되지만 다른 에디터에서는 설치해야함

emet의 단추키- html:5

meta name="viewport" content="width=device-width, initial-scale=1.0"

content="width=device-width, : 각각의 디바이스의 너비값으로 렌더링하라.

initial-scale=1.0" : 초기값을 대응을 1로하라, 100%로 렌더링하라는 것

-반응형으로 만들때 이 코드가 꼭 필요. 이 코드가 없으면 반응형으로 동작을 안한다.

GO LIVE 클릭하면 페이지가 열림

<hn> 태그 :제목을 만드는 태그

-1~6까지 있다.

<body>

제목태그는 css에서 만들지 않아도 기본 스타일로 적용돼있음

1~6 까지의 의미는 크기가 아니라 시멘틱 태그 : 의미론적인 태그, 논리적인 태그 , 제목의 크기보다는 중요도

태그에는 물리적 태그와 논리적인 태그가 있다.

1~6 : 가장 중요한 제목~중요도가 가장 낮은 제목(계층 서열)

예) 네이버 로고 =h1

<P> : 문단태그

더미 텍스트 넣을 때 lorem 20 엔터 20단어가 나옴

글 자동 줄바꿈하려면 alt+z

<p>

<b>Lorem ipsum dolor</b>, sit amet consectetur <strong>adipisicing elit.</strong> Mollitia, amet facilis.

<br>Consequatur dolorum <i>isit obcaecati debitis</i>, exercitationem <em>necessitatibus</em> quod dolore     !   ©

</p>

브라우저에서 문단의 사이즈를 하려면 css

강제로 줄바꿈을 하고 싶을 때 <br> (실제로는 거의 안씀) (단독태그)

html은 스페이스를 한칸밖에 인식하지 못한다.

띄어쓰기를 강제로 하고싶을때는 마진패딩으로 띄우면 됨

아니면 마진패딩으로 말고 띄우고싶을땐 특수문자를 쓰면 됨. html의 특수문자는 항상 &으로 시작해서 ;으로 끝나게 돼있음

  -공백 특수문자

문자를 변형하는 태그

<b> : 굵게 -물리적태그(디자인상 굵게보이고 싶을때 )
<strong>:굵게-논리적태그, (그냥 모양을 굵게한게 아니라 강조의 의미를 가짐.)
<i> : 이탤릭-물리적(그냥 이탤리체로 하고싶다) 아무 의미없이 할 때
<em> : 이탤릭-논리적,시멘틱 태그

뭐가 다르지? -음성브라우저에서 읽어주면 톤이 다르다.

화면상에차이는 없지만 의미적으로 다른다.

---

웹페이지에서 보여지는 대부분은 목록이다. 페이지의80프로 가장 많이 쓰는 태그

목록을 만드는 태그 , 카드, 리스트, 메뉴

<dl>

</dl>

정의가 있는 목록 <dl></dl>
- 정의의 내용, 타이들이 있어야함 : <dl>의 하위태그- <dt>타이틀</dt> / <dd>디스크립션(dt에 대한 설명)</dd>
- 탭에 많이 쓴다. 웹접근성 인증을 받을 때

<ul>

</ul>

순서가 없는 목록 <ul></ul> :전체적인 목록의 형태를 지정함
순서가 있는 목록 <ol></ol>
- <li></li> : 그 안에 리스트를 만드는 태그

** emet 단축키 : ul아래에 li를 3개 만들겠다. ul>li*3

<ul>

</ul>

**<ol>리스트인데 순서를 1,2,3,4 주고 싶다면? : ol>li*4{------(컨텐츠 이름) $} _ 자동으로 번호부여

<ol>

</ol>

화면에 출력되지않고 코드에서만 볼 수 있게 하는 법

<주석처리방법> : 단축키- ctrl+/

-html : 
-scc : /*내용/
-js : /*내용*/ -여러줄주석 or //-한줄주석

<div></div> : 영역(그룹핑)을 만드는 태그, 물리적 태그라 의미는 없음(화면상에 표시되는건 없음. 영역으로 지정하는 것일뿐)

예) 제목과 문단을 그룹핑 하고싶을 때

카드UI에서 div로 묶고 그 안에 ul과 li로 묶어있

의미로 묶은 태그, 시멘틱 태그 : 공간을 나눌 때 헤더, 푸터, 네비, 메인영역 등으로 시멘틱 태그로 만들어놓음
<header></header>
<footer></footer>
<nav></nav>
<main></mail>
<aside></aside> : 광고영역
<section></section> : 섹션으로
<article></article> : 하나의 기사로 묶음, 블로그 글이나

시멘틱 태그는 써도 되고 안써도 됨(쓰면 검색할때 노출이 더 잘되긴 한다.)

그러나 편의상 div로 나누는 경우도 많음

0619 UX Writing

moonddang — Mon, 19 Jun 2023 10:43:15 +0900

UX Writing의 개념과 역할

UX Writing은 왜 중요한가?-우리 앱이 특정 고객과의 친밀도를 생성하는 것이 중요해짐

그 중요한 부분을 커버해줄 수 있는 게 라이팅부분이다.

친밀도 형성, 충성도를 많은 유저들을 만들기 위함이다.

1. UI안에서 사용자의 행동에 직접 관련된 단어 또는 문구

-결제, 구매, 장바구니,

예시) '배민 주문하기 버튼'-몇개의 품목을 얼마에 주문할건지 보여줌-사용자가 상황을 정확하게 인지하게 함

2. 사용자의 행동에 동기 부여

-커머스 앱에서 '지금 구매하면 30프로 할인혜택이 적용됩니다.'

-사용자가 행동을, 결단을 빠르게 내리도록 하는 것

예시) 29CM 상세페이지-현재 내가 구매가능한 가격, 쿠폰할인은 보통 결제창에서 알 수 있는데, 어떤 쿠폰을 갖고 있고 그 쿠폰이 적용된 가격이 나온것 / 드롭다운 버튼-각종 카드할인까지 나옴

=> 가격이 훨씬 싸지네 하고 구매까지 이어지게 함

3. 사용자 행동에 동반되는 지침

-사용자가 구매행위를 할때 어떤 유의사항이 있는지

-구매할 때 취소를 할지, 더 구경할지, 구매를 할지 / '계속 구경할래요' ,'취소하고 나갈래요./

예시1) 지금 구매하시겠습니까? 지금 구매하면 30프로 할인혜택이 ~

구매할래요/ 더 구경할래요. (만약 이거 대신 '취소, 확인' 버튼이 나왔다면 사용자는 헷갈릴 수 있다.)

요즘 단어들은 확인, 취소보다 구어체로 되어있는 것들이 많다.-> 사용자 인지가 더 높아지기 때문

예시2) 알림을 켤까요?

예씨3) 에어비앤비 앱 알림 : '체크인 세부사항, 계정활동정보 등 메시지를 놓치지마세요. 여행특가정보, 맞춤추천 등을 받아보세요. '

-알람을 켜는 활동이 어떤 효과를 줄 것인지 보여줌

사용자 버튼 : 예, 알림을 보내주세요, / 아니요

※ 토글버튼은 한가지 명제에 대한 true/false ,하나의 yes,no로 쓴다.

라이트, 다크모드일 때는 토글버튼을 안 쓴다.

한가지 값을 줄 건지 안줄 건지에 대해 쓴다.

4. 사용자 행동 이후의 피드백

예시) '결제가 완료되었습니다. 2~3일 후에 상품이 배송될 예정입니다.'

예시2) '몇 일 이내에 받아볼 수 있습니다.'

예시3) 배달의 민족 : '배달현황'에서 '출발했어요~' , '주문이 완료됐습니다.'

UX Writing이 중요한 이유

-직무에 Writer가 따로 있지만 앱을 만드는 과정에서는 모든 사람들이 UX Writing에 동참해야 한다.

컨셉이나 방향을 설정하는데는 Writer가 필요하고 세부적인 것들은 다같이 해야 한다.

1. 긍정적인 경험을 만들어서 사용자를 사로잡는다.

친절함, 차별감, 친밀감이 높아지면 서비스를 계속 쓰고 싶은 마음이 든다. 리텐션, 재방문율을 높일 수 있다.

다른 앱하고 차별된 것에는 기능적인 것이 있지만 언어적, 친밀감, 친절함을 줘서 재방문율을 증가시킬 수 있다.

2. 사용성을 향상시킨다.

사용성이 높은 서비스는 핵심 행동을 빠르게 갈 수 있게 한다.

빨리 구매까지 도달하게 하는 것은 사용자에게도 좋지만 서비스제공자는 구매율을 높일 수 있기 때문에 좋다.

혼란을 덜어주기 때문에 핵심 행동까지 빠르게 갈 수 있다.

예시) 입력을 취소하시겠습니까? 입력을 취소할 경우 입력된 내용은 저장되지 않습니다.

-> 취소할지, 다음 단계를 갈지 결정할 수 있다.

이런 것들을 사용자에게 제대로 전달해줘야한다.

3. 브랜딩과 차별화를 강화한다.

유저 타겟팅을 할때 산업에 따라 달라질 수 있다. 나이, 성별, 산업관련해서 유저를 타게팅한다.

2~30대 패ㅕㄴ을 좋아하는 ㄴ여성들을 위한 커머스를 만든다.

-> 이사람들이 좋아하는 말투,문구 이런것들을 캐치하기위해서 참고할것은? SNS

패션을 좋아하는 여성들은 인플루언서들을 많이 보니까 그들이 사용하는 언어들을 참고, 친근하게 다가가는 그들의 언어들

어떤 브랜드인지, 어떤 차별성을 가지고있는지를 생각해서 어떤 라이팅으로 할지 작업하면 조금더 효과적으로 다가갈 수 있다.

과거에는 UX 라이팅이 간결하게 의도를 정확하게 전달하는 경향이 있었다.

행동만 단어로 매핑하는 경우가많아다. 결제, 취소, 확인,

옛날에는 행동에 대한 단어형으로 갔다.

현재는 유저가 혼란하게 하지안는것이 풀어서 설명할부분은 풀어서 설명하는게 추세다.

유저들에게 도움될 부분은 사용성에 방해되지 않는 선에서 안내하는 추세다.

유머도 섞고, 긍정적인 경험을 주니도 하니까, 현재에는 무조건 간결하고 심플하게 하지않고 유저들이 혼란스럽지않게, 알아볼 수 있게 하는것이 추세다.

무조건 풀어서 설명하는 것은 아니고 필요한 부분만 풀어서 설명한다.

UX Writing의 핵심원칙

1. 사용자의 입장에서 작성한다.

문장을 읽는 주체가 누구인지 확실히 확인하고 문장이 무엇에 대해서 이야기하고 있는 지가 확실해야한다.

예시) 은행앱에서 '누구에게 보낼까요?' 막연히 송금하기가 아니라 누구에게 어디로 보내실까요?

-정확히 받는사람대신 지금 화면을 보고잇는, 보내는 사람을 주체로 말하는 것

송금하기에 집중할 수 있도록

2. 고객을 기분좋게하기

적절한 유머를 사용해서 기분좋은 경험을 준다. 또한 더 행동할 수 있도록 만들어 준다.

기분좋은 경험은 재방문, 다시 사용하고 싶어지는데 영향을 줄 수 잇다.

예시) 배달의 민족

3. 행동의 결과로 얻게 되는 것을 분명하게 하기

이 결과로 얻게되는 혜택을 확실하게 유도해주는 것

유저들이 막연함이 없어진다.

예시) 29cm리뷰쓰는 칸 : 몇일까지 쓸 수 잇고 얼마나 마일리지 적립되는지 명시되어있음

예시2) 패션커머스에서 채형정보를 입력하는 창: 채형정보를 입력하면 내 채형에 맞는 리뷰를 볼 수 있어요 .

첫 리뷰 작성시 얼마를 줍니다.

4. 사회적 증거를 함께 보여주기

이 물건을 산 다른사람도 이만큼 좋아했어요.

-유저의 결정에 도움을 준다. 나와 비슷한 고민을 한 사람들의 판단-> 이걸 통해 불확실성을 줄일 수있다.

리뷰를 작성한 사람중에 몇퍼센트가 만족했습니다.->수치로 안내하면 결정에 도움을 준다.

예시) 애옹이들이 98프로 만족한 상품이에요.

UX Writing의 주요 컴포넌트

1. placeholder 라이팅

-사용자의 오류를 막는데 중요한 역할을 한다.

-단어, 팁

-무엇을 입력해야될지 명확하게 안내해줘야한다.

예시) 전화번호 대시가 들어가는지 아닌지 헷갈릴때/ 생년월일 쓸때/이메일 형식 예시

-가이드, 예시가 된다.

-입력예시를 보여주면 훨씬 인지가 더 잘됨

2. Search 라이팅

어떤 서치인지 알려주는 것이 중요하다.

서치 플레이스 홀더

예시) 에어비앤비 서치창 '여행지를 알려주세요. ' 타이틀과 함께 플레이스홀더에 써야할 것을 보여준다.

예시2) 택시앱 '도착지, 출발지-> '어디로 갈까요?'

예시3) 후기 20자 이상 남겨주심ㄴ 다른 구매자드에게 도움이 됩니다.(글자수 명시_벡엔드에서 최소 받아야하는 값이 있기 때문에 도달하도록 유도) -> 이걸 남겨야겟따 / 이걸 남김으로 내가 어떻게 도움이 될지알려줘서 동기부여가된다.

예시4) 이 장소에 대한 경험과 추억을 남겨주세요. -> 글쓰기보다 감성적으로 심리를 자극함

후기는 유저의 노력이 굉장히 많이 요함, 동기부여가 충분해야한다. 그렇지않으면 대부분의 사용자들은 안쓴다.

예씨5) 20대가 사용하는 게시판에 쓸 플레이스 홀더는? -'나누고 싶은 생각을 적어주세요.'

OTT후기 남기기-작품에 대한 생각을 자유롭게 적어주세요.

서비스 성격에 맞게 어떤 생각을 작성, 공유할 수 있는지 적기

단순한 멘트보다 그런것들이 사용자에게 다가갈 수 있다.

동기부여도 주고 에러도 적게 나게한다.

3. CTA버튼 라이팅

서비스 안에서 주 목표를 달성하기 위해서 유저에게 행동을 유도하는 버튼

서비스가 원하는 목표로 유저의 행동을 바르게 유도하는 것 -구매하기, 찾아보기,

-서비스를 쉽고 명확하게 이해할 수 있도록

-또한 유저들이 다음 행동에 대해서 쉽게 예측할 수 있는 가이드

증권사이트를 처음 방문한 유저에게 매수, 매도버튼을 어떻게 고치면 좋을까?
-> 판매하기, 구매하기

ott에서 원하는 프로그램을 찾고 본다고 할때 플레이버튼에 어떤 네이밍을 하면 될까?

재생하기, 시청하기, 보다 -> 지금보기 / 감상하기

(배민화면)구매하기보다 가격을 명시하고 얼마 담기

내가 어떤 음식을 얼마에 담을 수있는지

가격과 수량을 같이 쓰면 얼마에 구매할 수 있느지 알숭ㅆ다.

정확하게 사용자들에게 인지시킬 수 있다.

(시리즈온 화면) 그냥 '구매하기'보다 '세트 상품 구매하기'

바로 구매하기-> 명확하게 다음 담계를 쉽게 예측할 수 있는 가이드, 장바구니 담기-

※ 한 화면에 너무 많은 CTA버튼은 안된다. 남발하면 안된다.

한화면에 하나의 핵심행동은 명확한 플로우로 연결시킨다.

대부분 한페이지당 하나다.

핵심행동을 헷갈릴 수 있고 핵심행동으로 가는 플로우가 꺠딜 수있어서 혼란을 줄 수있다.

(네이버 쇼핑) CTA버튼은 구매하기 하나

4. Confirm

확인, 취소 이런 안내에 관한 것

정말 이 행동을 하기 전에 한번 더 생각할 기회를 주는 것

예시) 작성한 내용을 공유할래요? -나만보기/공유하기

예시2) 선택하신 메뉴를 삭제하시겠습니까? - 취소/삭제

입력을 그만두실건가요?-그만 입력할세요/이어서 입력할게요

확인은 사용자의 행동이 영향이 클 경우에 확실히 결정할 수 있게 확인을 시켜줘야 한다.

취소는 사용자가 잘못눌렀을 경우를 대비해서 확인시키기

예시) 송금할때 확인이 필요

취소는 잘못눌렀을때 유저가 그동안 쌓아올린 행위가 취소됐을때 저장하지않고 어떤 일이 발생하는지 한번 확인시켜줘야한다.

송금->확인->'비밀번호' 꼭 넣어야함

택시 부를 때 호출 옵션 선택후 한번더 이 옵션을 선택할건지

금전적인 손실이나 큰 심리적 타격이 있을때 필요하다.

다운로드를 시작학 전에 한번 더 확인시키고 시작

이메일보낼때도 글을 쓰고 취소하는 과정에서 삭제와 임시저장이 있다 블로그에 글을 쓰고 그냥 나갈때 닫기를 누르면 임시저장할건지 삭제할건지 물어봄

글쓰기를 포기하거나 안할 것이기 때문에 컨펌이 들어가면 임시저장기능을 설정해주면 훨씬 좋다.

이런과정에서 임시저장하기, 취소하기 버튼만들기

리뷰도 화면나가기전에 저장하지않고 나갈건지 마무리하고 나갈건지 물어보기

컨펌도 너무 남발되면 사용성이 안좋아진다.

정말 화면에서 필요한부분에만

뎁스가 내려가면서 계속 그러면 헷갈리게되고 이탈된다.

컨펌이 물어보는 뎁스 한뎁스에서 끝나야하낟.

5. Error

어떤 부분에서 원활한 진행이 되지않는지 명확하게 알려줘야 한다.
필수조건을 충족할 수 있게 사용자에게 피드백을 준다.
플랫폼에서 정한 조건에 맞게 업로드 하거나 글을 입력할 수 있게 한다. 그거에 대한 피드백을 주는 것
필수입력값을 정하는 이유?- 입력받은 값들을 카테고라이징하고 사용자에게 보여주기 위함

예시1) 회원가입 양식에서 어떤 부분에서 오류가 나는지 명확하게 알려줌 (6자 이상 16자 이하의 영문 ~)

예시2) 당근마켓에서 중고상품 등록할 때 카테고리를 먼저 선택할 수 있게 한다.

예시3) 리뷰 작성시 몇 글자 이상

예시4) 송금시 잔액부족일 때

대표적으로 오류메시지를 보여줘야할 때는?-가입시, 로그인시, 상품등록시, 포스팅할때, 리뷰작성할때, 송금할때,
-왜 다음단계로 진행되지않는 것에 대한 안내와 쉽게 행동할 수 있는 것에 대한 피드백

6. Blank(빈페이지)

카트(장바구니)가 비워있을 때 라이팅, 주문기록이 비워있을 때 라이팅할 때

-> 여기에는 바로 행동할 수 있는 버튼(CTA)이 있어야 한다.

비어있다는 상황을 설명해주고 바로 행동할 수있는 버튼을 준다. 장바구니가 비어있습니다. '쿠팡이츠 맛집 구경하기'

바로 작성하러, 행동을 유도할 수있는 버튼이나 문구가 있어야 한다.

빈페이지에서는 사용자들이 행동할수있는 동기부여, 앞으로 어떤 정보가 쌓이는지에대한 가이딩을 제시해야한다.

주문에 내역이 없습니다. 가 끝이다-> 내가 어떤해동을 해야 여기에 무엇이 쌓이는지 인지가 부족해진다.

여기 앞으로 뭐가 쌓일지 명확하게 해주면 사용자가 내가 어떤 행동을 하면 여기에 쌓이는구나 알수가있다.

예시) 주문내역이 없어서 빈페이지가있다. - 어떤 라이팅? '주문내역이 없습니다.'

+'주문하러 갈까요?' / '마음에 드는 상품을 구매해보세요', '보러가세요', '베스트 상품 보러가기'

예약페이지면 그 서비스의 특성을 살린 라이팅이 좋다.

예시) 세탁특공대 : 예약페이지- '지금 바로 예약해보세요.' '세탁맡겨보기' '세탁없는 저녁' '저녁이 없는 삶' '오늘 저녁 예약하면 바로 수거합니다'

빈페이지에서 가장 중요한 것은 해당 서비스에서 내가 할 행동들에 대해서 알려주면 행동유도의 역할이 큰 큰 공간이다.

이것을 하면 왜 좋은지, 명확하게 보여주는 것이 중요하다.

빈페이지에 어떤 라이팅이 있는 지에 따라 어떤 행동으로 연결될 지가 크다.

메뉴명, 카테고리명도 중요하지만 서비스의 전체적인 무드를 결정하는것은 요런 부분들ㅇ라 여기에 신경을 많이 써야함

메뉴나 카테고리 명을 만들때는 사용자가 쉽게 인지할 수있는 이름이어야함

우리들만의 특별한 단어롯 사용자를 묶어주고싶을때는 사용자가 인지할수있는 특별한 단어를 써야함

-> 이럴땐 익숙한 단어와 새로운(익숙하지않는) 단어의 조합이 좋음

우리가 일상에서 가장 많이 보고 재밌게 느끼는 단어가 무엇이 있을까?

예시) 당근마켓-매너온도

당근온도라고 하면 뭘말하는지 모를 것이다. '매너'라는 단어를 붙여서 무엇인지 알 수 있게 함

익숙한 단어'매너'+온도

예시2) 기특템 -특가제품-> '템'단어는 물건임을 바로 알 수 있음

'기특함'-나에게 이득이 되는것임을 알 수 있음 + 템

새롭게 다가가지만 인지가 될 수 있는 단어를 사용하기

UX Writing 을 잘하기 위한

타겟 상황분석

타겟의 상황을 구체화하기
타겟이 주로 모여있는 곳에서 관심분야, 쓰는 문장 리서치
- 정보를 얻는 채널, 말투, 특징을 리서치해서 알아내면 된다.

우리 서비스를 사용하는 타겟을 잘 알아야 한다. 타겟팅을 잘 하는 것이 중요

2~30대 패션을 좋아하는 여성 커머스 앱일 때

-> 패션을 좋아하는 여자들의 특징-유행에 민감하다, 소비 금액은 저렴, 소비성향-다양한 종류의 구매를 시도하는

그럼 사람들이 정보를 얻는 채널-SNS

선호하는 말투-친절하고 구체적인 말투

특징- 상품을 판매하는 사람이 아니라 내가 좋은 물건을 써서 너도 써봤으면 좋겠다는 듯한 뉘앙스

4~50대 여행을 좋아하는 사람들의 여행 예약서비스

검색성향에 관한 리서치 / 어떤 내용을 검색하는지 / 예약금액은 어느정도인지/ 예약성향은?-복잡하기보다 단순한 과정을 선호한다.

** 가정을 하고 그것에 맞춰서 조사해야 한다.

사용자 행동유도

서비스의 핵심 액션
서비스 생존에 필요한 핵심지표
구매엥 영향을 주는 행동 ,페이지 정확히 인지하기

서비스의 핵심 액션이 무엇인지, 서비스의 성패에 필요한 핵심 지표 =북극성 지표

: 고객이 우리 서비스에서 얻게되는 핵심가치를 정확히 측정하는 지표

-우리 서비스의 방향과 해야될 일을 알게해준다.

예시) 페북의 북극성 지표 -한 사람이 일주일 안에 몇 명의 유저를 유입시킬수있나

커머스는 구매라는 행위가 가장 중요

구매의 영향을 주는 가장 중요한 페이지는? -1) 상세페이지 - 2) 리뷰 -3) 결제과정

가장 신경써야하는 라이팅은 해당되는 페이지

사용자의 행동을 유도하는 페이지가 무엇인지 파악 -> 그 페이지의 라이팅에 신경써주기

예시1) 주식투자 서비스 : 매수,매도행위가 가장 중요함

-1) 매수, 매도에 관련된 페이지

-2) 주식 토론방

-3) 주가 변동 페이지

우리가 서비스하는 서비스의 가장 중요한 핵심행동을 파악

-그 행동에 연결된 페이지들이 무엇인지 체킹

-그 페이지의 라이팅에 주력한다.

여행서비스-여행을 예약하는 것

-1) 예약/결제

-2) 여행검색

-3) 후기

사용자의 행동을 유도할 수있는 페이지들이 무엇인지 파악하고 라이팅을 하는 것이 중요하다.

사용자 반응 분석

UT진행 - 그룹A, 그룹B

A,B테스크가 힘든 이유 : a페이지, b페이지를 따로 개발해서 세팅하기 -> 그렇게 되면 개발적인 수고가 든다.

단기간에 뭔가 테스팅해서 결과를 확인해야할 때는, 인력이 부족할때 힘들 수있음(시간, 인력제약이 있을 수 있음)

이런 테스팅이 힘든 상황에서는 라이팅을 개선한다음, 개선전후로 다음 페이지로 진입하는 정도, 시간, 이탈률을 분석할 수있음

개선전후로 비교할수있겠음

서비스가 없는 상태에는 개선 전후가 없으니 A,B페이지를 만들고

그런게 없을때는 일단 런칭하고 로그데이터를 분석해서 개선하고 전후의 관계를 확인하기

UX라이팅을 작성할때 우리가 알아야할것

핵심 타겟 명확히 알기
필수적인 문장과 부가적인 문장 구분하기
모호한 표현은 안됨, 긍정적인 표현 사용하기
행동유도할 부분은 확실하게 라이팅하기

책추천

-마이크로카피

<서치에 관련된 라이팅>

구체적인 검색방법을 알려줌

11번가보다는 쿠팡이 나음

11번가는 나쁜진 않지만 애매함

알아서 수정해서 보여주고 연관 검색어로 잘못 입력했음을 인지하게 함

잘못된 값을 수정하도록 유도하는 부분이 잘 안보임

초성을 검색했을 때 어떤 것을 보여줄지 정하는 것도 라이팅이다.