웹 디자이너는 코딩하는 방법을 알아야합니까?


31

프론트 엔드 및 백엔드 아키텍트 인 웹 개발자로서 저는 많은 다른 디자이너들과 함께 일하고 때로는 기본 CSS 및 HTML에서 디자인을 달성하는 방법에 대한 생각이없는 디자인 컴포지트와의 작업이 좌절감을 느낍니다. 반면에 개발자는 모든 디자인에서 코드를 생성 할 수있을 것으로 기대됩니다.

웹 디자이너는 기본적인 최신 CSS 및 HTML 기술을 알아야합니까? 둥근 웹 디자이너에게 왜 이것이 중요한가?

몇 가지 일반적인 생각 :

  • 프런트 엔드 웹 개발자는 모든 디자인을 코딩 할 수있는 기술을 갖추고 있어야합니다.
  • 웹 디자이너는 사용자가 실제로 디자인과 상호 작용하는 방식을 이해해야합니다.
  • 디자인 샵은 오히려 디자이너가 디자인하고 모든 코딩을 개발자에게 맡길 수 있습니다.

5
웹 디자이너가 아닌 그래픽 디자이너입니다.
Jin

매체가없는 디자이너는 악기가없는 작곡가와 같습니다.
Adam

내 경험에 따르면 웹이나 소프트웨어 주위의 '프런트 엔드'는 UI, GUI 또는 인터페이스를 의미합니다. 이것이 당신이 의미 한 의미입니까?
user179700

답변:


23

웹 디자이너는 기본적인 최신 CSS 및 HTML 기술을 알아야합니까?

예.

둥근 웹 디자이너에게 왜 이것이 중요한가?

basic 단어를 사용했기 때문에 "예"라고 대답했습니다 .

건축가가 물리학 및 재료 과학에 대해 알아야하는 것과 마찬가지로 인쇄 디자이너는 CMYK 인쇄 프로세스에 대해 알아야하고 패션 디자이너는 직물에 대해 알아야하는 것과 마찬가지로 웹 디자이너는 기본 HTML 및 CSS 기술을 알아야합니다.

당신이 모르는 경우 어떤 CSS와 HTML 기술에 대한 당신은 "웹 디자이너"자신을 호출 할 수 없습니다. 당신은 단순히 예술가 또는 무언가입니다.

당신의 생각에 대한 의견 :

프런트 엔드 웹 개발자는 모든 디자인을 코딩 할 수있는 기술을 갖추고 있어야합니다.

그릇된. 이것은 지나치게 단순화 된 것입니다. 어떤 것은 웹으로 잘 번역되지 않습니다. 지원해야하는 특정 플랫폼 또는 화면 크기에서 일부 디자인이 분리되거나 작동하지 않을 수 있습니다.

웹 디자이너는 대상 및 성능 요구 사항에 따라 제한 사항을 알아야합니다. CSS와 HTML을 알고있는 디자이너는 디자인을 조정하는 방법을 알고 있으므로 기본 코드를 가능한 한 반응적이고 효율적으로 만들 수 있습니다.

웹 디자이너는 사용자가 실제로 디자인과 상호 작용하는 방식을 이해해야합니다.

완전히 다른 학문 인 UX 디자인에 대해 설명했습니다 . 사용자 경험 디자인에는 그래픽 디자인 측면이 포함되지만 CSS 또는 HTML과는 거의 관련이 없습니다.

다재다능한 웹 디자이너는 UX 디자인에 익숙해야하지만 UX 전문가와 공동 작업하는 것도 일반적입니다.

디자인 샵은 오히려 디자이너가 디자인하고 모든 코딩을 개발자에게 맡길 수 있습니다.

이것은 부분적으로 사실 일 수도 있지만 전부는 아닙니다. 컨텐츠 관리 시스템에서 널리 사용되는 패러다임 중 하나는 MVC (모델 / 뷰 / 컨트롤러)입니다. 많은 디자인 샵은 디자이너가 HTML / CSS 코딩에 어느 정도 익숙해 지길 원하기 때문에 개발자는 모델 / 컨트롤러에 중점을 두면서 컨텐츠 프레젠테이션 ( "보기")에 집중할 수 있습니다.

