소통도 실력이다.

2017년 기준 전세계 웹사이트는 12억개가 넘었다. 워드프레스나 윅스, 스퀘어스페이스 등의 플랫폼을 이용하여 템플릿으로 만들었더라도 저 많은 사이트를 누군가는 디자인을 했고, 개발을 했다. 그 과정에서 수많은 시행착오를 겪으며 디자이너와 개발자 사이에서 막힘이 있었을 것이다. 내 경험과 주변 디자이너, 퍼블리셔, 프론트앤드 개발자들의 얘기를 듣고 웹 개발되는 과정에서 생기는 불화에 대해 가볍게 작성해본다. 개발자와 퍼블리셔를 사회적 직군으로 바라봐 나누는 사람도 있지만, 애매해서 그냥 개발자로 묶었다. 인테리어 디자이너와 웹디자인, 편집디자이너가 다 다른 분야지만 그냥 디자이너로 묶는 것처럼… 개발부심은 잠시… 

디자이너와 개발자의 흔한 대화 중에서…

상황 01

디자이너 : “저 자간 행간 조절은 왜 안됐나요? PSD 상에서는 다 상세값을 설정 했었는데…”
개발자 : “그거 적용하려면 좀 걸려요… 저건 맨 마지막에 시간나면 처리할게요~”

상황 02

디자이너 : “이 부분 천천히 스스륵 나오게해주세요.”
개발자 : “그게 뭐에요? 좀 더 정확한 설명 부탁드려요~”
디자이너 : “잠시만요 레퍼런스 보여드릴게요…(비핸스나 드리블로 본 GIF이미지 전송)”

개발자 : “저기요… 이거 완전 판타지에요…”

상황 03

디자이너 : “페이지 이동간에 자연스럽게 전환시켜주세요. 페이지 트랜지션 애니메이션이요~“
개발자 : “그건 설계 단에서의 문제고 AJAX 비동기식 기술을 사용해야되는거라서 @#$% 안돼요~”
디자이너 : “비핸스나 드리블보면 요즘 트랜드고, Awwward에서 올라온 사이트 보면 다 되던데요?”
개발자 : “부들부들…(너가 만들던가)”

상황 04

디자이너 : “이 맵 부분에서 제가 드린 UI랑 똑같이 커스터마이징이 됐으면 좋겠어요.”
개발자 : “구글 맵 API로 작업 중인데 한국 특성상 맵이 이미지 처리되어있어서 해외 맵처럼 커스터마이징이 안돼요… ”

상황 05

디자이너 : “폰트 컬러가 제가 디자인한거랑 왜 다른가요?”
개발자 : “웹표준에 안맞아서 맞추다보니 어쩔 수 없이 바꿨어요.”

이 외에도 저런 류의 대화는 수 없이 많다. 웹 뿐만아니라 앱 개발시까지 합치면 하루 종일 나열해도 할 수 있을 것 같다. 그러나 여기서 누가 옳고 그름은 없다. 누구나 자기 기준에서 생각하기에. 설득을 하려면 상대방의 입장과 그들의 언어를 사용해야 대화가 된다.

정말 개발적인 이슈, 예로 AJAX기술이나 구글 맵 API 제약사항 등 디자이너가 알기 어려운 내용들은 몰라도 되지만
적어도 웹 디자인에 대한 얘기를 하는데 헤더, 푸터, 캐로셀이 뭔지 페이지네이션 등 기본적인 기능과 웹 표준은 알아야 대화가 가능하지 않을까?

지피지기면 백전불태

손뼉 치면 소리 나듯이 자주 시끄러운 팀은 이유가 있다. 상대 직군에 대한 이해력 없이 본인의 생각만 주야장천 얘기할 때 시끄러워진다.

‘지피지기면 백전불태(百戰不殆)’다.

