Web 프로젝트하면서 느낀점

실력향상과 프로젝트의 목적을 위해 부트스트랩이나 템플릿을 복붙하지않았으며

다른 사이트들을 간단하게만 참고하면서 만들었다

https://github.com/fepick/fepick.github.io

GitHub - fepick/fepick.github.io

 

웹페이지의 메인 컨텐츠는 three.js 모듈로 구현한 반도체 모델과

전자의 흐름 애니메이션이다

 

꿀팁)

1. chrome이나 Firefox를 사용하고 F12를 자주 누르자

2. 몇몇 텍스트 에디터를 사용할 경우(나의 경우 vscode를 사용함) 코드를 고치면 웹사이트가 바로바로 변하는 모습을 보여줄 수 있는 확장 프로그램을 설치할 수 있을 것이다(vscode의 경우, Live server 사용) 그거 쓰면 편하다

 

HTML 관련 느낀 점

직관적이여서 그렇게 어렵지 않다

 

여기서 가장 중요한 것은 웹사이트의 레이아웃을 잘 나눠 놓는 것이고

거기에 유지보수하기 편한 class 이름과 id를 달아 놓는 것이라고 생각한다

 

추가적으로 할 일은

내 웹사이트가 검색에 잘 노출되게 하고

웹 접근성을 지키는 것 정도가 있겠다...

 

+

html공부를 통해 티스토리를 더 잘 쓰게 될 수 있게 되었다

html은 굉장히 직관적이기 때문에,

적은 노력으로 많이 배울 수 있고 많이 써먹을 수 있다고 생각한다. 가성비가 좋다.

CSS 관련 느낀 점

직관적이라 코딩은 어렵지 않은데

코딩 5% 디자인센스 95%가 필요하다고 생각한다

작은 디자인 요소요소가 내 웹사이트가 어떻게 보이는지에 많은 영향을 끼친다

 

정렬 배울때 화가 났다

정렬 방법이 다양하고 잘못하면 막 줄 넘어가고 가로세로 비율 안맞고

아무튼 이상함

 

HTML의 레이아웃을 제대로 나눠놓지 않았다면 여기서 고생 좀 하게 된다

JS 관련 느낀 점

C 계열 언어들이랑 비슷하게 생겨서 코드 이해는 어렵지 않은데

내가 스크립트 언어를 잘 쓸 줄 모른다

 

백엔드를 하든 프론트엔드를 하든 javascript는 필수인 것 같다

인터렉티브한 웹사이트를 만들려면 javascript가 핵심

 

dom과 계층구조에 대한 이해가 특히 중요한 듯 하다 근데 잘 모르겠다

프로젝트 내내 거의 html이랑 CSS만 팠다

Three.js 관련 느낀 점

이거 생각보다 노가다다

 

좀 어렵다 Webgl 쌩으로 짜는것보다는 쉽겠지만

그래도 어렵다

 

 

javascript로 짜는거라서 뭐든지 만들 수 있다

3D 모델 만드는거는 그냥 노가다로 해결이 된다

근데 거기에 디자인 요소 추가하고 텍스쳐 넣는건 디자인 센스가 필요하고

거기에 애니메이션이랑 시뮬레이션 기능을 넣으려면 코딩과 수학 실력이 필요하다

three.js 사이트에 수많은 example 들이 있는데, 그것들 이해하고 써먹는 것도 어렵다.