풍성한 디자인 요청사항에 대응하기

Future 2024 행사에서 진행한 세션 발표자료입니다.

Transcript

1. 풍성한 디자인 요청사항에 대응하기 박유진, LINE / ABC Studio
2. 안녕하세요!
5. AS-IS TO-BE
6. 구조 리뉴얼 (BLoC) + UI 리뉴얼
7. 구조 리뉴얼 (BLoC) + UI 리뉴얼
9. 한정된 시간!
10. Pentagon
17. 그냥.. 그리자! 🥹
22. (r, 0) (0, 0) (0, r) (r, y) (0, y) (0, y-r)
25. arcToPoint moveTo lineTo
27. 😣 하지만.. - Exception 처리 (radius가 0일때, width < radius일때 등) - Arrow 방향
28. Loading Skeleton
43. 0 c.maxWidth -c.maxWidth
44. 🧑🎨 다양하게 사용할 수 있어요
45. 그런데요…
47. 그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수 선택 가능
48. 그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수 선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션
49. 그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수 선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션 자식 위젯을 감싸서 사용 ShaderMaskLayer 사용
50. 그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수 선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션 자식 위젯을 감싸서 사용 부모의 크기를 감지하여 범위 조정 ClipRRect 사용 ShaderMaskLayer 사용
52. CustomScrollView + Dropdown
54. 나눠서 생각하기!
55. 4MJWFS5P#PY"EBQUFS
57. 4MJWFS1FSTJTUFOU)FBEFS
59. 4MJWFS-JTU
61. Stack으로 쌓기
64. Dropdown도 스크롤이 돼야하는데.. 🤔
66. 스크롤의 위치 DropDown 여기부터 여기까지 66
67. Offset 0 1 2 … n 스크롤의 위치
68. Offset 0 1 2 … n DropDown Position 66 65 64 … 66-n 스크롤의 위치 DropDown DropDown Position
70. 그런데요…
71. 리스트의 길이에 인한 스크롤 변경시 반영되지 않는 문제
72. 리스트의 길이에 인한 스크롤 변경시 반영되지 않는 문제
74. 여기도 추가!
75. 디자이너와 잘 일해보기 💪
76. 디자이너 🖌
77. 이해한게 맞는지 확인 ✔ 확인해본다고 하고 일정 공유드리기 디자이너 🖌 디자이너 🖌 디자이너 🖌
78. 1차 샘플 전달드리기
80. 추가 디테일 작업 디자이너 🖌
81. @디자이너 🖌 디자이너 🖌
83. 🧑🎨 명확한 의사소통! 좋잖아요
84. 내가 이해한 바를 정확하게 공유하기
85. 질문할 때는 이해가 쉽게 시각 자료를 첨부하기
86. 선택이 필요할 때는 가능한 옵션을 먼저 제공하기
87. 디자이너의 의도와 동일하게 구현하기 위해 최선을 다하기 ~~~
88. 신뢰 🤝 👍
89. 감사합니다 LinkedIn GitHub