코로나 관련 UX 인사이트 모음

코로나 질병 관리와 정보의 공유, 사람들의 소비 행태의 변화, 기업들의 위기와 변화 시도 등을 UX 관점에서 생각해볼 수 있는 기사와 자료들

 

1. 코로나19 이후 웹사이트 메인 페이지의 변화 

https://slowalk.tistory.com/2629?fbclid=IwAR0TFWc5Sd1l5HP-BpucBjXOA6JlrRbdeWDeLLI00TLcU8zBlrIl4ZQ-5hg

 업계가 메인페이지 콘텐츠로 위기에 대처하는 방법들을 소개

  • 공공기관 : 실시간 코로나19 현황 데이터 노출
  • 문화시설 : 온라인 전시  공연 콘텐츠 제공
  • 여행업계 : 소통방식 변화와 예약 변경 안내사항 노출
  • 교육기관 : E-Learning 수강 시스템 바로가기

2. UX 코로나와 싸우는 방법

https://brunch.co.kr/@supernova9/187

코로나 고위험군 집단을 효율적으로 관리하고, 시민들이 코로나 관련 정보를 숙지하고 대처하도록 돕는 UX 사례들을 소개합니다.

사례

  • 보건복지부 입국관리앱
  • 질병관리본부 - COVID-19
  • 카카오톡 - 19 
  • 스타트업 : 케어랩스 (굿닥)

발전 방향 제안

  • 정부가 데이터 수집/개방
  • 민간이 잘하는 것은 민간에서
  • 정보를 개인 맞춤형으로 제공

3. 앱 데이터로  요즘 우리의 라이프 스타일과 업계의 변화

유료 자료라서 삭제

4. 코로나19 시대의 글로벌 유저 리서치 (번역)

경험 디자인을 위해서는 유저를 직접 만나고, 현장을 탐색하고 관찰하는 것이 굉장히 중요하죠. 코로나 시대에 어떻게 대처해야할지 고민과 제안을 담은 

https://story.pxd.co.kr/1511

  • UX 리서치의 연기, 생략, 조사방법이나 내용의 조정
  • 사용자 모집의 유연한 관리
  • 참가자의 안전 보장
  • 원격 그룹 인터뷰
스터디/Prototyping 2019. 4. 18. 14:38

[프로토파이] 학생할인제도 문의내용

프로토파이를 강의에 활용하려면?


프로토파이 깔면 7일 트라이얼
회원 가입하면 추가 10일 트라이얼
학생/교사 인증하면 50프로 할인
교사가 신청해서 클래스에서 다같이 써보는거 120일동안 무료 (Class Support Program)


Q.

프로토파이를 수업용으로 사용하기 위해서 문의를 드린 적이 있는데 120일간 “한번만” 트라이얼을 사용한다고 안내를 받았습니다

Class Support Program
프로토파이의 Class Support Program 교육은 교사와 학생들이 프로토파이핑을 배우기 위한 전용 프로그램입니다. 프로토파이는 강의를 위해 120일동안 교사와 학생들을 위한 무료 트라이얼을 한 번 제공합니다.


이것은 제가 이 학교에서 한번만 트라이얼을 120일간 학생들과 이용해볼수있고, 다음 학기에 다른 새 수업에서는 해볼수 없다는 뜻인지.. 혹은 제가 한번만 해볼수있는데 이 학교의 다른 교수님이 신청하셔서 다른 수업에서도 또 120일간 수업에서 써보실수 있는 것인지 상세한 정책이 궁금합니다
학생수는 수업 규모에 따라 다른데 20-40명 입니다

A.

이해하신대로 120일 동안 '한번만' 이용하실 수 있는 프로그램입니다. 수업이 다른 경우에는 해당 교수님께서 신청해 주시면 가능하도록 도움을 드리겠습니다. 프로토파이는 7일간 트라이얼을 사용하실 수 있으며, 회원가입을 하게되면 추가로 10일을 더 사용하실 수 있습니다. 그 이후에는 학생할인 50% 를 적용받으실 수 있겠습니다.

 

