자연수 n이 매개변수로 주어질 때, n의 다음 큰 숫자를 return 하는 solution 함수를 완성해주세요.
2. 제한 사항
n은 1,000,000 이하의 자연수입니다.
3. 입출력 예제
n
result
78
83
15
23
4. 나의 접근 방식
일반적인 숫자를 받아 2진수로 바꾸어 1의 개수까지 구해주는 함수를 만든다.
이후, n보다 크다는 조건을 위해 n + 1부터 1씩 증가시켜 주면서 계속 비교해 간다면 모든 조건을 만족시킬 수 있다.
이는 반복적인 조작을 계속 1씩 증가시키면서 하면 되기 때문에 재귀로 만드는 것이 낫다고 생각하였다.
5. 결과
// 재귀함수를 위해 target을 n + 1로 선언, 할당한다.
function solution(n, target = n + 1) {
// 2진수로 만들어 1의 갯수를 계산할 함수를 만들어 준다.
const getOneCount = (num) => {
let countOne = 0;
let two = num.toString(2);
for(let i = 0; i < two.length; i++) {
if(two[i] === "1") countOne++;
}
return countOne;
}
// 이미 n보다 크다는 조건 1을 만족한 상태이기 때문에 조건2의 기준인 1의 갯수는
// 위의 함수에서 계산해 주기 때문에 둘의 갯수가 같으면 그대로 반환한다.
if(getOneCount(n) === getOneCount(target)) return target;
else {
// 같지 않다면 1을 증가 시켜서 다시 재귀를 돈다.
target++;
return solution(n, target)
};
}
효율성이 떨어지며, 닫침 괄호로 시작하는 등의 경우를 생각하지 않았기 떄문에 예외 케이스가 있었다.
실패한 코드
function solution(s){
// 열림 괄호와 닫침 괄호의 갯수를 계산한다.
let open = 0;
let close = 0;
for(let i = 0; i < s.length; i++) {
if(s[i] === "(") open++;
if(s[i] === ")") close++;
}
if(open === close) return true;
else return false;
}
그래서 시작이 닫침 괄호일 때는 절대로 true가 나올 수 없기 때문에 그 경우를 바로 false로 처리한 후에, 배열에 넣어서 스택처럼 열림 괄호가 나오면 배열에 넣고, 다시 닫침 괄호가 나오면 빼는 방식으로 모든 s를 돌아 검사한 후에, 그 스택에 요소가 들어 있으면 닫침과 열림의 수가 맞지 않다는 말이 되므로 false 아니면 true로 답을 낼 수 있었다.
4. 결과
function solution(s){
let arr = [];
if(s[0] === ")") return false;
for(let i = 0; i < s.length; i++){
if(s[i] === "(") arr.push(s[i])
if(s[i] === ")") arr.pop();
}
if(arr.length === 0) return true;
else return false;
}
인터페이스에 표시할 기능이 많으면 사용하기 좋다. 항상 노출되지 않더라도 비슷한 기능끼리 모여 있으면 어디 있는지 유저는 찾기가 편하다.
간단한 예시로 우리가 사용하던 그림판을 생각해 보자. 각 도구들이 비슷한 기능들이 붙어있다. 그림이면 그리는 도구, 색, 도형의 사이즈 등을 설정하는 아이콘들이 모여있고, 텍스트 입력이면 텍스트 입력에 관한 폰트 설정, 폰트 사이즈 등의 비슷한 기능을 하는 도구들이 모여있다.
호버(Hover) 또는 팝업 툴(Pop-Up Tools)
어떠한 동작을 수행하기 위해 마우스를 올리면 선택할 수 있는 기능들이 나타난다.
역시, 마찬가지로 항상 화면에 노출 시키킬 필요가 없으므로, 나타내야할 기능들이 많을 때 사용하기 좋다.
가급적이면 기능이 작동하는 영역에서 가까운 상단이나 옆으로 배치하는것이 좋다.
호버 되면 보여줄 목록이 들어가야 하기 때문에 공간의 여유를 두고 만들어야 한다.
예시로는, 유튜브에서 동영상을 재생 중일 때는 하단의 볼륨이나 재생시간 등이 보이지 않다가 마우스를 올리면 다시 노출된다.
조작 패널(Action Panel)
단순한 기능목록의 나열이다.
가장 많이 쓰이며, 사용자가 자주쓰는 기능 등을 추천해 줄 수도 있다. 덕분에 유저에게 익숙하다.
기능이 너무너무 많을경우 사용할 수 있다. 호버나 팝업으로 띄우기는 것도 한계가 있을 정도로 많을 경우 사용한다.
배치하는 방법은 UI에 조작 패널을 배치한 후에, 기능을 구조화시켜서 알맞은 목록에 기능들을 정리하고 각 레이블을 기능에 지정한다.
예시로는, 윈도우 OS의 윈도우 버튼을 누르면 나오는 시작 메뉴이다.
완료 버튼 강조(Prominent Done Button)
최종단계의 버튼 등의 강조가 필요한 버튼만 다른 스타일을 준다.
예를 들어, 쇼핑 사이트의 결제하기 버튼의 색을 다른 버튼들과 차이를 둘 수 있다.
지능형 메뉴 항목(Smart Menu Items)
유저의 행동과 상황에 맞춰 동적으로 메뉴를 다르게 보여준다.
인터페이스가 직관적으로 변하기 때문에 유저의 실수를 줄일 수 있다. 지금 작업 중인 요소의 메뉴만 있기 때문에 공간적으로도 유리하다.
예시로는, Mac OS의 최상단 매뉴바를 예로 들 수 있다. 하고 있는 작업에 따라 메뉴가 바뀐다.
미리 보기(Preview)
어떤 행동을 했을 때 결과가 어떤지 보여준다.
특히, 큰 파일을 열거나 수정했을 때 결과를 미리 볼 수 있다면 원하지 않은 결과가 나와서 다시 돌아가야 할 때 시간을 크게 줄일 수 있을 것이다.
예를 들어, 사진 편집 등을 할 때, 여러 가지 필터를 사용할 수 있다. 이때 미리보기를 이용해 어떤 필터가 가장 최적인지 살펴보고 적용할 수 있다.
스피너(Spinner)와 로딩 인디케이터(Loading Indicator)
사용자가 선택한 기능을 수행하고 완료하기까지 걸리는 시간에 보여줄 수 있다.
유저는 응답을 기다리는 동안 올바로 요청이 보내 진 것인지 알 수 있다.
진행도를 함께 표시할 수 도 있다.
스피너는 빙글빙글 돌아가는 애니메이션의 모습이고, 로딩 인디케이터는 지금의 진행도에 해당하는 막대가 왼쪽부터 오른쪽으로 채워지면서 끝까지 가면 100%가 되는 우리가 로딩에서 자주 볼 수 있는 모습이다.
취소 가능성(Cancelability)
시간이 오래 걸리는 작업을 기다릴 때 유저는 취소할 수 있다.
유저가 상황을 컨트롤할 수 있게 하는 것은 오류 예방과 복구에 도움을 줄 수 있다.
예시로는, 구글 플레이 스토어나 앱스토어에서 애플리케이션을 다운로드하고 있을 때 X 버튼으로 취소할 수 있는 경우이다.
매크로(Macros)
동작들을 기억했다가 그 동작들을 묶어서 계속 실행시켜 준다.
반복되는 동작이 필요할 경우 유저는 편하게 매크로를 사용할 수 있다.
예시로는, 모바일 기기로 사진을 찍으면 자동으로 클라우드 시스템에 업로드시켜주는 서비스 등이 있다.
결국, 가장 중요한 것은 중요한 동작이 가장 잘 보이도록 만드는 것이다. 사소한 기능들이라고 해도 유저가 느끼기에 안정감과 빠르고 효율적인 탐색은 UX를 크게 상승시킨다. 이를 위해 유저가 앱을 사용할 때의 Flow에 더 집중하여 계속 개선해 나갈 수 있다.
