Showing Posts From

피그마

오후 3시, 예정 없던 긴급 미팅이 잡혔을 때

오후 3시, 예정 없던 긴급 미팅이 잡혔을 때

오전 10시 30분 출근했다. 슬랙 확인. 지라 티켓 14개. 한숨. 오늘은 집중할 수 있는 날이다. 미팅이 하나도 없다. 캘린더를 세 번 확인했다. 비어있다. 완벽하다. 어제부터 시작한 신규 기능 UI. 버튼 배치, 컬러 톤, 타이포그래피 위계. 머릿속에 다 그려져 있다. 오늘 안에 끝낼 수 있다. 피그마를 켰다. 파일을 열었다. 손이 가벼웠다. 컴포넌트 정리부터. 버튼 사이즈 8px씩 증가. 16, 24, 32, 40. 리듬이 있어야 한다. 패딩은 좌우 16, 상하 12. 아니다. 상하도 16으로 맞추자. 정사각형에 가까운 게 안정적이다. 프라이머리 컬러. #4A90E2. 너무 흔하다. 채도를 10 올렸다. #4A9AFF. 좀 낫다. 명도는 그대로. 접근성 확인. WCAG AA 통과. 좋다.타이포그래피. 헤드라인은 Pretendard Bold 24px. 본문은 Regular 16px. 행간은 1.6. 자간은 -0.02em. 숨쉬는 느낌. 30분이 지났다. 몰입이다. 이때가 제일 좋다. 오후 2시 47분 슬랙 알림. "@최디자 3시에 긴급 미팅 잡았습니다. 대표님이 봐야 한다고 하셔서요." 손이 멈췄다. 캘린더를 봤다. 13분 전에 추가된 이벤트. "신규 기능 방향 논의 (긴급)". 참석자 7명. 한숨이 나왔다. 지금 정리하던 컴포넌트. 레이아웃 그리드. 타이포그래피 스케일. 머릿속에 있던 맥락. 다 날아갈 예정이다. 저장했다. 파일명 끝에 "_진행중_0247" 붙였다. 나중에 돌아왔을 때 어디까지 했는지 알아야 한다. 물 한 잔 마셨다. 화장실 다녀왔다. 10분 남았다. 노션 페이지 열었다. 오늘 했던 작업 정리. 버튼 컴포넌트 4가지 사이즈 정리 프라이머리 컬러 조정 (#4A9AFF) 타이포그래피 스케일 1차 완료 다음: 카드 컴포넌트, 인풋 필드메모 안 해두면 까먹는다. 미팅 끝나고 돌아왔을 때 "내가 뭐 하고 있었지?" 이게 제일 답답하다.오후 3시 2분 회의실 입장했다. 7명 중 4명 도착. 노트북 열었다. 피그마 켜뒀다. 뭘 보여달라고 할지 모른다. 대표님이 들어왔다. 기획자 민수가 화면 공유 시작했다. "이번에 새로 들어간 기능인데요. 대표님이 어제 경쟁사 앱 보시고 우리도 이런 식으로 하면 어떻겠냐고." 화면에 뜬 건 경쟁사 앱 캡처본. 3개. 다 다른 스타일. "이 느낌으로 가면 좋겠어요. 근데 우리만의 색깔도 있어야 하고." 우리만의 색깔. 이 단어 나오면 회의 30분 추가다. 대표님이 말했다. "디자인적으로 어때요? 최디자님." 준비 안 된 질문이다. 3분 전에 처음 본 화면이다. "일단... 세 개가 다 다른 방향인데, 저희가 가져갈 건 어떤 쪽일까요?" "다 섞어서요. A는 레이아웃이 좋고, B는 컬러가 괜찮고, C는 애니메이션이 마음에 들어서." 다 섞기. 불가능하다. 안 어울린다. 입 밖으로 나온 말. "넵. 한번 작업해보겠습니다." 오후 3시 51분 회의 끝났다. 49분 걸렸다. 결론: 세 가지 스타일 섞은 목업 3개 내일까지. 내일까지. 오늘 하던 작업은 언제 끝내지. 자리 돌아왔다. 노션 메모 봤다. "다음: 카드 컴포넌트, 인풋 필드" 기억이 안 난다. 50분 전 나는 뭘 생각하고 있었나. 피그마 파일 열었다. "_진행중_0247". 버튼이 놓여있다. 4가지 사이즈. 그렇지. 이거 하고 있었다. 근데 왜 하고 있었지. 다음 스텝이 뭐였지. 노션 다시 봤다. "카드 컴포넌트". 아. 버튼 끝나고 카드 할 예정이었다. 버튼은 끝난 건가. 아니다. 호버 상태 아직이다. 디스에이블 상태도. 마우스 올렸다. 손이 안 움직인다.오후 4시 20분 다시 시작했다. 버튼 호버 상태. 배경 어둡게. 10% 더 어둡게. 아니다. 5%. 자연스러워야 한다. 트랜지션 0.2초. 부드럽게. 10분 걸렸다. 오전 같았으면 3분이다. 머리가 회의실에 있다. 경쟁사 A, B, C. 섞어야 한다는 것. 내일까지. 집중이 안 된다. 슬랙 알림. 개발자 준호. "디자님 저번에 주신 버튼 패딩이요. 16px 맞죠?" "네. 상하좌우 다 16이요." "근데 이전 버튼은 좌우 12였는데, 바뀐 건가요?" "아... 오늘 수정한 거예요. 컴포넌트 통일하려고요." "아 그럼 이미 개발 들어간 부분도 다 수정해야 하나요?" 멈췄다. 이미 개발 들어갔다. 모르고 수정했다. "...제가 확인하고 다시 드릴게요." 창 닫았다. 한숨. 오전에 수정한 버튼. 개발 확인 안 하고 했다. 이제 되돌려야 하나. 아니면 개발자한테 수정 부탁해야 하나. 머리 아프다. 오후 5시 15분 컨텍스트 스위칭. 대학 때 배운 용어다. 컴퓨터가 여러 프로세스 동시에 처리할 때. 프로세스 전환하면서 생기는 오버헤드. 사람도 똑같다. 오전에 하던 작업. 머릿속 맥락. 다음에 뭐 할지, 왜 이렇게 만들고 있는지, 어떤 문제를 풀고 있는지. 다 있었다. 미팅 하나로 날아갔다. 돌아와서 복구하는 시간. 30분. 1시간. 그 시간도 생산성이다. 미팅 49분 + 복구 30분 = 79분. 1시간 19분 손해. 오늘 미팅 하나. 어제는 세 개였다. 평균 두 개씩이면 하루 2시간 반. 일주일이면 12시간 반. 한 달이면 50시간. 50시간이면 프로젝트 하나 끝낸다. 계산하니까 더 우울하다. 오후 6시 30분 오늘 한 일 정리. 완료:버튼 컴포넌트 4가지 사이즈 프라이머리 컬러 조정 타이포그래피 스케일 1차미완료:카드 컴포넌트 인풋 필드 호버/디스에이블 상태들추가된 일:경쟁사 벤치마킹 목업 3종 (내일까지) 개발 들어간 버튼 패딩 이슈 해결오전에 생각했던 "오늘 안에 끝낼 수 있다." 틀렸다. 50% 달성. 그나마도 급한 일 생겨서 내일 아침부터 다른 거 해야 한다. 남자친구한테 톡 왔다. "오늘 저녁 약속 7시 맞지?" 잊고 있었다. 완전히. "미안 오늘 야근해야 할 것 같아. 내일은 어때?" "또? 이번주만 벌써 두 번젠데." 할 말이 없다. 오후 7시 45분 경쟁사 앱 3개 열어놨다. 캡처 떴다. 노션에 정리 중. A 스타일: 미니멀, 여백 많음, 폰트 크고 굵음 B 스타일: 컬러풀, 그래디언트, 둥근 모서리 C 스타일: 애니메이션 많음, 인터랙션 풍부, 재미 요소 이걸 섞는다. 미니멀한데 컬러풀하고. 여백 많은데 애니메이션 풍부하고. 모순이다. 하지만 해야 한다. 내일까지. 새 피그마 파일. "긴급_경쟁사벤치_1204". 아트보드 3개. 시안 A: 미니멀 베이스 + 컬러 포인트 시안 B: 컬러풀 베이스 + 여백 확보 시안 C: 절충안 손이 움직인다. 오전만큼 빠르진 않다. 그래도 움직인다. 이게 디자이너다. 갑자기 바뀌는 우선순위. 예상 못한 요구사항. 컨텍스트 잃고 복구하고. 반복. 오후 9시 20분 시안 1개 완성. 2개 남았다. 배고프다. 편의점 갔다. 삼각김밥 2개, 바나나우유. 돌아오는 길에 개발팀 석준이랑 마주쳤다. 야근 중. "디자님도 야근이네요." "응. 내일까지 급한 거 있어서." "저도요. 배포 일정이 당겨져서." 웃었다. 쓴웃음. 우리 둘 다 오전엔 없던 일 하고 있다. 오후 11시 10분 시안 3개 완성. 노션에 업로드. 코멘트 달았다. "시안 A: 미니멀 중심, 컬러는 포인트로만 활용 시안 B: 컬러 적극 활용, 여백으로 밸런스 시안 C: 두 방향의 절충, 가장 무난함 개인 의견: C가 실현 가능성 높아 보입니다." 개인 의견 안 쓰면 "디자이너 생각은?" 이라고 물어본다. 미리 쓴다. 슬랙에 공유. "@대표님 @민수 내일 아침 확인 부탁드립니다." 파일 닫았다. 피그마 끄지 않았다. 내일 아침 수정 요청 올 거다. 오전 1시 30분 집 도착. 씻었다. 침대 누웠다. 핸드폰 봤다. 남자친구 톡. "고생했어. 내일은 일찍 끝나면 좋겠다." 미안하다. 말은 안 했다. 눈 감았다. 머릿속에 버튼이 보인다. 16px 패딩. #4A9AFF. 호버 상태. 경쟁사 시안 A, B, C. 내일 아침 슬랙. 수정 요청. 미팅 또 잡힐 것. 오전 작업 또 멈출 것. 이게 일상이다. 컨텍스트 스위칭. 복구. 반복. 적응한 건지 체념한 건지 모르겠다.오후 3시 미팅. 결국 10시간 일한다. 오전 2시간은 사라졌다. 내일도 똑같겠지.