일부 상점에서는 단순히 그래픽 요소에 초점을 맞추고 픽셀을 밀고 다니는 그래픽 아티스트를 사용하지 않지만 웹 디자이너는 아닙니다. 대규모 웹 사이트에는 그래픽 아티스트, 웹 디자이너, UX 디자이너, 웹 개발자 및 데이터베이스 전문가가 모두 협력하여 완성 된 웹 사이트를 제작할 수 있습니다. 소규모 사이트를 구축하는 프리랜서는 모든 분야에서 문제가 발생하여 웹 디자이너 / 개발자라고 부를 수 있습니다.


17

웹 디자이너는 코드의 작동 방식과 코드의 기능을 이해해야하며, 인쇄 디자이너는 용지의 잉크 모양과 용지가 접히거나 잘릴 수있는 방법을 이해합니다. 모든 디자이너는 선택한 매체의 한계와 장점을 이해해야합니다.

웹 디자이너가이 드롭 데드 화려한 사이트를 만드는 경우 코딩의 기본 사항을 배우거나 프로세스의 몇 가지 지점에서 코더와 함께 화려한 사이트를 얻을 수 있는지 확인하는 것이 좋습니다. 따라서 웹 디자이너는 최소한 코드 에 대해 알아야한다고 말하고 싶습니다 .

HTML / CSS를 사용하여 웹상에서 인쇄 할 수있는 모든 것을 정확하게 재현 할 수 있다는 것과 같은 방식으로 "개발자가 무엇이든 코딩 할 수있다"고 말하는 것이 바람직하다고 생각합니다.


1
+1, 특히 " 코드 에 대해 알아야 합니다". 나는 코드를 작성할 수 없지만 매체를 이해하고 개발자의 말을 존중할 정도로 개방적인 사람들과 함께 일했습니다. 항상 아주 잘 작동했습니다.
페카는 GoFundMonica 지원

6

Lauren, ghoppe 및 Farray는 모두 진정 효과가 있으므로 나는 그들이 말한 것을 다시 말하지 않을 것입니다. 실용적으로, 명시적이고 암시적인 질문에 대해 다른 의견을 제시하겠습니다.

개발자에게 가장 좋은 방법은 Gutenberg가 첫 번째 유형을 자른 후 프린터가 드럼을 때리는 방식과 동일합니다. 즉, 디자이너가 처음부터 프로젝트에 참여해야 한다고 주장 하십시오. 단일 픽셀이 화면에 닿기 전에 토론에 참여해야합니다.

특이한 사항이 포함 된 인쇄 디자인 프로젝트를 진행할 때 프린터 및 바인더 리 담당자와 즉시 대화하고 있습니다. 그들은 내가하는 것보다 그들의 기술에 대해 더 많은 것을 알고 있습니다. 그래서 나는 그들이 처음부터 참여하도록 내 사업을 만듭니다. 불행히도, 특히 디자이너가 학교 밖에서 신선하고 아직 현실 세계에 익숙하지 않은 경우의 초기 디자이너는 때로는 그 간단한 단계를 무시하고 생명 구명없이 깊은 kimshee로 끝납니다.

블로그, 포럼, 고객 및 프로젝트 관리자, 지역 학교 및 사용자 그룹 및 범위 내의 모든 디자이너와의 캠페인 : "디자인을 시작하기 전에 개발자와상의하십시오!"

프리 프레스 부서에서 때때로 사용할 수없는 아트 워크를 얻는 것처럼 개발자는 자신이 요구하는 바를 전혀 모르는 디자이너로부터 comp를 얻습니다 (디자이너는 마조히스트 만 따라갈 수있는 브리핑을받습니다). 그러나 계획 테이블의 한 장소를 고집하면 많은 좌절과 시간 낭비를 예방할 수 있습니다.


