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
LINEヤフーTech (LY Corporation Tech)
PRO
October 11, 2024
Technology
0
86
풍성한 디자인 요청사항에 대응하기
Future 2024 행사에서 진행한 세션 발표자료입니다.
LINEヤフーTech (LY Corporation Tech)
PRO
October 11, 2024
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
「コード品質向上のテクニック」連載継続の秘訣
lycorptech_jp
PRO
0
37
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
130
Arakawa 101 Or How To Build a Data App by Python
lycorptech_jp
PRO
0
12
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
17
3.6k
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
1
1.4k
Yahoo! ズバトクにおけるフロントエンド開発
lycorptech_jp
PRO
0
650
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
770
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
530
連合学習を用いたスタンプの推薦
lycorptech_jp
PRO
2
77
Other Decks in Technology
See All in Technology
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
現場で役立つAPIデザイン
nagix
29
10k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
Featured
See All Featured
Speed Design
sergeychernyshev
25
780
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Visualization
eitanlees
146
15k
It's Worth the Effort
3n
184
28k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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