https://www.protopie.io/

'스터디 > Prototyping' 카테고리의 다른 글

[Framer] 스터디 시작  (0) 2018.07.27
스터디/WEB 2019. 2. 9. 23:47

[생활코딩] WEB2 - CSS (1)

https://opentutorials.org/course/3086/18311


폰트의 스타일을 바꾸는 쉽지만 재앙인 방법
->폰트 태그 추가


아톰에디터에서 커맨드 누르고 다중선택해서 동일한 코드 입력
입력한 다음 
쉬프트 +  > 누르면 다같이 한칸씩 선택
옵션 +  > 다음 단어로 커서 넘어감
커맨드 + > 줄 끝으로 커서 넘어감 
커맨드 + D 선택한 블록이랑 동일한 부분 찾아서 선택함

CSS로 스타일에 대한 정의, 유지, 보수

1)CSS 사용 방법 1
CSS는 HTML과는 완전히 다른 언어이기 때문에 
<style>
   이 안에 내용은 CSS 문법에 맞게 처리하도록 하렴 
</style>


여기서의 style 태그는 효과만 있어서는 이 효과를 누구에게 지정할지를 설명할 수가 없기 때문에 a { } 라는 누구에게 줄 것인가를 선택한다는 의미에서 “선택자” “Selector” 라고 부른다
선택자에게 지정될 효과가 color:red;   “선언" “Declaration” 이라고 한다

2)CSS 사용 방법 2


HTML에 style이라는 속성의 값을 
웹브라우저는 CSS라는 문법에 따라 해석해서 그 결과를 스타일 속성이 위치하는 태그에게 적용하게 된다
이 style = “   “ 부분은 HTML의 속성이다
이 선언은 스타일 태그를 직접 사용할때에는 그 태그가 위치한 곳에만 적용하기 때문에 선택자를 쓸 필요가 없다


Selector 선택자.누구에게 줄까 : a 코드
Declaration 선언. 무슨 효과를 줄까  : {}
property 어떤 속성 : color
value 그 속성의 값 : red
어떤 것이 어떤지 알면 질문할 수 있게 된다


무엇을 모르는지를 알면 검색할 수 있고, 질문할 수 있고, 궁금해하기 시작함

CSS 속성을 스스로 알아내는 방법

h1의 폰트 사이즈를 어떻게 키우지?
구글링 css font size property

CSS 선택자를 스스로 알아내는 방법


.네임 {
클래스 정의
}





하나의 태그에는 여러개의 속성이 들어갈 수 있고
여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다
(좋은 방법은 아님)
“saw active"에서 active인 빨간색이 되는데
.active가 .saw보다 나중에 등장했기 때문
이 순서를 바꾸면
“saw active”라고 입력해도 .saw의 값이 반영됨
말하자면 최근의 값이 영향력이 큼

그래서 다른 방식이 id를 사용하는 것




태그 선택자 < 클래스 선택자 < 아이디 선택자


이유는?
Id 선택자의 값이 active인 태그가 한번이라도 등장하면 더이상 active는 쓰면 안됨. 단 한번만 등장해야함
ID 선택자가 구체적. 포괄적인것보다 구체적인것의 우선순위를 높임
태그 선택자 a{}를 통해 전체 태그의 디자인을 하고, 예외적인 것에 ID 선택자를 적용

CSS Selector




#생활코딩 #CSS 편! Selector, Declaration, Property, Value 



'스터디 > WEB' 카테고리의 다른 글

[생활코딩] WEB1 - HTML& Internet 시작  (0) 2019.02.09
스터디/WEB 2019. 2. 9. 23:45

[생활코딩] WEB1 - HTML& Internet 시작


웹을 통해서 코딩을 배우는 수업이면서, 코딩으로 웹을 만드는 방법에 대한 수업

 
지도




수업 목록프로젝트의 동기


Atom editor 설치
한글이 깨질 때
<meta charset="utf-8”> 추가


HTML Preview 패키지를 깔아서 
에디터에서 코딩 결과가 우측에 바로 보이도록 했다