정확하게! 개발자로서 특정 디자인의 실현 가능성과 구현 비용에 대한 피드백을 제공 할 수있는 것을 좋아합니다. 설계의 일부가 __in__feaible 인 이유 에 대해 더 자세하게 설명 하면 설계자가 향후 더 나은 (더 저렴한) 설계를 만들 수 있습니다. 따라서 설계자가 코드를 작성할 수 없더라도 코드를 전달할 수 있어야하며 개발자가 사용할 수있는 프레임 워크 / 도구의 미묘한 부분을 이해하려고 노력해야합니다. (그리고 그들이 할 수있는 것이 좋을수록 나에게주는 것을 더 잘 구현할 수 있습니다.)
EthanB

1
아이러니하게도 최근에는 개발자가 3 층의 기업 관료주의 뒤에 있으며 전혀 액세스 할 수없는 웹 사이트의 디자인 단계를 완료했습니다. "디자인 파일을 선호하는 형식은 무엇입니까?"라는 질문에 대한 답변을 얻는 데 몇 주가 걸렸습니다. -가장 불만족스러운 작업 방식으로 인해 클라이언트 문제가 발생합니다. 운이 좋으면 곧 주현절이 생길 것입니다.
Alan Gilbertson

5

예, 아니오 대상 환경의 작동 방식을 아는 것이 중요하지만 실제로 시스템을 작동시키는 데 필요한 특정 코드를 이해하는 것은 중요하지 않습니다. 즉 - 나는 모든 주요 브라우저 엔진에 둥근 모서리를 만들 수있는 특정 구문에 대해 걱정하지,하지만 난 당신이 있는지 여부를 이해하는 것이 중요 있음을 고려할 수있는 모든 주요 브라우저에 둥근 모서리를 만드는 (얼마나 많은 코드를하는 것이 필요합니다 그렇게하기 위해).

예를 들어, 몇 년 전만해도 우리는 여전히 IE6에 안장되었습니다. 우리는 회사 인트라넷 응용 프로그램을 위해 절대적으로 아름다운 디자인을 가지고 있었지만 투명한 오버레이에 크게 의존했습니다. IE6는 PNG8을 표시 할 수 있지만 PNG24의 알파 채널을 존중하지 않으며 CSS 기반의 불투명도 요구 ActiveX 필터 및 기타 문제를 사용했습니다. 원하는 효과를 얻기 위해 후프를 뛰어 넘을 수는 있지만 각 후프는 개발주기가 길고 버그가 많으며 유지 관리가 어려울 수 있습니다. 버전 N + 1에서 작업하는 대신 kludgy 코드베이스를 패치하는 개발자 시간을 묶는 데 드는 기회 비용도있었습니다.

이러한 종류의 상황에서는 디자인에서 각 시각 효과의 비용 / 이익을 측정해야합니다.

  • 시각 효과가 얼마나 놀라운가요?
    건설 자원을 많이 필요로하지 않는 동등하게 영향을 미치는 다른 시각 자료로 대체 할 수 있습니까?

  • 대상에서 효과를 올바르게 재현 할 수 있습니까? 원본 디자인을 대상에서 정확하게 다시 만들 수 없으면 디자인을 사용 가능한 가장 가까운 근사치로 교체해야합니다. (감사하게 이것은 웹 디자이너에게 점점 더 문제가되고 있습니다.)

  • 예산은 얼마입니까?
    원하는 효과를 달성하기 위해 더 많은 인력을 건설 할 수 있습니까? 그렇지 않은 경우 짧은 시간 내에 기능을 다시 디자인 할 수 있습니까?

  • 비주얼을 수용하기 위해 얼마나 많은 코드베이스를 리팩토링해야합니까?
    디자인과 시공이 동시에 일어나거나 레거시 응용 프로그램을 다시 스키닝하는 경우 코더가 비주얼을 통합하는 것이 얼마나 어려울까요? 재 작성에 소요되는 시간뿐만 아니라 새로 변경된 코드를 디버깅하고 유지 관리 할 수있는 시간도 있습니다.

