Create App Easier With SVC Pattern - DroidKnights 2019 @SeoulBansook Nam
Suggest a new pattern "How to divide your Activity & Fragment".
Shows "Lotto - App" sample.
Youtube: https://www.youtube.com/watch?v=_-yZPjf9HLo
Hope it would help to understand Andoird Architecture Pattern.
모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)keesung kim
모바일과 같이 작은 화면을 가진 디바이스를 디자인할 때 고민해야할 점들은 어떤 것들이 있을까요?
모바일 스크린 디자인 원칙을 10가지정도로 정리해보았습니다.
* 시간이 지나면서 이제는 업데이트가 필요한 이미지들도 꽤 있네요.
하지만 기본 원칙들은 아직 유효하기에.. :D
모바일 고려사항 (Context, Device, Interaction)
모바일 스크린 디자인 원칙
1. Diet Information (Pareto's Law)
2. Reduce Drill Down (Strolling Around)
3. Contents over Navigation (Occam's Razor)
4. Focus on Primary Task (Step by Step)
5. Economize Labor (Real Nature)
6. Keep Contents Seamlessly (Seamless)
7. Design for Input Method (Fitt's Law)
8. Select Optimal User Interface (Mental Model)
9. Choose Natural Transition (Mapping)
10. Show Emotional Animation (Mimicry)
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
Droidknighs2020에서 유튜브로 발표한 슬라이드입니다.
https://www.youtube.com/watch?v=gTYou3Ru1QM
[Speaker소개]
안드로이드 개발 7년차, Flutter 개발 2년차 개발자입니다. 현재 스타트업 Lawfully에서 182개국 약 7만명의 유저가 사용중인 글로벌앱을 개발/관리 하고 있습니다. 프론트엔드 개발에 관심이 많아 그 외에 React 프로젝트도 참여하였고, 각 플랫폼과 언어의 장단점을 잘 녹여서 개발에 적용중입니다.
이번 발표는 Flutter에 관심이 있는 개발자, 혹은 Flutter앱을 처음 런칭하시는 분들이 참고하시면 좋은 내용으로 준비했습니다.
[이런 분이 들으시면 좋습니다]
Flutter 관심 있으신분. Flutter로 앱을 출시하고 싶으신분. Native Platform 앱과 Flutter 앱을 비교해보고 싶으신분.
7. 02. Effect & Trasition
001. Basics
- 자연스러운 인터랙션 유도
- 효과 : 맥락에 따른 컴포넌트들의 변화, 시각적 강조 및 효과, 흥미로운 행동 유도
- 전환 : 자연스러운 화면 전환
- 동적인 속성
- 그 외 다음과 같은 일 진행
* 애플리케이션 내에서 화면의 전환을 부드럽게 한다.
* 화면에 필요한 항목을 동적으로 추가한다.
* 화면에 불필요한 요소 보이지 않게 한다.
* 화면 내 요소들을 필요에 따라 바꾸어 준다.
8. 02. Effect & Trasition
001. Basics
** Application내에서 강조하거나 집중해야 할 영역이 있을때.
** Application내에서 그냥 넘어가도 되는 부분
** 인터랙션의 강조
9. 02. Effect & Trasition
002. Considering
- 목적이 무엇인가?
효과를 사용하고자 하는 이유를 명백히 하자
- 화면에 더 필요한 것은 무엇인가?
효과는 사용자 경험을 보완해 주어야지 방해해서는 안된다.
특히, 동작이 큰 움직임은 사용자 시스템의 부하를 막기 위해 순차적으로 실행해줘야한다.
- Application Layout을 어떻게 할 것인가?
어디에 모션을 적용할 지 생각해두면 레이아웃을 융통성 있게 준비할수 있다.
- 레이아웃에 어떠한 영향을 미칠것인가?
효과를 추가할때 나머지 Application의 요소에 어떻게 영향일 미칠것인지 미리 계산해야 한다.
1. Showcases
2. Flex Store
11. 02. Effect & Transition
003. Effect | 2. Use Effects
* Filter Tag
<mx:Fade id="myFadeOut" 효과 이름과 아이디
alphaFrom="1" alphaTo="0" 효과 값
duration="1000" 효과가 진행되는 시간
target="{myButton01, myButton02}"/> 효과가 적용되는 Component(아이디이름으로)
<s:Button id="myButton01" x="74" y="151"
label="Fade Out" width="118" height="37"
click="myFadeOut.play();"/> 클릭 했을 때 효과 재생
<s:Button id="myButton02" x="212" y="151"
label="Fade In" width="118" height="37"
rollOver="myFadeOut.play();"/> 마우스가 오버되었을 때 효과 재생
12. 02. Effect & Transition
003. Effect | 2. Use Effects
* 실행 조정 methods
plaly();
효과를 동작
pause();
효과가 동작하는 중 특정 시점에서 일시정지
resume();
일시정지 상태에서 다시 동작
reverse();
동작하던 효과를 특정 시점에서 다시 역으로 동작
end();
효과를 종료시점으로 넘김
stop();
동작 중인 상태에서 특정 시점에서 효과를 멈춤
isPlaying();
효과가 동작 중인지 여부를 알림
13. 02. Effect & Transition
003. Effect | 2. Use Effects
* 여러 Effect 적용 : Parallel(동시)/Sequence(순차)하게 적용
<s:Parallel id="myeffect" target="{Btn_motion}"> / 여러 효과를 Parallel하게 적용
<mx:Fade alphaFrom="1" alphaTo="0"/>
<mx:Blur blurXFrom="0" blurXTo="10"/>
<mx:Move xFrom="74" xTo="104"/>
</s:Parallel>
<s:Button id=btnMotion x="74" y="151" label=“Motion"
width="118" height="37"
click="myeffect.play();"/>