CSS
<p style="margin-top:45px;”>



Html title head meta body
<a href= "https://www.w3.org/TR/html5/" target="_blank" title ="html5 specification>


간단 페이지 만들기
고등학교때로 돌아간 느낌


인터넷과 웹
세계 최초의 웹 브라우저가 world wide web


세계 최초의 웹 페이지




Github 원래있던 계정폭파시키고 새로 만들었다!
녹색으로 물들이고 싶은 욕망..




https://twitter.com/Binsworld_dev/status/1093927716200435712
수업준비 때문에 100일코딩에서 유니티 연습을 잠시 접고서 (유니티야 미안해 흑흑) 생활코딩의 WEBn을 듣기 시작했다. HTML-CSS-Javascript 순으로 들어야지. 깃허브 페이지도 계폭하고 새로 세팅! #WWCodeSeoul #100일코딩



'스터디 > WEB' 카테고리의 다른 글

[생활코딩] WEB2 - CSS (1)  (0) 2019.02.09
스터디/Unity 2018. 12. 26. 23:56

[Unity] 작업노트 - Playmaker 연습하기 8, UI - Input field

181226

Openplay님의 강좌 
Playmaker tutorial - with Unity UI #3: input Field 1

인풋필드에 입력한 텍스트가 상단에 디스플레이 되게 하는 예제

UI 앵커포인트는 Sketch 앱 처럼 좌측상단을 0점으로 바꿔줘야 좀 편한듯


텍스트 입력후 엔터를 치면 text를 string값에 저장하기
Input finished 상태에 인풋필드 오브젝트를 드래그앤드랍하여 Get Property - text (string)

그리고 그 값을 InputMessage 오브젝트를 드래그앤드랍하여 Set Property - text(string) 저장되었던 값으로 지정해준다


1단계 완성!

두번째 영삿ㅇ에서는
입력된 텍스트가 없을 경우의 예외처리에 대한 구현

텍스트가 없는지를 판단하는 state를 하나 추가하고,
없는 것이 참일 경우 경고 메시지를 띄우는 state를 추가

판단 state에서는 인풋필드 오브젝트의 text.Length 값을 가져와 int값에 저장하고,
Int compare 액션으로 들어온 값에 대한 이벤트를 정의한다

입력된 텍스트가 없을때의 state에서 화면에 표시되는 메시지를 Set Property로 지정해준다

텍스트가 제대로 입력되면 괜히 랜덤 방향으로 턴하게 지정해서 마무리하려다가

타이핑할때마다 랜덤으로 바라보다가 입력이 끝나면 제자리로 돌아보는 효과를 낸고 싶어서 state를 하나 더 추가했다

완성 :)


👩‍💻 #100DaysOfCode Day12
Unity Input Field UI + Playmaker Practice




스터디/Unity 2018. 11. 16. 17:23

[Unity] Playmaker 플레이메이커 참고 북마크

Hutong 사 홈페이지

Hutong사 유튜브

여러 튜토리얼들 

템플릿 활용하기


디버그


디버그 중 State를 알트+클릭하면 임시로 트랜지션이 되도록 해볼 수 있다

트랜지션 부분을 알트+클릭하면 그 이벤트가 연결된 다음 스테이트로 넘어간다

Debug youtube

커스텀 액션 만들기

스크립트에서 커스텀 액션 접근하기

스크립트에서 플레이메이커 접근하기

팁!

State Machine 디자인하기
-FSM 디스크립션에 이 FSM이 어떤 behavior를 하게될지 서술해본다. 
-그래프뷰에서 대강 배치를 하면서 흐름을 크게 그려본다
-실제로 액션을 넣기 전에 스테이트에 Debug Log를 추가하면서 알트클릭으로 체크하며 테스트한다
-작은 여러 FSM들이 모여 큰 FSM이 되도록
-스탠다이즈된 이벤트 네임을 쓴다 “activate” “turnOn”

NoExit 예제


인벤토리 예제

애니메이션 기능 튜토리얼


스터디/Unity 2018. 11. 16. 17:22