위의 글 머리 기호와 목록에없는 다른 점 사이에 겹치는 부분이 있습니다. 요점은이 짧은 목록에도 고려해야 할 사업 비용이 있다는 것입니다. 대상 시스템의 실제 작동 방식을 파악하면 상황을 훨씬 효율적으로 평가할 수 있습니다.

디자인을 만들기 전에 CSS 또는 HTML의 제한 사항을 이해하고 있다면 문제없이 구성 단계를 거치는 디자인을 만들 수 있습니다. 또한 설계를 구현할 수 있으며 대략적인 비용을 아는 힘을 확신 할 수 있습니다. 이것은 항상 당신 편이 편리합니다.


5

내 경험 (디자이너가 아닌 코더입니다)에서 웹 디자이너가 코드에 대해 알아야 할 질문은 아닙니다. 그러나 그들은 자신의 작업이 브라우저 내에서 어떻게 적용되고 있는지 알아야합니다.

웹 / 브라우저에 대한 충분한 지식이없는 디자이너의 가장 큰 문제는 디자인이 아름답지만 브라우저 내부에서는 작동하지 않는 디자인을 만드는 것입니다. 일부 고려하지 않은 몇 가지 사항 :

  • 폰트 사용. 일반 사용자에게는없는 PhotoShop과 함께 설치된 글꼴을 사용합니다. 또는 Windows / Linux에는없는 Mac 글꼴을 사용합니다.
  • 화면 / 브라우저 크기에 대한 존중 부족 더 작은 컴퓨터에는 디자인이 표시되지 않습니다. 작은 노트북 / 태블릿이 널리 보급됨에 따라 작은 화면 크기를 고려해야 할 필요성이 더욱 중요 해지고 있습니다.
  • 브라우저 화면의 크기를 조정하면 어떻게됩니까? 브라우저 크기를 조정할 때 디자이너가 디자인을 어떻게해야하는지 고려했습니다.
  • 스크롤바는 어떻습니까? 디자인은 일반적으로 "lorem ipsum"자리 표시 자와 함께 제공됩니다. 이 자리 표시 자에 많은 텍스트가 들어가고 스크롤 막대가 필요한 경우 어디에 배치해야합니까?
  • 많은 이미지. 일부 디자인에서는 많은 png를 잘라 내야합니다. 초기 페이지에는 브라우저가 이러한 모든 png를 다운로드해야하므로 웹 서버에서 응답 시간이 길어질 수 있습니다.

디자이너와 작업 할 때 본 문제가 있습니다. 이것은 코드에 대해 전혀 모르는 디자이너의 문제가 아닙니다. 그러나 디자인이 어떻게 사용되는지에 대해 생각하지 않는 것에 관한 문제.


폰트에 대한 좋은 점. 내 컴퓨터에 사용 된 글꼴이 설치되어 있지 않은 곳에서 PSD를 사용했습니다.
Chris_O

4

작업하는 매체에 대한 폭 넓은 이해는 항상 그 영역에서 더 나은 예술가와 장인을 만듭니다.

프론트 엔드 개발을 모르는 많은 웹 디자이너는 나쁜 웹 디자이너이기 때문에 웹 디자이너가 아니기 때문에 많은 작업을 수행하기가 어렵습니다. 그들은 인쇄 배경을 가진 그래픽 디자이너이며 실제 웹 사이트가 아닌 브로셔와 포스터를 만들려고합니다.

욕실을 개조하기 위해 조경사를 고용하는 것과 같습니다. 그들은 디자인 감각이 있고 일부 기본 사항을 이해할 가능성이 있지만 샤워를 타일링하는 것보다 앞 잔디를 조경하는 것이 훨씬 낫습니다.

10 년 전 대부분의 웹 사이트가 여전히 공장 현장 조립 라인과 같이 구축되었을 때 한 사람이 PSD를 수행하고 다음 사람이 HTML을 수행하고 다음 사람이 DB를 추가하는 등의 일을하는 것은 그리 큰 일이 아니 었습니다.