개발자: '이거 구현 어려운데요' vs 디자이너: '근데 이게 꼭 필요한데...'

개발자: '이거 구현 어려운데요' vs 디자이너: '근데 이게 꼭 필요한데...'

오후 2시, 핸드오프 미팅 회의실에 들어갔다. 개발자 민준씨가 이미 앉아있다. "디자인 공유드립니다." 피그마 화면을 띄웠다. 30초 만에 나왔다. 그 말. "이거 구현 어려운데요." 아직 컴포넌트 설명도 안 했는데. 숨을 참았다. "어떤 부분이요?" "이 인터랙션이요. 스크롤하면서 헤더가 반투명해지면서 블러 들어가고, 동시에 높이도 줄어드는 거. 퍼포먼스 이슈 있어요." 3일 걸렸다. 이 인터랙션 하나에. 레퍼런스 10개 찾고, 프로토타입 5번 만들었다. 대표님 피드백도 3번 반영했다. "근데 이게 꼭 필요한데..." 내 목소리가 작아진다. 매번 그렇다.필요하다는 말의 무게 "왜 필요한데요?" 민준씨가 묻는다. 공격적이지 않다. 진짜 궁금한 거다. 이럴 때 당황한다. "사용자 경험이..." "구체적으로요?" 막힌다. '감각적이니까', '애플도 이렇게 하니까'는 이유가 안 된다. 개발자들한테는. "스크롤할 때 컨텍스트를 유지하면서도 콘텐츠 영역을 확보하려고요. 헤더가 줄어들면 사용자가 어디 있는지 알면서도 더 많은 정보를 볼 수 있잖아요." "그럼 그냥 숨기면 안 돼요? 더 간단한데." 아니지. 그건 아니야. "완전히 숨기면 네비게이션 잃어버려요. 다시 위로 가려고 할 때." "위로 스크롤하면 다시 나타나게 하면 되는데." "그것도 구현 어렵잖아요." 민준씨가 웃는다. "그것도 어렵긴 한데, 블러보단 낫죠."타협의 기술 "블러 빼면 되나요?" "투명도 애니메이션만 남기면 훨씬 가볍죠." 피그마로 돌아갔다. 블러를 뺐다. 30초 만에 끝났다. 3일 걸린 디테일이. "이 정도면?" "이건 할 만해요." 기분이 묘하다. 다 무너진 것 같으면서도, 뭔가 배운 것 같기도 하고. "근데 디자이너님." "네." "이 그라데이션은요. 8개 스탑이 꼭 필요해요? 3개면 안 돼요?" 화면을 봤다. 미묘한 그라데이션이다. 레이어 블렌드 모드도 썼다. Overlay에 Multiply 겹쳤다. "육안으로 구분 안 되는데." 민준씨 말이 맞다. "차이 나는데요." "디자이너님 눈에만요." 할 말이 없다. 맞는 말이니까. "3개로 줄일게요." "색상 코드만 주시면 제가 리니어 그라데이션으로 처리할게요." 또 배운다. 리니어 그라데이션이 퍼포먼스에 좋다는 걸. 피그마에서는 몰랐던 거다.꼭 필요한가 회의가 끝났다. 원래 디자인의 60%쯤 남았다. 블러 없어지고, 그라데이션 단순해지고, 애니메이션 타이밍도 조정했다. 내 방으로 돌아왔다. 피그마를 켰다. '핸드오프_최종.fig'를 '핸드오프_최종_최종.fig'로 저장했다. 원본 파일을 열었다. 블러 있는 버전. 예쁘다. 확실히 예쁘다. 근데 민준씨 말대로, 사용자가 알까. 블러가 있고 없고를. 그라데이션이 8스탑이고 3스탑이고를. 모를 거다. 아마. 그럼 이건 뭐지. 내가 3일 동안 한 건. 자기만족? 아니다. 그건 아니야. 디테일이 쌓여야 전체가 좋아지는 거니까. 근데 구현 안 되면 의미 없는 거니까. 다음 날 아침 슬랙이 왔다. 민준씨: "어제 헤더 구현 완료했어요. 스테이징 서버 확인해보세요." 링크를 눌렀다. 개발 서버가 떴다. 스크롤을 내렸다. 헤더가 줄어든다. 투명해진다. 블러는 없다. 그라데이션도 단순하다. 근데. 나쁘지 않다. 아니, 좋다. 생각보다 훨씬 좋다. 움직임이 부드럽다. 퍼포먼스 때문에 오히려 더 자연스럽다. 피그마에서 볼 때는 몰랐던 거다. 실제 디바이스에서, 실제 콘텐츠에서, 실제로 스크롤하면서 보니까. 민준씨한테 메시지를 보냈다. "좋은데요." "그죠? ㅎㅎ 블러 없어도 괜찮죠?" 괜찮다. 솔직히. "근데요." "네." "스크롤 속도 빠를 때 애니메이션이 좀 끊겨요." "아 그거요. 쓰로틀 걸어서 그래요. 성능 때문에." "디바운스는요?" "디바운스 쓰면 반응이 늦어져요." 또 배운다. 쓰로틀과 디바운스의 차이. "그럼 easing 커브를 조정하면 어떨까요? ease-out 말고 custom cubic-bezier로." "오. 그거 괜찮을 것 같은데. 값 알려주세요." 피그마로 갔다. 모션 섹션을 열었다. cubic-bezier(0.4, 0.0, 0.2, 1) "이거요." "오케이. 적용해볼게요." 3주 후, 배포 기능이 라이브됐다. 사용자 피드백이 들어오기 시작했다. "헤더 애니메이션 부드러워요." "스크롤 경험 좋아졌네요." 블러 얘기는 없다. 그라데이션 스탑 개수도. 당연하다. 애초에 모르니까. 근데 기분이 나쁘지 않다. 이상하게. 민준씨가 slack에 남겼다. "디자이너님, 이번 협업 좋았어요. 다음에도 잘 부탁드려요." "저도요. 많이 배웠어요." 진심이다. 블러 없어도 된다는 걸. 8스탑이 3스탑 돼도 된다는 걸. 완벽한 디자인보다 실제로 작동하는 디자인이 낫다는 걸. 근데. 어제 밤 새 프로젝트를 시작했다. 프로덕트 리스트 페이지. 카드에 hover하면 이미지가 확대되면서 블러가 들어간다. 손이 멈췄다. 민준씨 목소리가 들린다. "이거 구현 어려운데요." 블러를 뺐다. 그냥 scale만 넣었다. 마우스를 올려봤다. 심심하다. 다시 블러를 넣었다. 값을 줄였다. 8px에서 4px로. duration도 줄였다. 400ms에서 250ms로. 테스트했다. 나쁘지 않다. 이 정도면 민준씨도 할 만하다고 할 거다. 아마. 저장했다. '리스트_v1_개발고려.fig' 파일명이 웃긴다. '개발고려'. 예전엔 없던 접미사다. 근데 이제는 자연스럽다. 결국 디자인과 개발 사이. 완벽과 현실 사이. 이상과 타협 사이. 어디선가 만난다. 매번 다른 지점에서. "이거 구현 어려운데요." "근데 이게 꼭 필요한데..." 이 대화는 계속된다. 앞으로도. 근데 이제는 안다. '꼭 필요한 것'의 정의가 계속 바뀐다는 걸. 타협이 포기가 아니라는 걸. 함께 만드는 게 혼자 만드는 것보다 낫다는 걸. 민준씨가 또 메시지를 보냈다. "디자이너님, 다음 주 새 기능 핸드오프 미팅 잡을까요?" "네. 근데 이번엔 제가 먼저 여쭤볼게요." "뭐요?" "구현 가능한지요." "오. 좋은데요. 그럼 초안 공유해주세요. 미리 볼게요." 피그마 링크를 보냈다. 댓글 권한도 줬다. 1시간 뒤, 댓글이 달렸다. "이 부분 구현 어려울 것 같은데, 이렇게 바꾸면 어떨까요?" 대안 제시였다. 비판이 아니라. 클릭했다. 민준씨가 직접 수정한 버전이다. 나쁘지 않다. 오히려 더 나을 수도. "좋은데요. 이걸로 갈게요." "ㅎㅎ 그럼 이번엔 쉽겠네요." 회의실이 아니라 피그마에서 만났다. 싸우기 전에 협력했다. 이게 맞다. 이게. 6개월 전과 지금 6개월 전에는 몰랐다. 개발자가 '어렵다'고 하면 내 디자인을 무시하는 줄 알았다. 내가 '필요하다'고 하면 고집부리는 걸로 보일까 봐 걱정했다. 핸드오프 미팅이 두려웠다. 내 디자인이 깎여나가는 시간이니까. 지금은 안다. '어렵다'는 '불가능하다'가 아니다. '같이 다른 방법 찾자'는 뜻이다. '필요하다'고 말해도 된다. 근거만 있으면. 핸드오프는 협상이 아니다. 협업이다. 민준씨도 변했다. 요즘은 먼저 물어본다. "이거 왜 이렇게 디자인하셨어요?" 궁금해서 묻는 거다. 트집 잡으려는 게 아니라. 나도 묻는다. "이거 구현하려면 뭐가 필요해요?" 알고 싶어서다. 이해하려고. 어제 점심 민준씨랑 같이 밥 먹었다. "요즘 디자인 공유하실 때 구현 난이도 표시해주시잖아요." "네. 도움 돼요?" "많이요. 우선순위 정하기 쉬워요." 빨강, 노랑, 초록으로 표시한다. 빨강: 구현 어려움, 대안 논의 필요 노랑: 구현 가능하나 시간 필요 초록: 쉬움 "근데요." "네?" "가끔 빨강인데 꼭 필요한 거 있잖아요." "그죠." "그거요. 말씀해주세요. 왜 필요한지만 설명해주시면, 방법을 찾아볼게요." 민준씨가 웃는다. "힘들어도요?" "힘든 건 괜찮아요. 의미 있으면." 의미. 그 단어가 좋다. "저도요. 쓸데없는 디테일은 이제 안 넣어요." "쓸데없는 거 없던데요?" "있었어요. 많이." 둘이 웃었다. 지금 이 순간 피그마를 켰다. 새 프로젝트. 빈 캔버스. 마우스가 멈췄다. 예전엔 이랬다. '일단 최고로 예쁘게. 나중에 조정하면 되지.' 지금은 다르다. '실제로 만들어질 디자인. 처음부터 현실적으로.' 근데 타협이 아니다. 더 나은 디자인이다. 구현될 수 있는 디자인. 사용자가 실제로 경험할 디자인. 개발자와 함께 만들어갈 디자인. 컴포넌트를 만들기 시작했다. 이번엔 블러를 넣지 않았다. 처음부터. 대신 색상 대비를 높였다. 타이포그래피에 집중했다. 슬랙이 울렸다. 민준씨: "다음 주 핸드오프 기대되네요." 나도 기대된다. "이거 구현 어려운데요." 그 말이 이제는 반갑다. 함께 풀어갈 문제니까. "근데 이게 꼭 필요한데..." 이 말도 이제는 자신 있다. 이유를 설명할 수 있으니까.타협은 포기가 아니다. 함께 더 나은 답을 찾는 과정이다. 오늘도 핸드오프 미팅에서 배운다.