[Unity] Playmaker 플레이메이커 공식 튜토리얼 리스트

스터디/Unity 2018. 11. 16. 14:08

[Unity] 플레이메이커 Playmaker 이벤트 리스트

System Events


Core Events

NOTE: "game object" refers to the game object that owns the FSM.

EventDescriptionUnity Docs
STARTSent when the state machine is enabled.N.A.
FINISHEDSent when all actions on the active state have finished. See Actions.N.A.
LEVEL LOADEDSent after a new level is loaded.OnLevelWasLoaded
BECAME VISIBLESent when the game object becomes visible by any camera.OnBecameVisible
BECAME INVISIBLESent when the game object is no longer visible by any camera.OnBecameInvisible

 

Physics Events

NOTE: After a COLLISION or TRIGGER event you can use GetCollisionInfoGetTriggerInfo, or GetControllerHitInfo to get more info on the collision/trigger event.

COLLISION ENTERSent when the game object first collides with another object.OnCollisionEnter
COLLISION EXITSent when the game object stops colliding with another object.OnCollisionExit
COLLISION STAYSent while the game object is colliding with another object.OnCollisionStay
TRIGGER ENTERSent when the game object enters a trigger volume.OnTriggerEnter
TRIGGER EXITSent when the game object exits a trigger volume.OnTriggerExit
TRIGGER STAYSent while the game object stays inside a trigger volume.OnTriggerStay
CONTROLLER COLLIDER HITSent when the character controller on the game object collides with an object.OnControllerColliderHit
COLLISION ENTER 2DSent when the game object first collides with a 2D Collider.OnCollisionEnter2D
COLLISION EXIT 2DSent when the game object stops colliding with a 2D Collider.OnCollisionExit2D
COLLISION STAY 2DSent while the game object is colliding with a 2D Collider.OnCollisionStay2D
TRIGGER ENTER 2DSent when the game object enters a 2D Trigger.OnTriggerEnter
TRIGGER EXIT 2DSent when the game object exits a 2D Trigger.OnTriggerExit
TRIGGER STAY 2DSent while the game object stays inside a 2D Trigger.OnTriggerStay
PARTICLE COLLISIONSent when a particle hits a Collider. See unity docs for more info.OnParticleCollision
JOINT BREAKSent when a Joint attached to the same game object breaks.OnJointBreak
JOINT BREAK 2DSent when a Joint2D attached to the same game object breaks.OnJointBreak2D

 

Mouse Events

TIP: Mouse events are useful in state machines that control GUIText or GUITexture components. See GUI Element Actions.

MOUSE DOWNSent when the mouse clicks on the game object.OnMouseDown
MOUSE DRAGSent while the mouse button is down and over the game object.OnMouseDrag
MOUSE ENTERSent when the mouse rolls over the game object.OnMouseEnter
MOUSE EXITSent when the mouse rolls off the game object.OnMouseExit
MOUSE OVERSent while the mouse is over the game object.OnMouseOver
MOUSE UPSent when the mouse button is released over the game object.OnMouseUp
MOUSE UP AS BUTTONSent when the mouse button is released over the same GUI Element or Collider it was pressed on.OnMouseUpAsButton

 

Application Events

APPLICATION FOCUSSent when the Application gets focus.
APPLICATION PAUSESent when the Application is paused.
APPLICATION QUITSent right before the Application quits.

 

UI Events

NOTE: The owner needs the appropriate UI Components to send UI Events. If you want to target other GameObjects use UI Actions.

