본문 바로가기

Design Study/UI / UX

고민할 만한 웹 디자인 문제



1. Flexible 하게 웹사이트를 만들 것인가, 아니면 fixable 하게 만들 것인가?

Which way do you want to make a website, Flexible, or Fixable website? 


- 포토샵에서 디자인 하다보면 화면이 똑같은 사이즈다 보니 실제 웹 상에서 돌아갈 시에 화면 크기에 맞게 늘어날 것인지 아니면

화면 크기에 구애 받지 않고 만들 것인지에 대한 생각을 안하게 된다. 개발자 입장에서는 실제로 만들기 때문에 짚고 넘어가야 나중에 노티스를 받지 않을 수 있으니 꼭 생각하자.

When we design website in Photoshop program, We don't think that we decide which way is suitable; Flexible size or Fixable size. Because we start fixed canvas size in Photoshop not real web canvas. for developer shoe, They make a website for real so, it will happen that they ask about this issue. 





2. 노트북, 데스크탑, 타블렛, 모바일의 영향을 생각하자.

Think influence from laptop, desktop, tablet, mobile any device.. 


- interactive한 웹 사이트를 제작 시에 꼭 그런 상황이 아니더라도 항상 생각 해야하는 이 옵션. 갈 수록 복잡해서 고려해야 할 상황이 많다. 나중에 릴리즈가 되고 난 후 꼭 모든 디바이스에서 확인하고 고쳐야 하는 생각을 가져야 하겠다. 

It is not option any more to think. Laptop, desktop, tablet, mobile any device.... it comes more complicate by time goes so, after we release a website, we should make sure that this website is good for any screen. 





3. 플래쉬, 이젠 정말 그만.

Don't Flash, Don't.


유난히 한국만 플래쉬를 아직까지도 많이 쓰는 것 같다. 용량이 크다. 외국에서는 용량제로 인터넷을 쓰는 경우가 있으니 꼭 용량을 생각해서 만들어야 한다. 그리고 몇몇의 모바일 디바이스에서도 보이지 않는다. 이 사항은 2번과 연관이 있다. 

Still lots of flash websites in Korea (of course many countries as well), it's big like a giant man. Some countries are used volume-internet which is paid by how much we use. importantly, Flash isn't showed some devices.. it's relevant with number 2 issue 






4. 인터넷 익스플로러, 파이어 폭스, 크롬 세가지

Internet explorer, Firefox, chrome.


한국의 인터넷 대부분은 익스플로러를 사용하기 때문에 그쪽에만 치우쳐 있어 크롬 사용 시 작동이 안되는 사이트도 있다는 것을 나와보기 알겠더라. 특히 결제나, 뭔가 절차를 거쳐야 하는 사이트라면 십중팔구는 인터넷 익스플로러를 사용할 것에 대한 팝업창을 띄우기도 한다. 근데 표준 코딩 시 익스플로러는 제대로 보이지 않는 다는 점도 있다. shorted words 코딩한 대로 보이게 된다.. 라는 함축어가 있었는데 기억이 나지 않는다. 어쨌든 추세는 크롬이 익스플로러를 앞서가고 있다는 점에서 이제는 다시 바라봐야 할 듯 하다.

Recently, i realized that i couldn't use some Korea websites which suit websites to internet explorer. especially, website which needs a tasks are required to change current windows to internet explorer if you use other ones. and if you code, Explorer is not good view to make a website. .. i don't remember shorted words ... F..T... W... anyway, it's true that Chrome is raising up higher than Explorer. We should re-organize this way.





5. 이런 스타일 가이드!

Damn Style guide.


유저 가이드 처럼 스타일 가이드도 있는데 이런 건 실무에서 배워야 하는데 개발자 근처에만 있던 나로써는 심각하게 생각해 본 적이 없었다. (웹 작업을 항상 혼자 했거나, 웹 작업이 다른 형태였기 때문에) 그러나 이번에 웹 개발자와 같이 작업하면서, 스타일 가이드를 먼저 제시해야 나중에 다시 스타일시트를 고칠 일이 없다는 것을 깨달았다. (그러한 면에서 디자이너가 CSS를 왜 배워야 하는지 좀 실감한다) 한국에서는 스타일시트고 뭐고 시간이 촉박하기 때문에 항상 시안만 넘겨버리고 후딱 해버리기 때문에 프로젝트에 대한 deep thought을 해보기가 쉽지 않다. 이런 스타일 가이드부터 시작해서 좀 체계적으로 할 수 있는 시간을 갖고 싶다. (왠 푸념)

예를 들어, H1, H2, H3, default button, hover button, background, font, main color, accent color, layout unity ... 등 hover 시에 폰트 색, 버튼 종류, 버튼이 하는 역할에 따른 통일성 및 .. 아 이것은 UX로 넘어가야 할 듯 하다.

I hadn't thought seriously about style guide coz i was always surrounded developers so i haven't practised much. (usually worked alone, was different type works) but while i was working with web developer, i realized that it would have been easier if i had made style guide first (and knowing CSS is also good for designer). but it doesn't have time to think deeply enough project we do, (always hurry hurry) just make and then pass design page. (what a nagging) 

What should think is like H1, H2, H3, default button, hover button, background, font, main color, accent color, layout unity .. 






6. 화려한 의미없는 컨텐츠 화면 보다 차라리 없어보이지만 딱 있을 것만 있는 화면을 지향하자.

better white spaced website than rich, showy meaningless website.

왜 이 이미지를 썼는지에 대한 이유가 있어야 할 듯 하다. 그건 있다, 흰 배경만 있고 아무것도 없어서 허접해 보이기 때문에 뭔가를 채워넣어야 한다는 느낌이 있다. 물론 나도 지금까지 그렇다. 없어보이지만 딱 있을 것만 있는 웹 사이트가 나중에 보면 사용이 편하다는 점에는 동의한다. 눈을 잡아 끌만 한 불편한 것들이 없으니. 그리드 디자인을 활용하면 별 것 없어도 깔끔한 느낌이 드니 그런 방향으로 가는 것이 낫지 않을까, 용량도 덜 잡아 먹고.

I think we need a reason why we use some images on the website. i also feel that i should fill on some white space using any images, but i agree with that basic contents website gets easier than showy website. anyway if we make full use of grid design, It will feel simple clean and light. 





생각나는 것만 무작정 써 보았다. 지금 하고 있는 작업들이 작게 나마 도움이 되는 것 같다. 

그리고 스타일 가이드 포맷을 만들어서 꼭 다음번에는 먼저 다 정렬하고 넘어가자. 

난 내 생각보다 깔끔한 성격이 아닌 갑다. 

anyway, it's not easy to write in two languages at the same time. i'm not sure if i will do again like this. 

and that content is just my thought, my note.