[웹디자인 원칙] 훑어보기 좋은 디자인

1. 관례를 이용하라. -> 널리 사용되거나 표준화된 디자인 패턴을 따르라 (ex. 사용자는 로고가 보통 페이지 상단 왼쪽 모서리에 있으리라 생각한다.) !! 혁신적인 결과를 내려면 대체하고자 하는 것이 지닌 가치를 이해해야 한다.- 새로운 아이디어가 더 낫다는 것을 확신할 때 혁신하라. 관례와 달라 보인다고 다 혁신이 아니다!- 명료성이 일관성보다 더 중요하다. 2. 시각적 계층구조를 효과적으로 구성하라. - 더 중요한 부분이 더 눈에 띈다. - 논리적으로 연관된 요소가 시각적으로 연결되어 있다. - 두 요소 간 상/하위 관계가 형성되어 있다면 이를 시각적으로도 보여준다. 3. 페이지의 구역을 또렷하게 구분하라. - 사용자는 페이지의 어떤 부분이 유용할지 한눈에 매우 빠르게 결정한다. (Banner b..
프로그래밍 & IT/웹디자인 2017. 1. 29. 17:55

spring boot logging 설정

처음 프로젝트를 시작하면서 프레임워크를 구성할 때, 가장 먼저 해야 하는 것이 로깅 설정이라고 생각한다.로깅 설정이 되어 있더라도 나부터도 귀찮아서 sysout을 일단 찍고 보는데.. 로깅을 지원하지 않으면 상상도 하기 싫다. 기본적으로 Spring boot는 Java Util Logging,Log4J2 and Logback. 기능을 지원한다. 별다른 설정을 하지 않는다면 기본 스프링부트 로그 레벨은 info이다. 물론 classpath에 logback.xml이나 logback-spring.xml에 설정을 하는 것으로 커스텀 로그를 찍을 수 있지만 굳이 당장 그렇게 까지 할 필요는 없기에 만능 application.properties를 사용해서 쉽게 설정할 수 있다. logging 관련 설정 프로퍼티는 ..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:54

PC업그레이드(부제 : RAM, SSD 지름에 대한 의식의 흐름)

최근 회사에서 클라우드 환경을 구축하는 연구실로 이동하게 되었다.인프라는 고양이 손톱만큼도 모르는 관계로 일단 서점에 들러 네트워크, 리눅스, 클라우드, Docker에 관한 책을 마구잡이로 구매했다. 일단 나는 집에서 자유롭게 사용할 만한 PC가 한 대 뿐이기 때문에 가상머신을 사용하여 여러 대의 컴퓨터인 척을 해 줘야한다.(이쯤에서 다시 오는 노트북 구매 욕구이다.) 약 3년 전쯤 직접 골라 조립한 내 PC의 견적은 아래와 같다. 이 상황에서 집에서 뭘 좀 본격적으로 해보려니 발생하는 문제는 다음과 같다.1. SSD 용량이 압도적으로 부족하다.2. 8G 램으로는 살짝 버벅인다.3. 쓰고있는 모니터 두 대 중 한대가 너무 후졌다. 원래 나는 매우 충동적이고 추진력 깡패니까 바로 질렀다. 1월은 설 상여금..
프로그래밍 & IT/기타 IT정보 2017. 1. 29. 17:54

[웹디자인 원칙] 사용자를 고민에 빠뜨리지 마라!

웹 페이지를 "자명" 하게 만든다 ->내가 만든 사이트에 전혀 관심이 없고, 바로 어제 브라우저의 뒤로 가기 사용법을 알게된 웹 관련 지식이 전혀 없는 지인이 있을 때,그 사람이 내가 만든 홈페이지를 보고 "이게 OO이구나." 알고 할 수 있는 수준. - 내가 지금 어디에 와 있는거지?- 어디서부터 시작해야 하지?- 어디에 입력하는거지?- 이 페이지에서 무엇이 가장 중요하지?- 왜 여기에 이런 이름이 붙었지?- 이건 사이트에서 올린거야? 광고야?- 이건 클릭 가능한건가? -> 명백하게 만들기 어렵다면 최소한 설명을 추가할 필요가 없을 정도로 만들자. 사용자는 우리가 만든 페이지를 시속 95km로 달리는 차 안에서 보는 광고판에 가깝다고 인식한다. 1. 사용자는 웹 페이지를 읽지 않는다. 훑어본다. 사용자..
프로그래밍 & IT/웹디자인 2017. 1. 29. 17:52

Spring boot + Mybatis 설정하기

Mybatis는 왜인지 모르지만 Spring boot에서 간편한 설정을 제공하지 않는다고 한다.Spring에서 지원하는건 아니고, Mybatis에서 만든 spring-boot-starter 라는게 있다고 하는데, 한두시간 삽질 해 봤지만 잘 되지 않았다. 그냥 내가 하고말지 싶어서 했다. 사용자 조회 기능을 위해 만들어 놓은 간단한 MVC 구조에 "SELECT NOW() " 라는 간단한 쿼리를 날려보았다.pom.xml에 mariadb와 mybatis의 dependency를 잡아준다. 12345678910111213141516171819202122 org.springframework.boot spring-boot-starter-jdbc org.mariadb.jdbc mariadb-java-client or..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:52

Spring boot mariaDB 연동

Hibernate와 Mybatis 사이에서 한참을 고민하고 있는 중이다. 둘의 차이점과 장단점은 추후 포스팅 하기로 하고, 일단 Spring boot에 mariaDB를 올리는 개발자라면 누구나 할 수 있지만 찾아보기 귀찮은 것을 정리해 보자.(maven을 쓰고 있기 때문에 maven 위주의 글이다.) 1. pom.xml 12345678910 org.springframework.boot spring-boot-starter-jdbc org.mariadb.jdbc mariadb-java-client Colored by Color Scriptercs 요래 하고 저장을 한다. 혹시 모르니 maven -> Update project까지 한번 눌러준다.그리고 프로젝트를 구동 시키면 아마 안될 것이다. 연결 가능한 D..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:51

MySQL에서 MariaDB로 마이그레이션 해야하는 10가지 이유

출처 : https://seravo.fi/2015/10-reasons-to-migrate-to-mariadb-if-still-using-mysql 연습용이라지만 DB의 선택은 사실 집 지을 땅을 고르는 것만큼이나 중요한 일이기에.. 오픈소스 DB 중 MySQL과 MariaDB를 놓고 고민 하던 중 발견한 글이다. 다만.. MySQL workbench가 더이상 mariaDB를 지원하지 않는 다는 점이 생각보다 더! 불편함으로 다가왔다.(역시 대기업은 대기업인가..)성능 모니터와 같은 자잘한 기능들이 매우 유용했는데 말이다. 영어를 읽는 것 조차도 귀찮은 새벽 1시기에, 위대하신 신경망 번역 구글 번역을 돌려 보았다.1) MariaDB 개발이보다 개방적이고 역동적입니다.2)보다 빠르고 투명한 보안 릴리스를 ..
프로그래밍 & IT/DB 2017. 1. 29. 17:50

html 페이지 redirect

관습인지 이게 어떤 이유가 있는지는 모르겠지만,보통 웹 페이지의 첫 html 화면은 index.html이다. 나는 이 index.html을 완벽하게 '빈' 화면으로 만들 것이다.그리고 사용자가 느끼는 '진짜' 첫 화면으로 바로 redirect 시켜주고자 한다. Spring framework를 사용하고 있기 때문에, redirect 자체도 컨트롤러를 통한 이동이 될 것이다. 사실 몇 번인가 해 본 작업이지만.. 보통 프로젝트를 시작할때나 특정한 상황이 아니고서는 자주 사용할 일이 없기 때문에,그 때마다 다시 구글링을 해서 작업을 해 왔다. 방법은 매우 간단하다.index.html의 meta tag를 이렇게 작성해 주면 끝. 1cs content의 앞쪽 숫자 0;은 0초 뒤에 수행하라는 뜻이다. 즉, 개발자..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:49

thymeleaf로 메인화면 레이아웃 잡기

뷰템플릿으로 thymeleaf를 사용하게 된 것은 생각보다 단순했다.제작년인가.. 회사에서 받았던 교육의 일부 실습에서 정말 '어쩌다' 사용하게 되었고, 스프링에서도 밀고 있다 하니 한번 사용해 보기로 했다.걱정되는 것은.. 후에 jquery를 활용한 그리드 등을 만들 때의 호환성 문제가 있지만, 문제가 된다면 그때 가서 걷어내든 길을 찾아보든 하면 될 것이다. thymeleaf를 처음 쓸 때 가장 당황했던 점은, 모든 html태그를 완벽하게! 닫아줘야 한다는 것이었다.다소(아니 매우) 불편하긴 했지만 이정도는 감내할 수 있다. thymeleaf의 Layout 기능은 정말 간다하면서도 유용했다.화면의 Layout을 잡기 위해 우선 main이 될 layout 페이지를 만들고 nav/footer 등의 고정될..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:33

Swagger ui로 REST API 테스트,문서화

REST API를 쉽게 테스트하고 문서화 할 수 있는 좋은 tool이 있다.Swagger라는 오픈소스 tool이다. 실제 업무에서 적용해야 하는 프로젝트는 조선시대의 스프링 버전을 사용하는 프로젝트라서.. 일단 잘 되지 않았다.(서버조차 올라가지 않는다.)이거 해결하느라 시간을 낭비하며 스트레스 받을 바에.. '일단' 어떻게든 실행을 시키고 여러가지로 테스트를 해 보기로 했다. 세상 가장 사랑스러운 Spring-boot를 사용한다. pom.xml에 swagger2와 swagger ui를 사용하기 위한 dependency를 설정한다. 1234567891011 io.springfox springfox-swagger2 2.2.2 io.springfox springfox-swagger-ui 2.2.2 Color..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:32

thymeleaf 에 bootstrap 테마 적용하기

세상 참 좋아졌다. Spring-boot로 몇분만에 서버를 올렸다.STS를 IDE로 사용하니 작년에 처음 Spring-boot 사용할때보다 몇배는 간편해진 느낌이었다. 빌드 툴은 이왕 처음부터 연습하는거 Gradle을 써보려고 했으나, 안드로이드가 아닌 일반 웹 개발에서 메이븐에 비해 나은 점을 도저히 찾아볼 수가 없어서 Maven으로 결정했다. 클라이언트단 개발에서 bootstrap은 말도 안되게 혁신적이고, thymeleaf는 아직도 정확한 용법을 모르겠다. 두개가 조금 충돌이 있는것 같긴 한데, 차차 공부해 봐야할 것이다.bootstrap 무료 테마 중 마음에 드는 것을 발견해 적용해 보았다. 내가 띄운 서버의 index page로 그대로 붙여넣고, link와 script 경로들을 수정해 주고 야심..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:32

thymeleaf에서 legacy html5 사용하기(spring boot 사용)

Thymeleaf를 사용하며 가장 불편한 점은 이렇다. Thymeleaf가 결국 html을 well-formed XML로 변환하기 때문에 일반적인 습관으로 html을 작성할 때에 생각보다 많은 오류를 발생시킨다.(예를 들면 input이나 link, meta tag 등에서 닫힘 태그를 주지 않는 경우) 이데 Thymeleaf는 Legacy HTML5 Mode를 지원 한다. (이 모드를 사용할 경우 제한되는 부분은 추후 다시 확인해 볼 필요가 있다.) spring.thymeleaf.mode = HTML5 일 때 thymeleaf의 default mode는 html5이다.이 상태에서 link 태그를 닫지 않고 아래와 같이 meta, link 태그를 선언한다. 그 뒤, 이 html5 페이지에 접근하게 되면, 에..
프로그래밍 & IT/Spring & HTML 2017. 1. 29. 17:30

Java File 존재여부 체크

경로에 대한 파일을 읽어서 처리할 떄, 주어진 경로에 파일이 없을 경우 워닝 로그를 출력하도록 했다. 두가지 방법이 있을 수 있는데.. 1. 삽질물론 동작하는 코드지만.. 의식의 흐름대로 코딩하다 삽질을 했다.다만 이 경우가 더 좋은 상황도 있으니 1234567 FileReader fr;try{ fr = new FileReader(path);}catch (FileNotFoundException e) { logger.debug("찾을 수 없는 파일");} Colored by Color Scriptercs FileReader를 사용해 경로에 있는 파일을 읽는다. 파일이 없을 경우 catch하여 exception처리했다.오직 읽어온 File을 처리하는 로직만 있다면 저렇게 하는게 더 깔끔할듯 싶다. 2. Fi..
프로그래밍 & IT/Java 기본 2017. 1. 29. 17:28