Slide 1

Slide 1 text

풍성한 디자인 요청사항에 대응하기 박유진, LINE / ABC Studio

Slide 2

Slide 2 text

안녕하세요!

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

AS-IS TO-BE

Slide 6

Slide 6 text

구조 리뉴얼 (BLoC) + UI 리뉴얼

Slide 7

Slide 7 text

구조 리뉴얼 (BLoC) + UI 리뉴얼

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

한정된 시간!

Slide 10

Slide 10 text

Pentagon

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

그냥.. 그리자! 🥹

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

(r, 0) (0, 0) (0, r) (r, y) (0, y) (0, y-r)

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

arcToPoint moveTo lineTo

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

😣 하지만.. - Exception 처리 (radius가 0일때, width < radius일때 등) - Arrow 방향

Slide 28

Slide 28 text

Loading Skeleton

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

0 c.maxWidth -c.maxWidth

Slide 44

Slide 44 text

🧑🎨 다양하게 사용할 수 있어요

Slide 45

Slide 45 text

그런데요…

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수 선택 가능

Slide 48

Slide 48 text

그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수 선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션

Slide 49

Slide 49 text

그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수 선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션 자식 위젯을 감싸서 사용 ShaderMaskLayer 사용

Slide 50

Slide 50 text

그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수 선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션 자식 위젯을 감싸서 사용 부모의 크기를 감지하여 범위 조정 ClipRRect 사용 ShaderMaskLayer 사용

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

CustomScrollView + Dropdown

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

나눠서 생각하기!

Slide 55

Slide 55 text

4MJWFS5P#PY"EBQUFS

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

4MJWFS1FSTJTUFOU)FBEFS

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

4MJWFS-JTU

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Stack으로 쌓기

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Dropdown도 스크롤이 돼야하는데.. 🤔

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

스크롤의 위치 DropDown 여기부터 여기까지 66

Slide 67

Slide 67 text

Offset 0 1 2 … n 스크롤의 위치

Slide 68

Slide 68 text

Offset 0 1 2 … n DropDown Position 66 65 64 … 66-n 스크롤의 위치 DropDown DropDown Position

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

그런데요…

Slide 71

Slide 71 text

리스트의 길이에 인한 스크롤 변경시 반영되지 않는 문제

Slide 72

Slide 72 text

리스트의 길이에 인한 스크롤 변경시 반영되지 않는 문제

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

여기도 추가!

Slide 75

Slide 75 text

디자이너와 잘 일해보기 💪

Slide 76

Slide 76 text

디자이너 🖌

Slide 77

Slide 77 text

이해한게 맞는지 확인 ✔ 확인해본다고 하고 일정 공유드리기 디자이너 🖌 디자이너 🖌 디자이너 🖌

Slide 78

Slide 78 text

1차 샘플 전달드리기

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

추가 디테일 작업 디자이너 🖌

Slide 81

Slide 81 text

@디자이너 🖌 디자이너 🖌

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

🧑🎨 명확한 의사소통! 좋잖아요

Slide 84

Slide 84 text

내가 이해한 바를 정확하게 공유하기

Slide 85

Slide 85 text

질문할 때는 이해가 쉽게 시각 자료를 첨부하기

Slide 86

Slide 86 text

선택이 필요할 때는 가능한 옵션을 먼저 제공하기

Slide 87

Slide 87 text

디자이너의 의도와 동일하게 구현하기 위해 최선을 다하기 ~~~

Slide 88

Slide 88 text

신뢰 🤝 👍

Slide 89

Slide 89 text

감사합니다 LinkedIn GitHub