그러나 요즘 가장 진보적 인 웹 구축은 민첩한 프로세스로 이루어지며 팀은 다양한 사용자 경험 방법론, 점진적 향상, 통합 백엔드 및 프론트 엔드 시스템, 반응 형 웹 디자인과 같은 개념 등으로 다양합니다. 따라서 많은 설계 프로세스가 코드 에서 발생해야 합니다 . 프로토 타이핑, 사용자 테스트, 반복적 인 디자인 또는 코드가 무엇이든 코드는 매체이며 팀은이를 이해해야합니다.

아니요, 팀의 모든 사람이 jQuery 플러그인을 작성할 수 있어야하는 것은 아닙니다. 그러나 팀은 최소한 자신이 무엇인지 알아야하고 UX / 웹 팀은 궁극적으로 디자인 된 것은 무엇이든 구축해야하므로 CAN 사용자가 작성해야합니다.


4

예. 예술가는 자신이 작업하는 매체, 오일과 캔버스를 사용하는 화가, 대리석과 끌을 사용하는 조각가 또는 HTML과 CSS를 사용하는 웹 디자이너 등을 이해해야합니다.

나는 비디오 게임 산업에서 일했다. 최고의 게임 디자이너는 끊임없이 변화하는 매체의 한계를 이해하고이를 설계 할 수있는 강력한 기술적 인 구부러진 창의적 인재였습니다. 그렇게 할 수없는 사람들과 그들의 비전에 물을 줄인 사람들은 결국 엉망이됩니다.

나는 최근 디자이너의 배경이 전적으로 인쇄 매체에있는 웹 개발을했다. 결과는 다소 아름다운 페이지 였는데, 인쇄면에서는 환상적 이었지만 웹 사이트로는 다소 나빴습니다.


4

저에게 디자이너 / 개발자 연결 해제는 몇 년 전에 일어난 일이지만 사람들은 웹 디자인이 모형을 만드는 것보다 훨씬 더 많은 것을 깨달았습니다.

나를 위해 누군가가 자신을 웹 디자이너라고 부를 때 나는 기대합니다.

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

나에게 웹 디자이너는 사이트의 클라이언트 쪽을 만들 수있는 사람입니다.

좋은의 웹 디자이너는이 모든 것, 그들이 설계 과정에서 만드는 방법 선택에 대한 이해는 사이트의 UX에 영향을 미친다.

누군가 웹 개발자에게 말할 때, 나는 기대합니다 :

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

좋은의 웹 개발자는이 모든 것을 가지고, 그가 만드는 아키텍처의 선택이 사이트의 프론트 엔드 및 사용자에게 노출 기능에 영향을 줄 방법을 이해 할 수있을 것입니다.

또한 UX 및 웹 디자인보다 더 수평 인 다른 영역을 전문으로하는 사람들을 다양한 개발 환경에 적용 할 수 있습니다.

편집 : 그래픽 디자인을 웹 디자인과 분리 하는 좋은 디자인 그룹 의 예가 있다면 매우 관심이 있습니다.


3

설계자는 코딩 작동 방식에 대한 아이디어 가 있어야 합니다. 때로는 프론트 엔드 개발자가 혐오감을 피하는 유일한 방법 입니다. 그 아이디어를 얻기 위해서는 직접적인 경험 이 가장 쉬운 방법 일 수 있습니다.

분명히 다른 것들이 있지만 작은 자바 스크립트를 프로그래밍하는 법을 배우는 것이 귀하의 비즈니스를 해칠 수는 없습니다. (사실 시간은 변화하고있다 군대 그들의 DOM의에서 자신의 길을 자바 스크립트 수 있습니다 디자이너 기술을 가진 사람의,하지만 그것은 완전히 다른 이야기)

내 일반적인 생각 :

  • 프론트 엔드 웹 개발자는 끔찍한 백엔드와 여러 수준의 특이성을 다루어 디자인의 미묘함을 해결해야합니다. 이러한 특이점의 대부분은 관리 부분에서 사전 팹 백엔드의 잘못된 선택으로 인해 발생 하며 처리 시간이 많이 소요됩니다.

  • 웹 디자이너는 그러한 스트레스를받는 개인을 다루면서 자신의 생명 을 끊임없이 위험에 빠뜨 립니다. 그리고 테이블에 디자인을 떨어 뜨리고 사무실에 비명을 지르는 대신, 프론트 엔드 문제 중 일부를 신중히 고려해야합니다. "끝났습니다. 이제 끝났습니다. "

  • 디자인 상점은 불타 야합니다.