UI CLICKSent when a Button is pressed. Game object needs a Button component.
UI BEGIN DRAGSent before a drag is started.
UI DRAGSent every time the pointer is moved during dragging.
UI END DRAGSent when a drag is ended.
UI DROPSent when an object accepts a drop.
UI POINTER UPSent when a mouse click is released.
UI POINTER CLICKSent when a click is detected.
UI POINTER DOWNSent during ongoing mouse clicks until release of the mouse button
UI POINTER ENTERSent when the mouse begins to hover over the GameObject.
UI POINTER EXITSent when the mouse stops hovering over the GameObject.
UI BOOL VALUE CHANGEDSent when a Toggle value changes. Game object needs a Toggle component. Use Get Event Bool Data to get the value.
UI FLOAT VALUE CHANGEDSent when a Slider or Scrollbar value changes. Game object needs a Slider or Scrollbar component. Use Get Event Float Data to get the value.
UI INT VALUE CHANGEDSent when a Dropdown selection changes. Game object needs a Dropdown component. Use Get Event Int Data to get the value.
UI VECTOR2 VALUE CHANGEDSent when a ScrollRect value changes. Game object needs a ScrollRect component. Use Get Event Vector2 Data to get the value.
UI END EDITSent when when editing of an InputField has ended. Owner needs an InputField component.

 



User Events

User events are usually named for clarity: Open Door, Turn On, Turn Off etc.

You can make/edit these events in the Event Manager.

Sending Events

There are a few ways to send events to an FSM:

  • Using Actions
  • Using Animation Events
  • Sending event from scripts.

Sending Events From Actions

The most basic Actions to send an event:

Other Actions send events based on conditions:

Events are essential to the flow of an FSM, so many actions send them.

Global Events

Events can be marked as Global in the Event Manager. Global events can be sent between FSMs.

Do not confuse Global Events with Global Transitions.

Event Data

You can associate data with an event using Set Event Data. For example, you could set the amount of damage to inflict with a Do Damage event.

You can get information and data associated with an event using Get Event Info. For example, you could read the amount of damage associated with a Do Damage event.


*콜리젼과 트리거 차이?


스터디/Unity 2018. 11. 16. 13:51

[Unity] 플레이메이커 Playmaker 액션 레퍼런스 리스트

Action Reference

https://hutonggames.fogbugz.com/default.asp?W2



Animate Variables Actions

These actions animate variable values over time using curves and easing. Use these actions to animate parameters in other actions.

Animation Actions

OTE: These actions use the Legacy Animation System in Unity. There is a newer animation system called Mecanim Animator that can be controlled with Animator Actions. However, in some situations it can be simpler to use these animation actions.
Most Animation Actions require an Animation Component on the game object. 
*가끔 옵션들이 히든되어있을수 있기 때문에 Debug 뷰 선택해야 될 수 있음
애니메이션과 애니메이션이벤트를 유니티 Animation View 에서 생성할 수 있다. 이렇게 만들어진 애니메이션은 PlaymakerFSM으로 animation events 형태로 전달 가능하다
- 게임오브젝트를 서택해서 Window>Animation에서 애니메이션을 추가하고, 타임라인에 애니메이션이벤트를 추가한다. 그리고 SendEvent(String) 함수를 선택하여 보낼 이벤트명 설정. 그러면 PlaymakerFSM에서 보내짐



유니티 Legacy Animation System


Animator Actions

Animator Actions use Unity's powerful Mecanim Animator System. Most Animator Actions require an Animator Component on the game object. 

유니티 Mecanim Animator System


Application Actions

https://hutonggames.fogbugz.com/default.asp?W671

High level actions to control the application.


Array Actions

https://hutonggames.fogbugz.com/default.asp?W1196

These actions are used with Array Variables. An Array lets you work with a collection of values.



Audio Actions

Audio actions control AudioSource components on game objects. Note, the AudioSource component provides a nice GUI to control advanced audio features. 


Camera Actions



Character Actions

Character Actions work with a Character Controller on a Game Object.


Color Actions

Color actions manipulate color variables.

https://hutonggames.fogbugz.com/default.asp?W417



Convert Actions

Convert Actions convert variables between different types.

NOTE: 1.9.0 can now auto-convert between many variable types.


Debug Actions



Device Actions

https://hutonggames.fogbugz.com/default.asp?W490

모바일 디바이스



Effects Actions

https://hutonggames.fogbugz.com/default.asp?W198


Enum Actions

https://hutonggames.fogbugz.com/default.asp?W1197


GameObject Actions

GameObject Actions deal with Unity Game Objects and the scene hierarchy.


GUI Actions

