Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
풍성한 디자인 요청사항에 대응하기
Search
LY Corporation Tech
PRO
October 11, 2024
Technology
0
23
풍성한 디자인 요청사항에 대응하기
Future 2024 행사에서 진행한 세션 발표자료입니다.
LY Corporation Tech
PRO
October 11, 2024
Tweet
Share
More Decks by LY Corporation Tech
See All by LY Corporation Tech
LINEヤフー株式会社における音声言語情報処理AI研究開発@SP/SLP研究会 2024.10.22
lycorptech_jp
PRO
2
240
DETECLAP: Enhancing Audio-Visual Representation Learning with Object Information (Technical seminar on acoustic scene and event analysis)
lycorptech_jp
PRO
0
25
Language-based Audio Moment Retrieval (Technical seminar on acoustic scene and event analysis)
lycorptech_jp
PRO
0
20
Lighthouse: A User-friendly Library for Reproducible Video Moment Retrieval and Highlight Detection (Technical seminar on acoustic scene and event analysis)
lycorptech_jp
PRO
0
26
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
140
新卒2年目エンジニアがLINEギフトの保守性を高めるために取り組んだこと
lycorptech_jp
PRO
2
520
Trusted Types API と Vue.js
lycorptech_jp
PRO
1
1.1k
LeSSをはじめよう〜LeSSをはじめるとき、LeSSをはじめてから、知りたかったこと詰め合わせ〜
lycorptech_jp
PRO
2
250
合併後のインフラ環境におけるアラートフローの問題点洗い出しと改善をした話
lycorptech_jp
PRO
1
120
Other Decks in Technology
See All in Technology
Mini Tokyo 3D × PLATEAU - 公共交通デジタルツインにリアルな風景を
nagix
1
200
SNSマーケティングに革新! ABEMA サッカー動画切り出しを生成AIで自動化し、業務効率化を狙う! / abema-ai-marketing
cyberagentdevelopers
PRO
1
120
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
130
運用イベント対応への生成AIの活用 with Failure Analysis Assistant
suzukyz
0
170
軽量DDDはもういらない! スタイルガイド本で OOPの実装パターンを学ぼう
panda_program
27
9.5k
フロントエンド メタフレームワーク 選定の際に考えたこと
yuppeeng
0
450
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
2
650
AWS パートナー企業でテクニカルサポートに従事して 3年経ったので思うところをまとめてみた
kazzpapa3
1
180
End of Barrel Files: New Modularization Techniques with Sheriff
rainerhahnekamp
0
220
Fargateを使った研修の話
takesection
0
160
福岡新卒エンジニアの会
teba_eleven
1
140
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
How STYLIGHT went responsive
nonsquared
95
5.2k
We Have a Design System, Now What?
morganepeng
50
7.2k
Become a Pro
speakerdeck
PRO
24
5k
Faster Mobile Websites
deanohume
304
30k
GraphQLとの向き合い方2022年版
quramy
43
13k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
Transcript
풍성한 디자인 요청사항에 대응하기 박유진, LINE / ABC Studio
안녕하세요!
None
None
AS-IS TO-BE
구조 리뉴얼 (BLoC) + UI 리뉴얼
구조 리뉴얼 (BLoC) + UI 리뉴얼
None
한정된 시간!
Pentagon
None
None
None
None
None
None
그냥.. 그리자! 🥹
None
None
None
None
(r, 0) (0, 0) (0, r) (r, y) (0, y)
(0, y-r)
None
None
arcToPoint moveTo lineTo
None
😣 하지만.. - Exception 처리 (radius가 0일때, width < radius일때
등) - Arrow 방향
Loading Skeleton
None
None
None
None
None
None
None
None
None
None
None
None
None
None
0 c.maxWidth -c.maxWidth
🧑🎨 다양하게 사용할 수 있어요
그런데요…
None
그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수
선택 가능
그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수
선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션
그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수
선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션 자식 위젯을 감싸서 사용 ShaderMaskLayer 사용
그라디언트 커스텀 가능 shimmer package 애니메이션의 방향 및 반복 횟수
선택 가능 my skeleton 고정된 그라디언트 좌->우로 흐르는 애니메이션 자식 위젯을 감싸서 사용 부모의 크기를 감지하여 범위 조정 ClipRRect 사용 ShaderMaskLayer 사용
None
CustomScrollView + Dropdown
None
나눠서 생각하기!
4MJWFS5P#PY"EBQUFS
None
4MJWFS1FSTJTUFOU)FBEFS
None
4MJWFS-JTU
None
Stack으로 쌓기
None
None
Dropdown도 스크롤이 돼야하는데.. 🤔
None
스크롤의 위치 DropDown 여기부터 여기까지 66
Offset 0 1 2 … n 스크롤의 위치
Offset 0 1 2 … n DropDown Position 66 65
64 … 66-n 스크롤의 위치 DropDown DropDown Position
None
그런데요…
리스트의 길이에 인한 스크롤 변경시 반영되지 않는 문제
리스트의 길이에 인한 스크롤 변경시 반영되지 않는 문제
None
여기도 추가!
디자이너와 잘 일해보기 💪
디자이너 🖌
이해한게 맞는지 확인 ✔ 확인해본다고 하고 일정 공유드리기 디자이너 🖌
디자이너 🖌 디자이너 🖌
1차 샘플 전달드리기
None
추가 디테일 작업 디자이너 🖌
@디자이너 🖌 디자이너 🖌
None
🧑🎨 명확한 의사소통! 좋잖아요
내가 이해한 바를 정확하게 공유하기
질문할 때는 이해가 쉽게 시각 자료를 첨부하기
선택이 필요할 때는 가능한 옵션을 먼저 제공하기
디자이너의 의도와 동일하게 구현하기 위해 최선을 다하기 ~~~
신뢰 🤝 👍
감사합니다 LinkedIn GitHub