이렇게 디자인하려는데, 자바스크립트를사용하라는 얘기를 들었습니다. 자바스크립트만 공부하면 되는건가요..? css가 디자인을 하는데 사용한다는데..

Question

안녕하세요, 디자인을 공부중인 학생이자 그림을 그려 전시도 하고있는 그림쟁이입니다.이런 포트폴리오 사이트를 만들고싶은데, 자바스크립트로 만들어야한다는 얘기를 교수님에게 들었습니다.자바스크립트를 공부하면 이런 홈페이지를 만드는데 어려울까요??https://www.behance.net/gallery/80083153/Every-Second찾아보니 디자인은 css라는 언어를 사용한다고 하는데, 자바스크립트만 공부를 한다고해서 사이트를 구성할수있는건 아닌가요..?컴퓨터언어는 정말 아무것도 몰라서 배우려고 왔습니다..

스프라이트마시쪙 · Answer

UI만 구현한다고 가정하에 기능 없이 보여준다는것만 집중했을때는HTML , CSS에 서버 반영만 하시면 될것같아요 한 일주일정도 집중하시면 충분히 구현하실수있을꺼에요

ImHasu · Answer

저런 웹사이트의 뼈대는 html이라는 것으로 만들구요 Css를 통해 스타일링을 하시는 것이라고 생각하심 됩니다. 그리고 자바스크립트 언어를 이용해 사이트 요소가 동작하게 만들 수 있지만 단순히 사진이나 ui요소들의 전열만 하시는 것이라면 자바스크립트 코드는 많이 필요치 않습니다.

BGProgramming · Answer

디자인 잘하시네요. Very Good.하지만 만일 그림으로 때우는것이 아닌 중간의 3D로 보여주는 컴포넌트를 제작한다면 상당한 도전과제입니다.그림이나 영상으로 때운다면... 일반 html, css로 하면 됩니다만...저는 순간 컴포넌트 제작하는 것을 생각했엇습니다.후자는 클라이언트 개발자가 도전할만한 도전과제 정도의 프로젝트일수 있습니다.아마 이거 직접 구현했다고 한다면 웬만한 업체들 코딩 테스트는 다 스킵할 것 같습니다.저라도 실제 만들었는지 몇가지 물어보고 진짜 만들었다고 한다면 무슨 언어 사용하던지 그냥 합격시킬것 같네요.해당 콤포넌트는 가능한 비슷한 효과를 주는 ui를 살펴보고 타협을 보는것이 가장 나아보이지만...직접 구현한다면 3D 수학을 많이 사용해야 합니다.제가 3D로 옆으로 회전하면서 보여주는 정도는 안드로이드에서 구현해봤습니다만...지금 이 컴포넌트는 상당히 도전적이네요.간단히 영상으로 대체하신다면 지금부터 배우셔서 만드실수 있습니다.

BGProgramming · Answer

컴포넌트라고 표현했던것은 만드신 디자인을 단순 이미지나 비디오로 표현한것이 아니라 화면상의 구성요소로서 만들려고 하는 경우입니다.https://www.sliderrevolution.com/templates/oakgrove-wine-slider-template/이쪽 보시면 화면이 좀 역동적이지요?예시는 적당하지는 않지만...예를들어 중간의 이미지 클릭하면 설명 다이얼로그가 뜰겁니다.이런것처럼 사용자가 클릭하면 반응하고 동작하게 만들기위해 컴포넌트라는 단어를 사용했습니다.즉... 님이 만든 디자인을 보면 이미지 여러개가 실제적으로 있고 해당 이미지를 클릭하면 앞으로 나오면서 좀더 자세히 보여주고 표현하는 방식입니다.이렇게 하려면 개발해야하는 것이 많습니다.우선 처음 이미지를 많이 로딩해야하는데요.이 많은 이미지를 처음에 로딩할때 시간이 상당히 많이 걸릴겁니다.이에 썸네일처럼 모든 이미지를 풀 사이즈로 하는것이 아니라 먼저 작은 이미지로 처리했다가 클릭했을때 실제 이미지를 보여주어야 하죠.그리고 처음 로딩할때 많은 이미지로 인해 속도가 느릴겁니다. 또한 1000장의 이미지 이상도 있을수 있구요.이에 lazy() 로딩이라는 동적 로딩 기법이 들어갑니다.또한 이미지가 선택될때 애니메이션 작업이 있지요?다른 이미지는 촤라락 뒤로 밀려나면서 선택한 이미지가 중앙에 배치해주는...요런 것의 표현또한 속도 및 에니메이션 최적화를 꽤 해야합니다.이에반해 클릭했을 때 앞으로 나오면서 글을 표현해 주는 건 쉬운 편이죠.또한 카테고리별로 해당 카테고리 이미지만 크게 표현되는것... 이미지가 출렁이는 애니메이션 또한 작업이 많네요.이걸 진짜 화면 이미지나 영상이 아닌 사용자와 반응할수 있는 요소로 만드는것은 쉽지 않긴 할겁니다.구현은 구현이고... 실제 보여주기 위해 3d 수학이 필요합니다.이런 요소들을 보여주는게 그냥 보여주는것이 아니라 수학 계산식에 의해서 구현되거든요.예를들어서 간단히 3D로 보여주는 것으로도 수학이 사용되는 것을 알수 있습니다.다음 영상을 참고해 보세요.이건 3D로 이미지를 보여주는 예시입니다. 이런 모듈보다 만드신 UI를 실제 구현해 본다고 생각해보니 작업 내용이 상당하다고 생각했습니다.https://www.webdesign-flash.ro/p/s3dcar/제가 생각해본것은 이런 사항이었구요.그냥 자신이 디자인한 것을 영상이나 이미지로만 표현하는 것이라면 그냥 공부하시면서 일반적인 페이지 출력으로도 충분합니다.

이렇게 디자인하려는데, 자바스크립트를사용하라는 얘기를 들었습니다. 자바스크립트만 공부하면 되는건가요..? css가 디자인을 하는데 사용한다는데..

4개의 답변

Q&A 목록