적을 알고 나를 알면 백 번 싸워도 위태롭지 않다는 뜻으로, 남을 이기기 위함이 아니라 남을 설득해서 내가 원하는 방향으로 끌고 가거나 공격에 대처하는 방법을 아는 것이 중요하다. 즉, 각 직군에 대한 이해도가 우선적이다.

개발자 (Developer)

기능 구현에 우선순위를 둔다. 콘솔 창에 뜨는 오류 없애는 디버깅 작업이 1순위이다. 잘 작동하게 하는 것뿐 아니라 눈에 안 보이는 뒤단에서 효율적으로 프로그래밍하는 것에 시간을 많이 들인다. 작업 중에 옆에서 디자이너가 “이거 2px 만 더 옆으로 옮겨주세요. 폰트 크기 1dp씩만 키워주세요. 중앙 정렬 지금 보니 별로네요.. 좌측정렬로 수정해주세요.” 등등의 요구를 하면 몇 만 줄되는 코드 속에서(프로젝트 규모에 따라 다름) 해당 부분을 찾는 행위로 스트레스다. 수정하는 데는 범위에 따라 다르겠지만 수정하기 쉬운 일이라도 그게 중요한 부분이 아니기 때문에 거절하는 경우도 많다.

또한, 아무리 마이크로 인터렉션이 중요해졌다 해도… 개발자들에겐 그저 늘어난 일로 느낄 뿐이다. GUI, 인터렉션에 관심이 많아 디자이너의 요구를 완벽하게 구현해줄 개발자분들 찾기는 하늘에서 별 따기다. 충분한 기한과 여력이 되면 점점 발전시켜나가는 게 좋지만 그런 상황이 아니라면 과한 욕심은 버리는 게 좋다.

디자이너 (Designer)

심미적인 것에 항상 취해있으며 ‘1px’에도 민감하다. 1px이 삐져나가면 어딘가 불편하고 자간 행간이 안 맞으면 글 읽기조차 싫어진다. 트렌드에 민감해서 미니멀, 플랫, 마이크로 인터렉션 등 본인의 서비스에 입히고 싶은 욕구가 강하다. 1년 전에 개발된 본인이 다니는 회사의 서비스 디자인이 트렌디하지 못하다고 느껴지면 갈아엎고 싶어진다…

코드에 익숙하지 않은 디자이너에게는 개발자와의 소통에서 당연히 불리하다. 그러나 본인이 생각하기에 이것만은 꼭 지켜서 해줘야 한다는 기준이 있다면 GUI가 어떤 방식으로 퍼블리싱 되는지에 대해 어느 정도 이해하는 것이 좋다.

이게 쉬운건가 어려운건가?

개발자 입장에서 쉬운 것과 디자이너 입장에서 쉬운 것은 다를 수 있다.규칙적인 속성값 수정은 쉽다. 예를 들어 “리스트 형식의 물체 사이 간격을 20px에서 40px로 수정해주세요.” 이런 건 쉽다. 해당 클래스에 간격 CSS 한 줄만 수정하면 된다.

*Class 란 Html을 그룹으로 묶어서 스타일을 지정할 때 쓰는 선택자 이름

규칙적인 레이아웃 / 불규칙적인 레이아웃 (출처 : Pinterest)

불규칙한 레이아웃 수정은 어렵다. 어렵다기 보다 손이 많이 간다. 반응형으로 제작시 % 나 EM, REM 단위로 제작하기 때문에 일부 수정 시 나머지 부분도 동시에 수정해야 된다. 또한, 초반 작업시 퍼블리셔가 CSS(SCSS,SASS)로 어느 정도 스타일 가이드를 잘 정리해놨다면 전체적인 수정도 효율적으로 가능하다. 이건 어디까지나 잘 정리된 경우에만…

01. 자간, 행간, 어간 조절은 쉽나?