2

작업 장소에 따라 다릅니다.

대기업에서 일하는 경우 모두 다음과 같은 역할을 수행 할 수 있습니다.

  1. UX 또는 아키텍처 전문가-사이트의 정보 아키텍처 / 조직 / 와이어 프레임 계획

  2. 디자이너-포토샵이나 다른 도구를 사용하여 사이트를 디자인

  3. 프론트 엔드 개발자-html / css / javascript / json / xml / etc를 수행합니다. 프론트 엔드와 백을 통합하는 템플릿 코드를 작성합니다.

  4. 백엔드 개발자-모든 것이 실제로 동적으로 작동하도록하는 프로그래밍

대부분의 중간 수준 장소에서는 디자이너가 UX 결정도 처리해야합니다. 그러나 소규모 장소에서는 디자이너가 위의 3 가지 작업을 모두 수행해야 할 수도 있습니다. 그러나 프론트 엔드는 까다로운 영역이며 다른 기술 세트의 사람들이 있습니다. 프런트 엔드를 수행해야하는 디자이너라면 HTML / CSS 및 JQuery 나 다른 프레임 작업보다 훨씬 더 많은 정보를 기 대해서는 안됩니다. 디자이너가 자바 스크립트와 백엔드 통합의 더 깊은 측면을 알기를 기대하는 것은 너무 많은 요구입니다.

물론 만약 당신이 프리랜서라면 당신은 모든 것을 알고 스스로해야합니다.)


1
OP는 웹 디자이너가 전문가 코더 여야하는지 여부를 묻지 않고 웹 디자이너가 HTML 및 CSS 의 기본 사항 을 알아야하는지 여부를 묻습니다 . 당신이 웹 디자이너이고 HTML이나 CSS 파일을 터치하지 않아도 경우에도 설계조차인지를 알고 충분히 알고 있어야 가능 (그 문제에 대한, 또는 귀하의 타겟 고객을위한 웹 사이트 등).
Shauna

2

웹 디자이너는 기본으로 제한되는 경우에도 매체에서 작동하는 웹 디자인 및 웹 인터페이스를 만들 수 있도록 HTML / CSS를 알아야한다고 생각합니다.

웹 디자이너는 HTML / CSS 자체를 작성하지 않을 수도 있지만 웹 디자이너가되기 위해서는 마크 업과 CSS의 작동 방식을 알아야합니다. 웹 디자이너는 HTML / CSS 닌자 일 필요는 없지만 웹 레이아웃 구성 요소가 웹 사이트로 변환되는 방법을 (최소한) 아는 것이 좋습니다.


1

웹 디자이너는 코딩하는 방법을 알아야합니까?

예, 웹 디자이너는 Adobe Photoshop, Illustrator 및 InDesign과 같은 소프트웨어를 처리하여 웹 디자인을 만들어야합니다. 그런 다음이 디자인은 코딩을 처리하여 온라인으로 만듭니다. 이를 위해서는 웹 디자이너가 디자인의 구성 요소를 이해하여 코딩으로 나타내는 것이 매우 중요합니다. 이를 위해서는 코딩에 대한 지식이 있어야합니다. 완전히 이해하는 것이 아니라 기본 사항입니다.


0

개인적으로, 그것은 모두 당신의 기술과 요구 사항에 달려 있습니다. 물건을 빨리 배우고 파악할 수있는 기술. 재정 요구 사항. 무언가를 배우는 데는 시간이 필요하며 당분간은 생산성을 떨어 뜨릴 수 있습니다.

따라서 죽일 시간이 충분하다면 계속해서 코드를 배우십시오.

나는 지난 4 년 동안 디자이너였으며 기본적인 내용을 편집하는 데 능숙합니다. 코드를 배울 수있는 시간이 충분하지 않습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.