사내 프엔 개발자한테 화나는 점이 있는데 정보
사내 프엔 개발자한테 화나는 점이 있는데본문
제가 기획/디자인을 해서 넘기는데
넘겨도 항상 디자인이 똑같이 나오지 않더라고요
디자인값/수치/색상 등 가이드를 짜서 넘겨주는데
항상 임의로 지정되어 있고, 다 다르게 해서 넘어옵니다
왜 기획/디자인이 같게 나오지 않냐 물어보니
부트스트랩에서 지원을 하지 않거나 부트스트랩에 없거나 부트스트랩 자체 기본값이어서 변경할 수 없다 하는데 황당해서 글써봅니다 ;;
이게 프엔이 원래 이런 겁니까? 아님 제가 너무 꽉 막힌 겁니까?
0
베스트댓글
부트스트랩을 사내 프레임워크로 사용하기로 했다면 그걸 기반으로 디자인 설계가 따라 가야죠.
그렇다고 부트스트랩의 스타일만 사용할 수는 없죠. 여백, 폰트 및 특히 컬러는 사이트의 주요 포인트이니 컬러셋은 따로 커스텀하게될테고요.
기획/디자인이 이런 반응형 시스템을 적극 이해하고 노력해야하는 부분도 분명히 존재합니다. 아주 옛날옛적에나 1px 가지고 별 지랄들 떨었지 다영한 기기와 브라우저, 반응형 이후에는 기획/디자인이 이런 시스템을 이해하지 못하고 디자인하면 프론트엔드는 죽어나고, 유지보수 개판되는 코드가 만들어 지게됩니다.
비슷해 보이는 곳에 여백이 어디는 14px 어디는 12px 어디는 11px 이따위로 디자인해주고 안맞는다 따지면 미친놈입니다. 요소에 따라 이런 부분이 필요할 수도 있지만 디자인의 쓸데없는 고집일 뿐 대부분 융통성이 통하는 것들이죠.
프론트엔드 개발자도 부트스트랩의 테마 등을 활용해 기반을 크게 건드리지 않으면서 충분히 커스텀할 수 있죠.
가만 컬러셋이나 여백 등 어느정도 규격이 정해져있는 프레임워크를 사용하는 것이고, 컬러는 베이스 컬러를 기반으로 50, 100, 200, ..., 900 이런 10개 단위로 자동으로 바리에이션이 만들어지기 때문에 디자이너도 이런 특성을 이해하고 자동으로 만들어지는 컬러 중에서 골라 사용하는게 좋습니다. 정말 커스텀이 필요한 부분은 최소한으로 줄이고 꼭 필요한 부분은 해당 컬러로 적용하라고 명시하거나 컬러팔레트를 조정해보는 것을 고려하는게 좋습니다.
https://getbootstrap.com/docs/5.0/utilities/colors/#utilities-api
되냐 왜안되냐를 따지지 마시고 시스템을 이해하고 사용해야죠. 디자인이나 프론트나 둘 다 시스템을 이해하고 사용하세요.
컬러팔레트 등 조정은 가능하고 둘다 이런 시스템을 이해하고 디자이너가 컬러팔레트를 확인하여 베이스 컬러를 지정해주거나 필요하다면 바리에이션 컬러도 커스텀 해줄것을 요청하고, 프론트는 그 값을 몇군데만 설정하면 됩니다.
컬러팔레트를 조정하라는 것이지 요소마다 다 컬러를 스타일로 지정하라는게 아닙니다.
컬러도 어디는 ddd, ddf, dff 이딴식으로 구분도 안되는 미세한 컬러 변화도 부트스트랩 바리에이션에는 없고 사람이 시각적으로 구분도 불가능한 차이로 색상으로 태크거는 미친짓은 지양하고 컬러팔레트에서 유사 색상을 고르는게 맞습니다.
1px, 컬러코드 한자리 맞추라는 쪽이 또라이고 미친놈이고 회사의 업무효율을 깍아먹어 회사의 재산을 낭비하는 배임행위입니다.
프론트도 이런 부트스트랩의 커스텀 기능을 활용 못하고 안된다는 말만하면 그놈도 미친놈이고요.
서로에게 미친놈이 되지 않도록 공부해야죠.
원래는 1px 단위까지 똑같이 맞추는 게 퍼블리셔 업무이긴 한데 마감 기한이 빡빡하거나 하면 디테일이 떨어질 수 있다고 생각합니다. 계속 해서 문제가 생긴다면 기한을 좀 여유 있게 잡는 것도 방법일 수 있을 것 같습니다.
저도 프엔인데 포토샵 으로 px 다 보면서 작업하고, bootstrap 쓰지만 클래스를 더 줘서 css에서 디자인대로 변경합니다.
프엔분이 말도안되는 소리를 하시는것 같은데.. 지원을 하지 않거나 자체 기본값이어서 변경할 수 없다 라니 다 되는건데 개인적인 생각으로는 귀찮아서 그냥 프레임워크대로 쓰는것으로밖에 안보여요.
댓글 19개
부트스트랩을 사내 프레임워크로 사용하기로 했다면 그걸 기반으로 디자인 설계가 따라 가야죠.
그렇다고 부트스트랩의 스타일만 사용할 수는 없죠. 여백, 폰트 및 특히 컬러는 사이트의 주요 포인트이니 컬러셋은 따로 커스텀하게될테고요.
기획/디자인이 이런 반응형 시스템을 적극 이해하고 노력해야하는 부분도 분명히 존재합니다. 아주 옛날옛적에나 1px 가지고 별 지랄들 떨었지 다영한 기기와 브라우저, 반응형 이후에는 기획/디자인이 이런 시스템을 이해하지 못하고 디자인하면 프론트엔드는 죽어나고, 유지보수 개판되는 코드가 만들어 지게됩니다.
비슷해 보이는 곳에 여백이 어디는 14px 어디는 12px 어디는 11px 이따위로 디자인해주고 안맞는다 따지면 미친놈입니다. 요소에 따라 이런 부분이 필요할 수도 있지만 디자인의 쓸데없는 고집일 뿐 대부분 융통성이 통하는 것들이죠.
프론트엔드 개발자도 부트스트랩의 테마 등을 활용해 기반을 크게 건드리지 않으면서 충분히 커스텀할 수 있죠.
가만 컬러셋이나 여백 등 어느정도 규격이 정해져있는 프레임워크를 사용하는 것이고, 컬러는 베이스 컬러를 기반으로 50, 100, 200, ..., 900 이런 10개 단위로 자동으로 바리에이션이 만들어지기 때문에 디자이너도 이런 특성을 이해하고 자동으로 만들어지는 컬러 중에서 골라 사용하는게 좋습니다. 정말 커스텀이 필요한 부분은 최소한으로 줄이고 꼭 필요한 부분은 해당 컬러로 적용하라고 명시하거나 컬러팔레트를 조정해보는 것을 고려하는게 좋습니다.
https://getbootstrap.com/docs/5.0/utilities/colors/#utilities-api
되냐 왜안되냐를 따지지 마시고 시스템을 이해하고 사용해야죠. 디자인이나 프론트나 둘 다 시스템을 이해하고 사용하세요.
컬러팔레트 등 조정은 가능하고 둘다 이런 시스템을 이해하고 디자이너가 컬러팔레트를 확인하여 베이스 컬러를 지정해주거나 필요하다면 바리에이션 컬러도 커스텀 해줄것을 요청하고, 프론트는 그 값을 몇군데만 설정하면 됩니다.
컬러팔레트를 조정하라는 것이지 요소마다 다 컬러를 스타일로 지정하라는게 아닙니다.
컬러도 어디는 ddd, ddf, dff 이딴식으로 구분도 안되는 미세한 컬러 변화도 부트스트랩 바리에이션에는 없고 사람이 시각적으로 구분도 불가능한 차이로 색상으로 태크거는 미친짓은 지양하고 컬러팔레트에서 유사 색상을 고르는게 맞습니다.
1px, 컬러코드 한자리 맞추라는 쪽이 또라이고 미친놈이고 회사의 업무효율을 깍아먹어 회사의 재산을 낭비하는 배임행위입니다.
프론트도 이런 부트스트랩의 커스텀 기능을 활용 못하고 안된다는 말만하면 그놈도 미친놈이고요.
서로에게 미친놈이 되지 않도록 공부해야죠.
@jihan? 제가 처음부터 부트스트랩에 관한 내용을 전달받고 가이드라인을 줬다면 거기에 맞게 했을 텐데 따로 전달받지 못한 상태에서 작업을 했으니, 그 상태에서 부트스트랩 얘기를 하니 이해도 안 되고 화도 많이 났는데 말씀주신대로 융통성있게 넘어가야 할 부분도 분명히 있네요. 다만, 명백히 '이렇게 해 달라'고 표시한 부분도 부트스트랩에 없다고 넘어가 버리는 걸 수시로 듣고 있으니 답답하네요. 조언 감사합니다.
@와기 허허. 협의되지 않은 프레임워크에서 된다안된다는 그건 프론트엔드 문제죠.
관련자들 모여서 논의해야하는 사안인 것같네요.
그래도 아주 사소한 차이는 융통성은 필요합니다. 디자인 시스템을 갖추고 사용하는 것을 권장합니다. 부트스트랩도 그 방법 중 하나입니다.
하지만 이 사안은 부트스트랩 사용을 정한 자가 업무협의 없이 정한거라면 그건 문제죠. 이거는 협의하여 정해야죠.
어쨌든 디자인시스템을 갖추는 것을 권장합니다. '디자인 시스템'으로 검색해서 살펴보면 대부분 비슷한 내용으로 설명된 내용을 볼 수 있을겁니다.
디자이너도 프론트엔드 개발자도 1px의 예술을하는 사람이 아니고 결과물을 내놔야하는 일꾼일 뿐이죠. 생산성을 올릴수 있는 방법을 찾아야죠.
@jihan? 근본적인 문제가 협의되지 않은 프레임워크 사용이었다니, 속 타네요... 조언 감사합니다. 디자인시스템은 제가 늘 만들어서 전달해도 반영이 안 되네요...
원래는 1px 단위까지 똑같이 맞추는 게 퍼블리셔 업무이긴 한데 마감 기한이 빡빡하거나 하면 디테일이 떨어질 수 있다고 생각합니다. 계속 해서 문제가 생긴다면 기한을 좀 여유 있게 잡는 것도 방법일 수 있을 것 같습니다.
@부산곰돌이 기한도 걸릴 수 있겠네요... 조언 감사합니다.
퍼블리셔가 따로 필요하시겠네요.
@밤비1221 프엔 개발자분이 원래 디자인, 퍼블리싱을 하셨던 분이라... 기대를 했는데 너무 기대가 컸던 것 같습니다.
저도 프엔인데 포토샵 으로 px 다 보면서 작업하고, bootstrap 쓰지만 클래스를 더 줘서 css에서 디자인대로 변경합니다.
프엔분이 말도안되는 소리를 하시는것 같은데.. 지원을 하지 않거나 자체 기본값이어서 변경할 수 없다 라니 다 되는건데 개인적인 생각으로는 귀찮아서 그냥 프레임워크대로 쓰는것으로밖에 안보여요.
@야채킴 솔직히 저도 귀찮아서 커스텀하지 않는구나... 라는 생각은 늘 들었습니다. 사내에 그분 혼자 프엔이기도 하고, 제가 너무 빡빡한가라는 생각도 많이 들었구요. 그런데 늘 근본적인 문제가 해결되지 않고, 부트스트랩 염불만 외니 화가 나더라구요. 상사는 나몰라라하고 있고... 하도 답답해서 쓴 글인데, 솔직한 의견 주셔서 감사합니다. ㅎㅎ
부트스트랩으로만 작업하기로 약속이 되어있는거면
디자인 자체를 부트스트랩 디자인에 맞춰 할 필요가 있고,
부트스트랩을 이용하면서 자체 디자인을 첨가해도 되는 거라면
프엔분이 귀찮아서 그런 것 같기도 하네요...
저도 디자이너라서 제가 만든대로 안되어있으면 겁나 빡칩니다 ㅠ ㅠ
그냥 내가 코딩하고 말지...!!!
모던 JS 측은 tailwindcss 를 많이 쓰는 분위기인 듯 합니다요... (지나가다 뻘글 ...) : )
힘내세요
전 제가 기획하고 디자인하고 프엔까지 하는데요(작은 중소기업이라 ㅋㅋ) 부트스트랩 기반이라도 css에서 수정하거나 추가할 수 있어요.
무리한 디자인을 요구하는게 아니라면
그 프엔은 실력이 없거나 게으르거나 둘 중 하나 같네요. 둘다 문제긴 하죠 ㅎㅎ
"부트스트랩에서 지원을 하지 않거나 부트스트랩에 없거나 부트스트랩 자체 기본값이어서 변경할 수 없다"
말도 안됩니다. 부트스트랩은 SCSS를 사용해서 확실히 커스텀하기 쉽습니다. 황당하네요...
"부트스트랩에서 지원을 하지 않거나 부트스트랩에 없거나 부트스트랩 자체 기본값이어서 변경할 수 없다 하는데 황당해서 글써봅니다 ;;"
말도 안되는 이야기입니다.
지원 안하면 만들면 되고 기본값이면 다시 선언하거나 기본 값 변경하면 됩니다.
열심히 하셔서 더 잘하는 사람이 있는 곳으로 이직하셔요~
저도 왠만하면 다 맞추긴 합니다.
요즘은 Figma 로 결과 받아서 Figma 에 나온 CSS 그대로 복붙해서 사용해요 ㅎㅎ
그럼 결과가 동일하게 나오거든요
아래 우주용사님 글과 비슷한 주제인 듯 합니다. ^^