GUI actions require manual placement. For automatically laid out controls see GUI Layout Actions.

Unity also has a GUI Element system which uses GUIText and GUITexture components on game objects. See GUI Element Actions

See also PlayMakerGUI Inspector


GUI Element Actions

https://hutonggames.fogbugz.com/default.asp?W361

GUI Elements are set up in the Unity editor by adding GUIText or GUITexture components to a game object (Main Menu > Component > Rendering...).

These GUI Elements respond to mouse events in Playmaker (MOUSE OVER, MOUSE DOWN...), so it's very easy to set up their states.

GUI Element actions control the appearance of GUI Elements:


GUILayout Actions

https://hutonggames.fogbugz.com/default.asp?W414
GUILayout actions mirror Unity's GUILayout system. See Unity Docs.


 

Input Actions



Level Actions

Level actions deal with level loading and creation.


Lights Actions

https://hutonggames.fogbugz.com/default.asp?W384

Lights actions perform operations on Unity Lights.



Logic Actions

Logic actions perform comparisons and tests on variables. (Compare, Test, Switch...). They generally send events based on the results.


Material Actions


Mesh Actions



Unity Physics docs:

Vector3 Actions

Physics actions make heavy use of Vector3 variables. See Vector3 Actions.


Physics 2d Actions

https://hutonggames.fogbugz.com/default.asp?W1267


PlayerPrefs Actions

https://hutonggames.fogbugz.com/default.asp?W545


Quaternion Actions

https://hutonggames.fogbugz.com/default.asp?W1258



Rect Actions

https://hutonggames.fogbugz.com/default.asp?W673



Rect Transform Actions

https://hutonggames.fogbugz.com/default.asp?W1580



RenderSettings




Scene Actions




ScriptControl Actions




StateMachine Actions

https://hutonggames.fogbugz.com/default.asp?W15



String Actions







스터디/Unity 2018. 11. 12. 00:40

[Unity] 작업노트 - Playmaker 연습하기 7, get/set property 2- 환쟁이님 강좌

환쟁이(slee16) 강좌 따라 연습하기 계속
플레이메이커 액션 - Get/Set Property 두번째 파트

Rigid body의 gravity 옵션 켜기
Mesh Renderer에서 Cash Shadow 켜고 끄기

terrain에 큐브를 하나 만들어주고
게임오브젝트 manager_box 를 만들어 FSM 추가
Ready 스테이트에 <Get Key Up> 액션, ready_push 이벤트 추가

Result 스테이트에 cube 오브젝트를 프로젝트뷰에서 드래그앤드랍

플레이하면 큐브는 공중에 떠있고, 엔터를 누르면 Gravity가 적용되어 아래로 떨어진다 



위 예제의 큐브를 내가 만든 캐릭터 프리팹으로 교체해보고 싶었는데 생각보다 문제가 복잡해졌다

단순 큐브의 meshRender 오브젝트의 get/set property는 간단한데, 캐릭터는 상위폴더아래에 몇개의 메쉬/메쉬렌더러가 별도로 있기 때문
그래서 아래 링크를 참고해서 몇단계를 더 거쳤다

우선 변수형은 Object(게임오브젝트와의 차이를 이제서야 알았다)를 만들고 타입에서 갖가지 서브 요소타입을 정할 수 있다

 Player 1 게임오브젝트의 child인 yellowbody를 새 게임오브젝트 변수 get child에 저장하고, 
(플레이어를 구성하는 여러 파트가 있지만 그냥 몸통 부분만 일단 받아오고 나머지는 그림자 cast shadow를 아예 첨부터 꺼버렸다)
그 yellow body 게임오브젝트중 메시렌더러 부분을 아까 만든 object 변수에 저장한다


그리고 get/set property는 아까 드래그드랍을 바로 했던것과는 달리 리스트에서 변수를 불러온다

플레이!

엔터를 누르면 gravity가 활성화 되어 아래로 떨어졌다가 다시 초기 위치로 돌아가게 되고,
스페이스를 누르면 그림자가 생겼다가 없어졌다 하게 된다!