정말 쉽다. 절대 며칠씩이나 걸릴 일이 아니다.자간 조절은 ‘letter-spacing : 값(value)’ 한 줄 추가하면 적용된다. px, em 등의 단위를 사용해서 조절하면 된다. 어간 조절은 ‘word-spacing’ 사용하고 행간 조절은 ‘line-height’을 사용한다. 백번 양보해서 자간은 뒤로 미루더라도 가독성을 위해 행간 조절은 꼭 해야 맘편히 잠잘 수 있다. 본문에 p태그를 사용했다면 아래처럼 사용하면 해당 본문글의 행간이 조절된다. 참고로 line-height에서 1.5는 150%이다. 개인적으로 본문 행간은 160~200%를 사용하고 헤드카피는 120~150%정도를 사용한다.

p{
/* letter-spacing : -0.5px; 자간 샘플
word-spacing : -0.05em; 어간 샘플 */
line-height : 1.8;
}

어렵다고 하면 아래 내용을 카톡으로 보내주자, 저거 한 줄이면 된다고

자간(글자 사이의 간격) letter-spacing

어간(단어 사이의 간격) word-spacing

행간(줄 간격) line-height

02. 애니메이션 효과 시간 조절은 쉽나?

Case by case… 체이닝의 개념으로 연속적인 애니메이션이 들어가야 되면 복잡해지지만 간단하게 물체 클릭 시 혹은 마우스 오버시 스르륵~ 나오는 걸 원한다면 당당히 요구하자.단순 애니메이션 시간만 조절하는 거라면 ‘transition’을 사용하면 된다. 속도가 느리다던가 너무 빠르다고 느낄 때 조절하면 된다. 1s가 1초, 0.5s는 0.5초다. 영상 작업을 해본 경험이 있다면 1초가 얼마나 긴 시간인지 알 수 있다. 개인적으로 0.3~0.5초가 적당한 것 같다. 물론 좀 더 복잡하고 연속적인 애니메이션 연결이 필요할 때 Css보다 Jqeury animate가 더 편한 경우도 있다.

.motion{
transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.motion2{
transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
}

-moz-, -o- 이렇게 앞에 붙는 것은 브라우저 호환성에 대한 부분을 해결해주기 위한 코드다. 크롬에서는 잘 작동하는데 익스플로러나 파이어폭스에서 안된다면 저 코드를 넣어주면 된다. 뒤에 ‘ease-in-out’은 에펙툴에서도 볼 수 있는데, 시간 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시한다. 이동 시간에 대한 텐션 조절로 수많은 값들이 있다.

출처 : easings.net/ko

참고하면 좋은 사이트

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

http://easings.net/ko

03. 겹쳐진 물체를 앞으로 보내는 방법은 쉽나?

포토샵에 레이어 개념이 있는 것처럼 웹코딩에도 레이어 개념인 ‘z-index’를 활용해서 z축의 레이어 깊이를 조절할 수 있다.

앞에 있어야할 내용이 뒤에 가려져 있다면 당연히 앞으로 꺼내야한다. 편집 느낌의 겹쳐지는 웹디자인이 많이 보이는데 그때 사용하면 된다. z-index 속성값에 들어가는 숫자로 앞뒤를 구분한다. z-index를 사용하면 앞으로 보낼 수 있다. 기본값은 0이다. -2, 10, 9999 등 사용할 수 있다.

.box1 {
z-index: 1;
}
.box2 { 
z-index: 10; 
}

가장 쉬운 일은

소통에서 가장 효율적인 방법은 직접 코딩을 공부하는 것뿐이다. 호랑이를 잡으려면 호랑이굴을 들어가야 되는 법.생활코딩에 올라온 강연 영상 틈틈이 보고 코드 짜보면 한 달이면 코드를 보는 눈이 달라진다.

생활코딩 : https://opentutorials.org/course/4

생각날 때마다 추가할 예정…

#Coding#Css#Design#Designer#HTML#Programming#Publishing#Web
신연석

디자인, 개발, 기획, 비즈니스에 관심이 많은 디자이너입니다.
값진 경험과 그 경험에서 깨달은 것을 기록한 공간입니다.

Send Email