Developer Academy @ POSTECH
개발자님! 1px만 옮겨주세요^^ : 디자이너가 코드를 만났을 때 #91
Replies: 1 comment 1 reply
-
|
디자이너와 개발자의 입장을 조금씩 맛본 입장에서 웃프게 읽을 수 있었던 것 같습니다! 😃 위 상황에 대한 생각을 더해보자면, 각 요소들 사이의 상대적인 관계를 기준으로 레이아웃을 그리는 개발자의 입장에서 하지만 이 같은 변화를 대응하는 것 역시 개발자의 책임 중 하나이기에, 그렇다면 개발자에게 1px만 조정해달라고 요청하는 것은 어떤 의미로 해석될 수 있을까요? 위 문장 뒤에는 여러 컴포넌트의 크기를 변경하거나, 색상 코드를 변경하거나, 패딩 및 마진을 조정하는 등의 이런 디테일을 잡아나가는 과정은 필연적이기도 하지만, 불필요한 커뮤니케이션을 만들어내기도 합니다. 저는 이 모든 과정이 코딩 문학에서 말하는 개발자의 '전부'가 아니었을까 생각합니다. 서론이 두서없이 길어졌지만, 마지막으로 제 생각을 정리해 보자면 디자인 작업에 들어가기 전 충분한 협의는 이를 해결해나가는데 많은 도움을 줄 것입니다.
등의 논의는 이후 디테일을 잡아나가는 과정에서의 불필요한 리소스를 크게 줄여줄 수 있다고 확신합니다!! @Rochelle0922처럼 디자이너의 입장에서 개발자의 입장을 이해하려는 노력 또한 이러한 맥락에서 너무나 뜻깊다고 생각합니다. |
Beta Was this translation helpful? Give feedback.
-
|
한톨이의 답글을 통해 이 코딩문학의 의미를 더 깊이 이해하게 되었습니다! 단순히 1px의 수정이 아닌, UI 디자인의 디테일을 맞춰가는 전체적인 과정과 그 속에서 발생하는 커뮤니케이션의 중요성을 다시 한번 생각하게 되었습니다. 제가 겪은 Auto Layout 경험처럼 작은 디자인 변경도 개발 단계에서는 여러 요소들과 얽혀있을 수 있다는 걸 이제는 이해하게 되었듯이 앞으로는 디자이너로서 개발자와 더 긴밀하게 소통하며 서로의 입장을 이해하려 노력하겠습니다. 좋은 인사이트 감사합니다!!! 🙇♀️ |
Beta Was this translation helpful? Give feedback.
-
안녕하세요 3기 러너 로셸입니다!
디자이너인 제가 테크포럼에 글을 쓸 줄은 저도 몰랐는데요…
저는 UX디자인을 전공하고 디자이너로 일을 하다 아카데미에 오게 되었고, 개발은 이곳에 와서 처음으로 접해본 분야로 MC1때 처음 XCode를 켜보았습니다…
이런 제가 애플 디벨로퍼 아카데미에서부터 시작된 짧은 개발기간 동안 느낀 부분을 공유하고 싶어 테크포럼에 글을 쓰게 되었습니다.
2023년 코딩문학제에서 당선된 이 짤을 다들 보신 적 있으신가요?
🎨 디자이너 로셸 : "디자이너는 쉽게 생각하고 1px만 옮겨달라 요청했지만 개발자에겐 어려운 일일 수 있다는 말일까?”
💻 개발자 러너 : “맞아. 하지만 애초에 1px 옮길 때 모든 걸 다 고쳐야하는 코드를 짜면 안돼….!”
저는 그저 디자이너와 개발자 사이의 소소한 에피소드라고 생각했지만 최근 제가 직접 코드를 다루면서 이 문구를 체감하게 되었습니다.
⠀
⠀
⠀
🔸 UIKit 스토리보드로 뷰 그리기
저희 팀은 개발이 들어가기 전 PR하는 법과 UIKit을 익히기 위해 일주일 동안 팀 내 과제를 진행했었는데요. 처음 UIKit 스토리보드를 열었을 때, 마치 익숙한 디자인 툴을 사용하는 것 같아 흥미로웠습니다. 컴포넌트들을 드래그 앤 드롭으로 배치하고, 속성을 조정하는 것이 Figma를 사용하는 것과 비슷하다고 느껴졌어요.
피그마에서 작업했던 것처럼, 텍스트필드와 지출 버튼, 금액 표시 레이블, 그리고 지출 내역을 보여주는 테이블뷰를 스토리보드에 배치했습니다. 디자이너로서 익숙했던 작업이었기에, 각 요소들의 위치와 여백만 지정해주면 되겠다고 생각했어요.
이후 개발을 진행하면서 피그마와 실제 구현된 화면을 비교해보니 상단 패딩값이 잘못 들어간 것을 발견했습니다.
상단 텍스트필드의 패딩값을 5픽셀 수정하자, 예상치 못한 일이 벌어졌습니다. 텍스트필드와 '지출' 버튼, 금액 표시 레이블, 테이블뷰가 각각의 제약 조건으로 서로 연결되어 있었기 때문에, 하나의 패딩값 수정이 도미노처럼 모든 컴포넌트에 영향을 미쳤습니다. 텍스트필드가 아래로 이동하면서 금액 표시 레이블과의 간격이 늘어났고, 이는 테이블뷰의 셀들 간격까지 변경시켰죠. 결국 이 작은 변화로 인해 테이블뷰의 셀들이 겹치는 현상이 발생했습니다.
이 과정에서 Auto Layout의 특성을 깨닫게 되었습니다. 피그마에서는 단순히 컴포넌트의 위치만 조절하면 됐지만, UIKit에서는 모든 요소가 서로 연결되어 있었죠. 상단의 텍스트필드부터 하단의 테이블뷰까지, 하나의 요소를 수정하는 것이 다른 컴포넌트들에도 영향을 미친다는 점을 알게 되었습니다. 디자이너로서 "패딩값만 수정하면 되는데"라고 생각했던 것들이, 실제 개발에서는 더 많은 고려가 필요하다는 것을 깨닫게 되었습니다.
⠀
⠀
⠀
🔸 개발을 배우며 얻은 깨달음
이 경험을 통해 UIKit의 Auto Layout이 피그마의 레이아웃 시스템과는 다르다는 것을 알게 되었습니다. 디자인 툴에서는 요소를 이동하거나 크기를 조절하는 것으로 끝나지만, 실제 개발에서는 모든 변경이 다른 요소들과의 관계 속에서 이루어진다는 점이 새로웠습니다.
앞으로도 저는 디자인과 개발 사이의 다리를 만들기 위해 계속해서 코드를 배우고 이해하려는 노력을 이어가보려고 합니다. 개발에서는 너무 어린이 같은 글이지만 읽어주셔서 감사합니다@.@
Beta Was this translation helpful? Give feedback.
All reactions